框架
什么是框架
盖高楼大厦,框架结构
框架结构就是大厦主体,基本功能
把很多基础功能已经实现(封装了)
框架:在基础语言之上,对各种基础功能进行封装,方便开发者,提高开发效率
举例:操作网页
现在:点击一个按钮 触发事件,获取要操作的标签,在对标签内容进行操作
框架:操作网页时,程序员只关注要操作的内容即可,对标签内容的更新等操作,都由框架完成
前端框架
javaScript是原生的
vue.js 是一个js框架,不是代替js的,是对js进行了封装。
UI框架:将前端常用的一些组件(表格,表单,消息提示)进行封装(对html和css进行了封装)
后端Java框架
mybatis--jdbc
spring……
vue.js
优点
体积小,效率高,双向数据绑定 m v vm ,生态丰富,学习成本低
1.在head标签中导入vue.js
<script src="js/v2.6.10/vue.min.js"></script>
2.vue模板
<body>
<div id="app">
{{ message }}<!-- {{}}插值表达式,可以获取data中的值 -->
</div>
<script>
/* 创建一个vue对象 */
var app = new Vue({
el: '#app', //绑定挂载点,可以使用其他的选择器,建议使用id选择器,不能使用body,html与vue对象绑定
data: {//定义数据,可以定义多个
message: 'Hello Vue!'
}
})
</script>
</body>
3.Vue 指令
指令带有前缀 v- 开头,以表示它们是 Vue 提供的特殊属性。
v-text
作用是设置标签的文本内容
默认写法会替换全部内容,使用差值表达式可以替换指定内容
内部支持写表达式
<p v-text="message">aaa</p>
<p>{{message}}aaa</p>
v-html
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
<p v-html="message">aaa</p>
{{}},v-html,v-text的区别
{{message}}插入一个值,不影响标签中的其他内容
v-html="message",v-text="message"会覆盖标签中的其他内容
{{message}},v-text="message"不能解析内容中html标签
v-html="message"可以解析内容中html标签
v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
在vue中声明函数,使用this关键字访问data中的数据
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test1()" />
methods:{
test(a,b){
alert(a);
},//两方法之间用逗号隔开
test1(){
}
}
v-model
v-model="变量" 把表单元素的value值 绑定到vue对象data中,当输入框值发生改变时,自动更新到数据中
绑定的数据<---->表单元素的值 双向数据绑定
<input type="text" v-model="message"/>
//message需要在vue对象的data中定义
v-show
修改元素的 display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为 true 元素显示,值为 false 元素隐藏
数据改变之后,对应元素的显示状态会同步更新
<img v-show="isShow" src="img/3.jpg" />//isShow为true,图片显示
<img v-show="age>18" src="img/3.jpg" />//age为15小于18图片隐藏
data:{
isShow:true,
age:15
}
v-if
隐藏标签时,直接将标签从网页删去,大量操作开销较大,显示时需要重新创建标签,效率低
显示状态表达式的值为 true,元素存在于 dom 中,为 false,从 dom 中移除
频繁的切换 v-show,反之使用 v-if,前者的切换消耗小
v-if 可以和 v-else 联合使用 两个必须紧挨着
<img :src="img" v-if="isshow" />
<img src="img/2.jpg" v-else />
data: {
img:"img/1.jpg",
isshow:true
}
v-bind
v-bind:标签属性名 = "变量" 可以动态改变属性的值,只需在js中改变变量的值即可
完整写法是 v-bind:属性名
简写的话可以直接省略 v-bind,只保留 :属性名
<img v-bind:src="imgSrc" />
<img :src="imgSrc" />
<img :title="imgTitle" :src="imgSrc" />
data:{
imgSrc:'img/1.jpg',
imgTitle:"鼠标放上会显示的提示"
}
我们可以传给 v-bind:class 一个对象,以动态地切换 class:
<div v-bind:class="{ active: isActive }"></div>
//为true时设置的样式显示,为false时不显示
data:{
isActive :true
}
v-for
作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是(item,index)in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key=”值” 尽可能唯一
<li v-for="item in array">
{{item}}省
</li>
<li v-for="(item,index) in array">
{{index+1}}{{item}}省
</li>
<li v-for="(item,index) in objects">
{{index+1}}{{item.name}}{{item.age}}
</li>
data:{
array:['陕西','山西','河南'],
objects:[
{name:'admin',age:23},
{name:'jim',age:22}
]
}
Vue生命周期
生命周期图示
vue对象的生命周期钩子函数,在生命周期的每个阶段提供一个函数,供我们执行某些需要的操作
beforeCreate(){}
vue对象创建之前
created(){}vue
对象创建完成
beforeMount(){}
vue对象与标签绑定之前
mounted(){}
vue对象与标签绑定之后
mounted是常用的,当vue对象创建成功,与标签绑定成功后执行我们想要的操作
类似于之前的onload事件