Vue 自定义指令

除了内置指令，Vue也可以自定义指令，通过Vue.directive定义：

Vue.directive('focus', {
	// 插入父节点时候调用
  inserted:function(el) {
    el.focus()
  }
  // 其余钩子
  // bind：只调用一次，指令绑定元素时调用，可用于初始化
  // unbind: 只调用一次，指令解绑元素时调用
  // update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
  // componentUpdate：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
})


let vm = new Vue({
  el: document.querySelector('#id'),
  template: `
    <div>
      <input v-focus></input>
    </div>
  `
})

钩子函数的参数：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：指令一些信息包括：
name：名称，
value：绑定值（v-xxx=“value”），
arg：绑定参数(v-xxx:arg)，
modifiers：修饰符，
vnode：虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用