Vue：自定义指令

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

1、所有已有的vue指令如下：

已有的vue指令

v-text	v-if	v-for	v-model	v-once
v-html	v-else	v-on	v-pre
v-show	v-else-if	v-bind	v-cloak

2、自定义全局指令的语法： 

// 注册一个全局自定义指令，例如'v-focus'
Vue.directive('指令名称', 钩子)

其中钩子里面传一个参数，对参数做一些处理动作（一般这个动作是操作DOM）。
举个聚焦输入框的例子，如下：

<template>
  <div id="app">
    <input
      v-focus
    >
  </div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default ({
  data: function () {
    return {
    }
  }
})

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

  inserted: function (el) {
    el.focus() // 聚焦元素
  }
})
</script>

<style>
</style>

3、自定义局部指令的语法：

局部注册指令，则只需要在export default({....})组件中，接受一个 directives 的选项，在里面注册即可。

修改上面的例子为局部注册：

<template>
  <div id="app">
    <input
      v-focus
    >
  </div>
</template>
<script type="text/javascript">
export default ({
  data: function () {
    return {
    }
  },
  // 局部注册自定义指令
  directives: {
    focus: {
      // 指令的定义
      // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
      inserted: function (el) {
        el.focus()
      }
    }
  }
})
</script>

<style>
</style>

4、几种钩子函数：

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

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

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

* update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但     是你可以通过比较更新前后的值来忽略不必要的模板更新；

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

5、钩子函数的参数：

* el：指令所绑定的元素，可以用来直接操作 DOM ；

* binding：一个对象，包含以下属性：

    * 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 编译生成的虚拟节点。移步 VNode API 来了解更多详情；

* oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。