Vue自定义指令除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。当我们需

指令	作用
v-show	根据表达式的真假值来显示和隐藏元素
v-html	插入标签
v-text	在元素中插入值
v-if和v-else	根据表达式的真价值来显示为何隐藏元素
v-for	根据变量的值来循环渲染元素
v-bind	绑定元素的属性并执行相应的操作
v-on	监听元素事件并执行相应操作
v-model	把input的值和变量绑定了，实现了数据和视图的双向绑定
v-once	可以让元素或者组件只渲染一次。一旦绑定数据就不会改变
v-pre	用于跳过这个元素和它的子元素的编译过程。对于大量没有指令的节点使用v-pre指令可以加快编译速度
v-cloak	可以解决初始化慢而导致页面闪动的问题。

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。当我们需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。例如：输入框获取焦点：

/ 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

<input v-focus>

名称	描述
bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted	被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update	所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind	只调用一次，指令与元素解绑时调用。==【注意】== 解绑可以使用v-if。社区讨论

高亮的字段，我们日常开发中经常使用到的。

名称	描述
==el==	指令所绑定的元素，可以用来直接操作 DOM。
binding	一个对象，包含以下六个属性
name	指令名，不包括 `v-` 前缀。
==value==	指令的绑定值，例如：`v-my-directive="1 + 1"` 中，绑定值为 `2`。
oldValue
expression	字符串形式的指令表达式。例如 `v-my-directive="1 + 1"` 中，表达式为 `"1 + 1"`。
arg
modifiers	传给指令的参数，可选。例如 `v-my-directive:foo` 中，参数为 `"foo"`。
vnode
oldVnode

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})