Vue.js实战——内置指令

1. 基本指令
   1.1 v-cloak
   v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none；配合使用：

<div id="app" v-cloak>
	 {{message}}
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: '这是一段文本'
			}
     	})
 </script>

这时虽然已经加了指令v-cloak，但起始并没有起到任何作用，当网速较慢、Vue.js文件还没加载完成时，在页面上会显示{{message}}的字样，知道Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕是有闪动的。只要加一句CSS就可以解决这个问题了：

[v-cloak] {
	display: none;
}

一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由取挂载不同的组件完成的，所以不再需要v-vloak。
1.2 v-once
v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有字节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

2. 列表渲染指令v-for
   2.1 基本用法
   当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。它的表达式需结合in来使用，类似item in item的形式。
   2.2 数组更新
   Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

使用以上方法会改编被这些方法调用的原始数组，有些方法不会改变原数组，例如：

filter()
concat()
slice()

它们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组。

2.3 过滤与排序
当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。

3. 方法与事件
   3.1 基本用法
   Vue提供了一个特殊变量$event，用于访问原生DOM事件，例如下面的实例可以阻止链接打开：

<div id="app">
        	<a href="http://www.apple.com" @click="handleClick('禁止打开', $event)">打开链接</a>
 </div>
 <script>
   	var app = new Vue({
   		el: '#app',
   		methods: {
   			handleClick: function(message, event) {
   				event.preventDefault();
   				window.alert(message);
   			}
   		}
   	})
</script>

3.2 修饰符
在上例使用的event.preventDefault()也可以用Vue事件的修饰符来实现，在@绑定的事件后加小圆点"."，再跟一个后缀来使用修饰符。Vue支持以下修饰符：

.stop
.prevent
.capture
.self
.once

具体用法如下：

<!--阻止单体事件冒泡-->
<a @click.stop="handle"></a>
<!--提交事件不再重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符可以串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent></form>
<!--添加事件侦听器时使用事件捕获模式-->
<div @click.capture="handle">...</div>
<!--只当事件在该元素本身(而不是子元素)触发时回调-->
<div @click.self="handle">...</div>
<!--只触发一次，组件同样适用-->
<div @click.once="handle">...</div>

在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

<!--只有在keyCode是13时调用vm.submit()-->
<input @keyup.13="submit">

也可以自己配置具体按键：

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

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

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

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

.ctrl
.alt
.shift
.meta(Mac下是Command键,Windows下是窗口键)

例如：

<!--Shift + S-->
<input @keyup.shift.83="handleSave">
<!--Ctrl + Click-->
<div @click.ctrl="handle"></div>