Vue.directive指令说明（自定义指令）

英文directive是指令的意思。vue.directive是表示自定义指令。可以在html页面上定义，也可以全局定义或者局部定义。

如果同时传递名称字符串和指令定义，则注册全局自定义指令，如果仅传递名称，则检索已注册的指令。

全局定义

Vue.directive('hello', {
    inserted(el) {
        console.log(el);
    }
})

定义的每个指令都含有三个参数

el ：指令所绑定的元素，可以用来直接操作DOM
binding ：一个对象，包含指令的很多信息
vnode ：VUE编译生成的虚拟节点

指令的生命周期

bind()：当元素只用当前指令的时候会被调用，只会调用一次，用来做初始化

inserted()：当使用指令的元素被插入到父节点（#app）的时候会被触发

update()：只要当前元素不被移除，其他操作几乎都会触发这2个生命周期，先触发update后触发componentUpdate。虚拟DOM什么时候更新：只要涉及到元素的隐藏、显示（display）值的改变、内容的改变等都会触发虚拟DOM更新

componentUpdate()：组件更新

unbind()：当使用指令的元素被卸载的时候会执行，就是当前元素被移除的时候

实例应用

如自定义添加防抖

Vue.directive('debounce', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled')
      el.disabled = true
      setTimeout(() => {
        el.disabled = false
        el.classList.remove('is-disabled')
      }, 1000) // 1秒
    })
  }
})