指令Directive

类型：Object；包含 Vue 实例可用指令的哈希表。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

示例：

<p v-if="seen">现在你看到我了</p>
//  用于响应式地更新 HTML 
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
//  动态参数
<a @[eventName]="doSomething"> ... </a>

自定义指令

自制一个指令 v-y 点击元素就打印出 y

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

如果想注册局部指令，组件中也接受一个 directives 的选项

directives: {
  y: {
    // 指令的定义
    inserted: function () {
      console.log('y')
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-y property，如下：

<h1 v-y> hi </h1>

·钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。