框架
什么是框架
盖高楼大厦，框架结构
框架结构就是大厦主体，基本功能
把很多基础功能已经实现（封装了）
框架：在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率
举例：操作网页
现在：点击一个按钮 触发事件，获取要操作的标签，在对标签内容进行操作
框架：操作网页时，程序员只关注要操作的内容即可，对标签内容的更新等操作，都由框架完成
前端框架
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事件