VUE
vue
一 关于库和框架
库：一堆方法的集合
框架：是针对某类业务提供整套的解决方案，并且定义好了一套的规范，开发者必须按照规范去使用
二 MVVM
vue是mvvm框架
View（视图模型）-DOM
ViewModel（同步Model和View的对象）-监听
Model（数据模型）-对象
三 vue使用
1 引入vue.js文件
2 在script里面创建vue实例，这个实力会监管html代码
3 通过el属性指向vie实例监管的范围，el的值通常是一个id
4 通过data属性去保存页面需要用到的数据
5 通过{{}}将data中的数据取出来，展示在页面上
注意：在vue实例监管范围以外的部分没有效果
<script src = './vue.js'></script>
<div id='app'>{{mymsg}}</div>
<script>
let vm = new vue({
el:'#app',
data:{
mymsg:"hello wolrd"
}
})
</script>
四 插值表达式
1 插值表达式的作用是用来获取data中的数据的值
使用的位置标签的innerHTML位置
<p>{{name}}</p>
2 插值表达式的合法用法有：字符串拼接、数值运算、三元表达式、函数
注意：虽然if else语句等于三元运算符，但是它不能在插值中使用
<h1>{{name}}</h1>
<p>{{age+1}}</p>
<p>{{age>=18?'已成年':'未成年'}}</p>
<p>{{name.split('')}}</P>
关于函数，在自定义函数的时候，必须return数据的结果
五 关于vue的一些常用指令
1 v-text 指令和插值表达式一样
注意：只要是v-开头的，都是vue中的指令
v-text的作用和差值表达式{{}}是一样的，都是用来展示data数据到视图的
<h1 v-text="name"></h1>
v-text和插值表达式的区别：
v-text写在标签属性位置。{{}}写在标签innerHTML位置
注意：开发的时候用{{}}插值表达式
2 v-html指令 解析带特殊符号的文本
<div v-html='info'></div>
info:'<p>我是谁</P>'
v-html可以解析带特殊标签的文本，但是需要注意，这个指令不太安全
3 V-bind 绑定动态属性
v-bind是用来动态绑定属性用的，它绑定的属性是任意的
使用方法：在标签属性位置 v-bind：属性名=“data中的变量”
简写（开发用）在标签属性位置 ：属性名=“data中的变量”
<img v-bind:src = "avatar" alt="">
avatar:'./img/0.jpg'
任意属性：后面学的组件，可以用这种方式来进行组件传值
<p :myname="name">测试任意属性</P>
<a :href="`del.html?id=${id}`"
注意：v-bind在动态绑定class的时候很特殊，使用对象语法，对象的key作为类名，对象的值是布尔值，为true表示有这个类，反之没有这个类
.redfont {
color:red;
}
<p :class="{redfont:age<18}">测试红色字体</P>
age：18
4 v-model 双向绑定
v-model的作用：用来实现双向数据绑定，它只能给input、select、texttarea、组件使用
双向数据绑定就是视图模型view和数据模型model的数据进行同步变化：你变，我变，我变了，你也变
<input type=''text' v-model='name'>
5 v-for 循环
可以用来渲染数组，以及对象,它会根据data中数据的变化自动刷新view
注意：以下两种情况并不会触发视图的更新
1 使用数组的length属性操作数组时
2 使用数组的索引去操作数组的时候
解决上述问题：两种方式：
1 使用全局方法 Vue.set(需要设置的数组，索引，新值)
Vue.set(vm.students,0,{name:'jack',age:19}) //更改数据
2 使用数组的splice()方法
vm.students.splice(0,1) //删除数据
注意：使用v-for指令时，必须和key属性结合使用，key属性可以唯一表示数组中的每一项，它的值不能重复必须唯一，它的作用是用来提高效率的
<li v-for="(item,index) in students" :key="index">{{item.name}}:{{item.age}}:索引是{{index}}</li>
A 渲染数组
1 在变迁属性位置 v-for="item in Arr" item是形参，表示数组中的每一项；Arr表示需要遍历的数组
2 在标签属性位置 v-for="(item,index) in Arr" index表示的是索引，常用
例：
<ul>
<li v-for="item in students">{{item.name}}:{{item.age}}</li>
</ul>
students:[
{{name:'li',age:14}},
{{name:'li1',age:14}},
{{name:'li2',age:14}}
]
例2：常用
<ul>
<li v-for="(item,index) in students">{{item.name}}:{{item.age}}:索引是{{index}}</li>
</ul>
students:[
{{name:'li',age:14}},
{{name:'li1',age:14}},
{{name:'li2',age:14}}
]
B 渲染对象
1 在标签属性位置 v-for="val in obj" val 表示对象里面的键值，obj表示的是需要遍历的对象
2 在标签属性位置 v-for="(val,key,index) in obj" val 表示对象里面的键值，obj表示的是需要遍历的对象 index表示键对应的索引
例：
<ul>
<li v-for="val in teacher">{{val}}</li>
</ul>
teacher:{
name:'li',
age:19
}
例2：
<ul>
<li v-for="(val,key,index) in teacher">{{key}}:{{val}}--{{index}}</li>
</ul>
teacher:{
name:'li',
age:19
}
6 v-on 指令，用于监听事件
事件可以是内置事件：如：click，keydow，keyup；也可以是自定义事件
在methods中，获取data中的数据，需要加this
用法：
1 在标签属性位置写上 v-on：事件类型=“函数”
2 简写 @事件类型=“函数” 常用
3 直接在执行函数中传递参数就行了
4 获取事件对象通过$event这个变量获取，注意不能给他加引号
5 事件修饰符，它的作用是增强事件的功能，常用的有 .prevent阻止默认行为 .stop阻止冒泡
6 按键修饰符，它的作用是限定按键(keydown,keyup)事件 通过keycode .13 常用的是 .enter
<h1>name</h1>
<button v-on:click="changeName">点击改变name</button>
<button @click="changeName">点击改变name（简写）</button> //简写
<button @click="changeNameByArg('传参')">点击改变name（传参）</button> //传参
<button @click="getEvent($event)">点击获取事件对象</button> //简写
<a href="http://www.baidu.com" @click.prevent="preventJump">跳转百度</a>
<input type='text' v-model='name' @keydown.13="gotologin"/>
//定义的函数在methods里面
methods:{
changeName(){
//改变name的值 this 就是vm实例
this.name ='heima'
}，
//传递参数
changeNameByArg(newName){
this.name = newName
},
//打印事件对象
getEvent(e){
console.log(e)
},
//修饰符
preventJump(){
console.log('阻止跳转')
}
//按键修饰
gotologin(){
console.log('打印enter键')
}
}
7 v-if和v-show 指令 控制元素的显示与隐藏
v-if和v-show都可以用来控制元素的显示与隐藏，后面跟一个布尔值就行，为true就是表示显示，为false就是表示隐藏
v-if是通过直接操作dom来控制
v-show是通过样式，display:none来控制的
使用场景的区别：
1 涉及到大量dom元素的显示与隐藏的时候没需要用v-show
2 涉及到异步数据渲染的时候，用v-if好一点
8 v-if 和 v-else-if和v-else 判断
与if判断一样
例：
<li v-if='type==="A"'>优秀</li>
<li v-else-if='type==="B"'>良好</li>
<li v-else>差</li>
9 v-cloack 解决表达式闪烁问题
v-cloack 解决表达式闪烁问题，但是必须和css结合使用
1 给闪烁的标签上加上v-cloack指令
2 利用属性选择器隐藏掉该元素
3 当vue实例挂载完成之后它会将这个v-cloack指令（属性）移除掉
例：
<style>
[v-cloack]{
display:none;
}
</style>
<p v-cloack>{{msg}}</p>