Vue.js实战读书笔记--内置指令
5.1 基本指令
5.1.1 v-cloak
v-cloak不需要表达式，会在Vue实例结束编译时从绑定的html标签上移除，经常和display:none配合使用。当网速较慢、Vue.js还没加载完时，页面会出现闪动的情况，通过该指令即可解决。在一般情况下，该指令是解决初始化慢的最佳实践。
{{massage}}
[v-cloak]{
display:none;
}
5.1.2 v-once
v-once是个不需要表达式的指令，作用是定义它的元素和组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化而重新渲染，将视为静态内容。
5.2 条件渲染指令
5.2.1 v-if、v-else-if、v-else
v-else-if要紧跟v-if、v-else要紧跟v-else-if或v-if，表达式为真时，当前元素或组件被渲染，为假时被移除。如果一次判断的是多个元素时，可以在Vue.js内置的元素上使用指令，最终渲染的结果不会包含该元素。
Vue在渲染元素时出于效率的考虑，可以将一些元素复用，但是往往会出现问题，当操作这些元素时，会出现值并没有初始化，这时可以使用Vue提供的key属性，他可以让你决定是否要服用元素，key值必须是唯一的。
5.2.2 v-show
v-show和v-if的用法基本上一致，只不过v-show改变的是元素css的display属性值，当v-show为false时，元素会隐藏，但是页面上可以看出元素上是添加了内联样式display：none。V-if为false时，可以观察到对应元素节点都不会加载到页面，这是两者的区别。
注意：v-show不能够在上使用。
5.2.3 v-if与v-show的选择
v-if与v-show有相似的功能，v-if是真正的条件渲染，会根据表达式决定是否绑定事件或者元素。如果初始值为false时，则该元素一开始就不会渲染，只有当条件为真的才会编译。v-show操作的是元素的内联样式的display属性，不管表达式是否为真，该标签都会编译。V-if适用于条件不经常改变的场景，v-show适用频繁切换条件。
5.3 列表渲染指令v-for
5.3.1 基本用法
当需要将一个数组或者对象遍历时，可以使用v-for，表达式可以结合in使用。列表渲染时也支持of代替in作为分隔符使用。分隔符in前的语句使用括号，第二项就是books当前项的索引。
- {{book.name}}
与v-if一样，也可以在上将多个元素渲染。除了数组外，对象属性也是可以遍历的，例如：
{{value}}
渲染后结果为：
liu女18
遍历对象属性时，有两个可选属性，分别是键名和索引。
-
{{index}} - {{key}}:{{value}}
5.3.2 数据更新
Vue包含了一组观察数组变异的方法，使用这些改变数组视图也会随之改变。
Push()
Pop()
Shift()
Unshift()
Splice()
Sort()
Reverse()
以上方法会改变原始数组，有些方法则不会改变原数组。例如： Filter()、Concat()、Slice()
需要注意的是，以下变动的数组中，Vue是不会检测到的，不会触发视图更新。
- 通过索引直接设置项，比如app.books[3]={…};
- 修改数组长度，比如app.books.length = 1.
解决第一个问题可以用两种方法实现，第一种是用Vue的set方法：
Vue.set(app.books,3,{
name:'《css》',
author:'lea'
});如果是在webpack中使用组件化的方式，默认是没有导入Vue的，这时可以使用$set，例如：
this.$set(app.books,3,{
name:'《css》',
author:'lea'
});//this指向的是当前的组件实例，即，app.在非webpack模式下也可以用$set方法，例如，app.$set(...)
另一种方法：
app.books.splice(3,1,{
name:'《css》',
author:'lea'
});第二个问题也可以用splice解决:
app.books.splice(1);
5.3.3 过滤与排序
当不想改变原数组数据时，可以通过该数组的副本进行过滤或排序处理，使用计算属性可以返回处理后的数据。
- 书名：{{book.name}}
- 作者：{{book.author}}
上述做了过滤处理，计算属性filterBooks依赖books，但不会修改books。排序功能也是一样。
computed:{
sortedBooks:function(){
return this.books.sort(function(a,b){
return a.name.length注意：vue.js 2.X中废弃了1.X中内置的limitBy，filterBy和orderBy过滤器，统一用计算属性实现。
5.4 方法与事件
5.4.1 基本用法
@click等同于v-on:click，是一个语法糖。在method中定义方法可以供@click调用，@click后面的方法可以不跟括号（）。如果该方法有参数，默认会将原生事件对象event传入。Vue提供了一个特殊变量$event，用于访问原生Dom事件，例如可以阻止链接打开。
5.4.2 修饰符
上述中的event.preventDefaulit()可以使用修饰符实现，在@绑定的事件后加小圆点“.”，再跟一个后缀使用修饰符。Vue支持以下修饰符：
.stop .prevent .capture .self .once
具体用法：
...
...
...
也可以自定义按键
Vue.config.keyCodes.f1 = 112;//全局定义后，就可以使用@keyCodes.f1
除了具体的某个keyCode外，Vue还提供了快捷名称，以下是全部别名：
.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right
这些按键可以组合使用。