说起vue指令，我们经常用的v-if，v-show，v-for，v-bind.....，不过这些都是尤大大提前注册好的，我们才用起来那么方便快捷，类似扩展jquery，原生js给对象追加方法，vue的指令也是可以自定义注册的。

Vue.directive注册自定义指令-QUI-Notes

Vue.directive

vue注册自定义指令是通过Vue.directive实现，组件里面用directives: { } 实现自定义指令注册。

官方教程：https://cn.vuejs.org/v2/guide/custom-directive.html

官方提供了一个 页面输入框自动对焦的 注册指令案例：

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

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

html使用指令

<input v-focus>

我们刷新一看 ，看效果如下：

Vue.directive注册自定义指令-QUI-Notes

自定义指令钩子函数

  • bind：只调用一次，指令第一次绑定到元素时调用
  • inserted：被绑定元素插入父节点时调用 
  • update：所在组件的 VNode 更新时调用
  • unbind：只调用一次，指令与元素解绑时调用
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

钩子函数参数

  1. el：指令所绑定的元素，可以用来直接操作 DOM。
  2. 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 }。

  1. vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  2. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

举例：

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

函数可以简写
注意：在 bind 和 update 时触发相同行为，而不关心其它的钩子的时候 可以简写！！！

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

文章内容，摘自vue.js中文教程《自定义指令》- https://cn.vuejs.org/v2/guide/custom-directive.html