基本指令
v-cloak
解决初始化慢导致页面闪动，一般与 display: none; 结合使用。
v-once
定义它的元素和组件只渲染一次。
条件渲染指令
v-if
v-if 后面接的是等号，等号后的内容必须是布尔值。
v-else
v-else-if
Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，解决方法：对不想让其复用的标签或元素加上唯一的 key
<div v-if="type === 'name'">
用户名：<input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-else>
邮箱：<input type="text" placeholder="请输入邮箱" key="email">
</div>
v-show
v-show 后面接的是等号，等号后的内容必须是布尔值。
v-if 和 v-show 的比较
v-if 实时渲染，页面需要显示就渲染，不需要就移除。
v-show 元素只渲染一次，永远存在于页面中，只是改变了其 display 属性为 display: none; 。当需要频繁切换页面时，使用 v-show 。
v-for
写在要遍历的元素上。
(1) 遍历（数组中的）多个对象：
<ul>
<li v-for="item in arr">{{item.name}}</li>
</ul>
带索引的写法：
<ul>
<li v-for="(item, index) in arr">{{index}}------{{item.name}}</li>
</ul>
(2) 遍历一个对象的多个属性：
<span v-for="value in obj">{{value}}</span>
带索引的写法：
<span v-for="(value, key, index) in obj">{{index}}---{{key}}---{{value}}</span>
数组更新
改变数组的一系列方法：
- push()
在数组末尾添加元素，返回添加元素后的数组长度。 - pop()
删除数组最后一个元素，返回该元素。 - shift()
删除数组的第一个元素， 返回该元素。 - unshift()
在数组的头部添加元素，返回添加元素后的数组长度。 - splice()
可以添加或者删除元素，返回删除的元素组成的数组。
arr.splice(start, count, addElement1, addElement2, ...);第一个参数表示开始的位置，第二个参数表示删除元素的个数，第三个及更多的参数表示要被插入数组的元素。
如果只提供第一个参数，等同于将元素组在指定位置拆分成两个数组。
var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]
- reverse()
颠倒数组。 - sort()
排序数组，默认为字典顺序，可传入函数作为参数自定义排序方式。
[1101, 10111, 111].sort()
// [10111, 1101, 111]
[1101, 10111, 111].sort(function (a, b) {
return a - b;
})
// [111, 1101, 10111]
两个数组变动 Vue 检查不到：
- 改变数组的指定项
app.arr[1] = 'car'这样写无效。
解决方法：使用 Vue 提供的 set 方法，Vue.set(app.arr, 1, 'car') - 改变数组的长度
app.arr.length = 1这样写无效。
解决方法： 使用 splice 方法，app.arr.splice(1)
方法和事件
v-on 绑定的事件类似于原生的 onclick 等写法。
如果方法中有参数，而你绑定事件时没写括号，会默认传入原生事件对象 event 。
修饰符
-
.stop：阻止事件冒泡 -
.prevent：阻止默认事件 -
.self：只是作用于元素本身而不是子元素时调用 -
.once： 事件只触发一次
按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">
