内置指令
v-text、v-html
v-text
更新元素的 textContent。注意啊，不是 innerText。
我更推荐使用插值的方式，如果要更新部分的 textContent，显然要使用 {{ Mustache }} 插值。
<span v-text="msg"></span> <!-- 等价于 --> <span>{{msg}}</span>
v-html
更新元素的 innerHTML。
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果你这么想了，那么你应该学习一下如何使用组件模式开发。
举个例子啊，你插入的内容并不会拥有 scoped 的样式，同样如果有 v-if 之类的也是无用的。
这个指令我不建议你使用，因为 XSS 的风险太大了
<div v-html="html"></div>
v-show、v-if、v-else、v-else-if
v-show
通过控制 style 的 display 来实现显示和隐藏。（可以理解在还在DOM 树中）
<div> <span v-show="level<10">小菜鸟</span> <span v-show="level<20 && level >= 10">大菜鸟</span> <span v-show="level >= 20">老鸟</span> </div>
v-if、v-else、v-else-if
通过创建和销毁来控制显示和隐藏。（可以理解为不存在于DOM树且已释放）
<div> <span v-if="level<10">小菜鸟</span> <span v-else-if="level<20">大菜鸟</span> <span v-else>老鸟</span> </div>
v-for
源于遍历渲染数据。可以遍历 数值、数组、对象。
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div>
v-on
用于绑定事件。缩写为 @
<!-- 方法处理器 --> <button @click="handle">btn</button> <button v-on:click="handle">btn</button> <!-- 内联语句 --> <button v-on:click="handle('hello', $event)"></button> <!-- 动态事件 (2.6.0+) --> <button @[event]="handle"></button> <button v-on:[event]="handle"></button> <!-- 停止冒泡 --> <button @click.stop="handle"></button> <!-- 阻止默认行为 --> <button @click.prevent="handle"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="handle"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="handle"> <!-- 键修饰符，键代码 --> <input @keyup.13="handle"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="handle"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: handle, mouseup: handle }"></button>
v-bind
设置 attribute、property、组件props。缩写是 :。
在设置 class 或 style 时，支持数组、对象、字符串
<!-- 绑定一个 attribute --> <img v-bind:src="imageSrc"> <!-- 动态 attribute 名 (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- 缩写 --> <img :src="imageSrc"> <!-- 动态 attribute 名缩写 (2.6.0+) --> <button :[key]="value"></button> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个全是 attribute 的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM attribute --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
v-model
数据双向绑定。可以理解为语法糖（:value@input），针对不同的元素有不同的处理
原生DOM input、textarea、select
用 input 举例，可以理解为下面两个是一样的。（其实不一样，比如输入法情况）
<input v-model="val"> <!-- 解开语法糖 --> <input :value="val" @input="val = $event.target.value">
自定义组件 component
<v-input v-model="val"> <!-- 解开语法糖 --> <v-input :value="val" @input="val = $event">
v-slot
具名的插槽或需要接收 prop 的插槽。缩写为 #。
<!-- 具名插槽 --> <base-layout> <template v-slot:header> Header content </template> Default slot content <template #footer> Footer content </template> </base-layout> <!-- 接收 prop 的具名插槽 --> <infinite-scroll> <template v-slot:item="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </infinite-scroll> <!-- 接收 prop 的默认插槽，使用了解构 --> <mouse-position v-slot="{ x, y }"> Mouse position: {{ x }}, {{ y }} </mouse-position>
v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak
隐藏未编译的 Mustache 标签直到实例准备完毕。
原理就是这个指令保持在元素上直到关联实例结束编译，和 CSS 规则 [v-cloak] { display: none } 一起搭配使用。
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
自定义指令
一般来说 Vue2.0 中，代码复用和抽象的主要还是组件化开发。
组件化开发我们不关心 DOM，只关心组件的声明周期（created、mounted 等钩子函数）。
如果说我们需要关心 DOM，那么我们可以使用自定义指令。
注册指令
全局注册
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
局部注册
{ data(){}, ..., directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } }
钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
钩子函数的入参
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括v-前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。
arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset （data-*）来进行。
