Vue-自定义指令

自定义属性

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

　　在Vue里，代码复用的主要形式和抽象是组件。

　　然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令 。

　　以一个input元素自动获得焦点为例，当页面加载时，使用autofocuse可以让元素将获得焦点 ，但是autofocuse在移动版Safari上不工作，现在注册一个使元素自动获取焦点的指令。

　　指令注册类似于组件注册，包括全局指令和局部指令两种。

1）全局指令

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

2）局部指令

var vm = new Vue({
  el: '#app',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }
})

3）钩子函数

指令定义函数提供了几个钩子函数（可选） 。

【bind】

　　只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

【inserted】

　　被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

【update】

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

【componentUpdated】

　　所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

【unbind】

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

注意区别：

bind与inserted：bind时父节点为null，inserted时父节点存在；

update与componentUpdated：update是数据更新前，componentUpdated是数据更新后。

4）钩子函数参数

【el】

　　指令所绑定的元素，可以用来直接操作 DOM。

【binding】

　　一个对象，包含指令名称及该指令所绑定的表达式信息。

【vnode】

　　Vue 编译生成的虚拟节点。

【oldVnode】

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

注意：除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。