1、基本指令
v-cloak
作用：解决初始化慢导致页面闪动的问题
会在vue实例编译结束之后才渲染添加了该指令的元素
例：
<p v-cloak> {{ mag }}</p>
一般和display结合使用
[v-cloak]{
display:none;
}
v-once
作用：定义了 v-once 的元素或组件只会渲染一次，后续无论如何修改值都不会重新渲染
<p v-once>{{ msg }}</p>
2、条件渲染指令
v-if 、v-else-if、v-else
v-if 后接 = ， = 号后面必须是布尔值
例：
<p v-if="3 > 1"> {{ msg }} </p> //v-if为 true 时显示
<p v-else-if="9 > 6"> {{ msg2 }} </p>//v-if为 false 时显示
<p v-else> {{ msg3 }} </p> //v-if 和 v-else-if 都为 false时显示
v-if 的弊端：
Vue 在渲染时，出于效率考虑，会尽可能地复用已有的元素，而非重新渲染，只会渲染变化了的元素，有时可能会造成一些不想要的效果。 例如使用 v-if 和 v-else 来实现 input 框切换效果时，input 框就会被复用，导致切换之后的input中的内容跟切换之前一样。
<div id="app">
<div v-if="type==='name'">
用户名：<input type="text" placeholder="请输入用户名">
</div>
<div v-else>
密码：<input type="text" placeholder="请输入密码">
</div>
<button @click="toggleType">点击切换</button>
</div>
解决办法 ：
对不想让其复用的元素加入 key 即可，key 必须是唯一的，可自定义key
<div id="app">
<div v-if="type==='name'">
用户名：<input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-else>
密码：<input type="text" placeholder="请输入密码" key="psd">
</div>
<button @click="toggleType">点击切换</button>
</div>
v-show
以布尔值来控制元素的显示和隐藏
<p v-show="9 > 3"> v-show </p> //显示
<p v-show="3 > 9"> v-show </p> //隐藏
v-show 只是改变了元素的 display属性，使用 display:none 来达到隐藏元素的效果
v-if 和 v-show 的比较
v-if ：实时渲染，需要在页面中显示时就渲染，不需要在页面中显示时就移除（完全移除，不会出现在 DOM 结构中）
v-show ：v-show 的元素永远存在于页面中，只是改变了 display 属性。
3、列表渲染指令 v-for
用法： 当需要将一个数组遍历或枚举一个对象属性循环显示时，就会用到列表渲染指令 v-for。
一般有两种使用场景：
1、遍历多个对象，遍历多个对象时，多个对象一定是在一个数组中。
写法： item in items
item: 自定义的变量
in ：固定语法
items : data 中自定义的数组
<ul>
<li v-for="Methods in vueMethods">{{ Methods.name }}</li>
</ul>
带索引的写法：用括号包裹，第一个变量代表 item ，第二个变量代表索引
<ul>
<li v-for="(Methods,index) in vueMethods">{{index}}---{{ Methods.name }}</li>
</ul>
data: {
vueMethods: [
{ name: '多练习' },
{ name: '多思考' },
{ name: '多查阅' }
]
}
//0---多练习
//1---多思考
//2---多查阅
2、遍历一个对象的多个属性
<div v-for="(value,key,index) in goddess">{{index}}--{{key}}--{{value}}</div>
data: {
goddess: {
name: '林青霞',
age: 18,
height: '170cm',
weight: '45kg'
}
}
//0--name--林青霞
//1--age--18
//2--height--170cm
//3--weight--45kg
数组的更新、过滤、排序
改变数组的一系列方法：
都会影响视图的渲染，只要改变数组，视图就会重新渲染
- push() :往数组的末尾添加一个元素，返回值是添加元素后的数组长度
- pop()：将数组的最后一个元素移除，返回值是被移除的元素
- shift()：将数组的第一个元素移除，返回值是被移除的元素
- unshift()：往数组开头位置添加一个元素，返回值是添加元素后的数组长度
- splice()：往数组中添加元素，或删除数组中的元素,返回值是被删除的元素
三个参数：
第一个参数表示开始操作的位置，从 0 开始
第二个参数表示要要做的元素的长度，从 0 开始
第三个参数为可选参数，第三个参数会添加的数组中 - sort() : 对数组进行排序，参数是一个函数，定义排序的规则
<div v-for="(item,index) in arr">{{index}}--{{item}}</div>
<button @click="arrSort">点击排序</button>
data:{
arr: ['book', 'pen', 'pencil', 'ruler']
},
methods:{
arrSort(){
this.arr.sort(function(a,b){
//从小到大排序
return a.length - b.length
})
}
}
//排序前：
//0--book
//1--pen
//2--pencil
//3--ruler
//排序后：
//0--pen
//1--book
//2--ruler
//3--pencil
- reverse() ：反转数组
两个数组变动 vue 检测不到：
1、改变数组的指定项
2、改变数组的长度
//改变数组的指定项
changeOne() {
this.arr[0] = 'car'
},
//改变数组的长度
changeArrLength() {
this.arr.length = 1
}
都不会有效果
解决方法：
//1、改变数组的指定项
changeOne() {
Vue.set(this.arr, 1, 'car')
}
vue 提供了一个 set 方法，可以用于修改数组的指定项：
Vue.set(this.arr, 1, 'car')
第一个参数： 要改变的数组
第二个参数： 要改变的项在该数组中的下标
第三个参数： 要修改为什么值
大写的 Vue 为一个全局变量，只要引入了 vue.js 就有一个 Vue 全局变量
//2、改变数组的长度，
changeArrLength() {
this.arr.splice(2)
}
arr.splice(2) : 表示将数组的长度改为 2
从数组中下标为2的元素开始，删除所有的元素，剩下的数组长度就为2
数组的过滤：
<div id = "app">
包含'oo'的那一项是：{{ matchOO }}
// pen,pencil
</div>
data:{
arr: ['book', 'pen', 'pencil', 'ruler']
},
computed: {
matchOO() {
return this.arr.filter(function (arr) {
//参数 arr 就是要进行过滤的数组中的所有元素
return arr.match(/pe/) //正则表达式，表示带有 pe 的元素
})
}
}
使用数组的 filter 方法对数组进行过滤
方法与事件
如果 methods 中定义的方法需要传入参数，那么在实例中绑定事件时就需要在事件名后加括号
例如：
<button @click="addOne()">点我加1</button>
methods:{
addOne(count) {
count = count || 1
this.count += count
}
}
如果没有加括号，那就会默认传入原生事件对象 event
