Vue.js实战第五章笔记

5.1基金指令
5.1.1v-cloak
在 Vue 实例结束编译时从绑定的 HTML 元素上移除， 经常和 css 的 display:none；配合使用：

{{message}}

[v-cloak]{display:none} 在一般情况下， v-cloak 是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实 用，但是在具有工程化的项目里，比如后面进阶篇将介绍 webpack 和 vue-router 时，项目的 HTML 结构只有一个空的 div 元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要 v-cloak. 5.1.2v-once 作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

5.2条件渲染指令
5.2.1v-if、v-else-if、v-else
相当于 if(){}else if(){} else(){}
5.2.2v-show
只不过 v-show 是改变元素的 css 属性 display
5.2.3v-if与v-show的选择
v-if和 v-show 具有类似的功能，不过 v-if 才是真正的条件渲染，它会根据表达式适当地销毁 或重建元素及绑定的事件或子组件。若表达式初始值为 false，则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。

5.3列表渲染指令v-for
5.3.1基本用法
v-for=“obj in data”
v-for=“obj of data”
v-for="(obj,i) in data"//i是索引

对象的属性也能遍历

{{obj}}

data:{ user:{ name:'area', gender:'男'， age:26 } } 渲染后的结果：

area

男

26

有两个可选参数，分别是键值和索引

{{index}}-{{key}}:{{obj}}

//key是键值

5.3.2数组更新
Vue 包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：
• push()
• pop()
• shift()
• unshift（）
• splice()
• sort（）
• reverse()
使用以上方法会改变被这些方法调用的原始数组,有些方法不会改变原数组，例如：
• filter()
• concat()
• slice()
5.3.3过滤与排序
当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性 来返回过滤或排序后的数组，

5.4方法与事件
5.4.1基本用法
@click=“handleAdd(10)”
data:{
counter:0
}
methods:{
handleAdd:function(count){
count =count || 1
this.counter+=count
}
}
Vue 提供了一个特殊变量$event，用于访问原生 DOM 事件

5.4.2修饰符
上述中的event.preventDefaulit()可以使用修饰符实现，在@绑定的事件后加小圆点“.”，再跟一个后缀使用修饰符。Vue支持以下修饰符：

.stop .prevent .capture .self .once

具体用法：

<a @click.stop=“handle”>

Vue.config.keyCodes.f1 = 112;//全局定义后，就可以使用@keyCodes.f1

除了具体的某个keyCode外，Vue还提供了快捷名称，以下是全部别名：

.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right

这些按键可以组合使用。