本文共 1076 字，大约阅读时间需要 3 分钟。

0x00

同样 Vue 允许我们自定义指令，以再必要的情况下实现对原生 DOM 的操作。

Vue 提供了 deirevtice 注册全局指令，directives 注册局部指令。

   
    
        
    
   
Vue.directive('focus',{    // 注册一个全局的指令 focus    inserted: function (el) {// inserted: 钩子函数，被绑定元素插入到父节点时调用// el：钩子函数的参数，代表指令所绑定的元素，可以直接用来操作 DOM        el.focus()    }})new Vue({    el: '#demo',    directives: {        // 局部指令        warn: {// 注册一个局部指令 warn            inserted: function (el) {//                el.style.border = '2px solid red'            }        }    }})

0x01 钩子函数

除了 inserted 函数外， Vue 还提供了其它几个钩子函数:

• bind: 只调用一次，当指令第一次被绑定到元素时调用。
• inserte: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次，指令与元素解绑时调用。

以上所有钩子函数都接受四个钩子函数的参数，el, binding, vnod,oldVnode(仅在 update和 componentUpdated 钩子中可用)。

• el: 指令所绑定的元素。
• binding: 一个对象，包含如下属性:
  • name: 指令名，不包括 v- 前缀。
  • value: 指令绑定的属性值。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdate 中可用。
  • arg: 传给指令的参数。v-my-direvtive:foo ，arg=foo。
  • expression: 绑定值的字符串形式
  • modifiers： 一个包含修饰符对象
• vnode: Vue 编译生产的虚拟节点。
• oldVnode: 上一个虚拟节点。

转载地址：http://zqhni.baihongyu.com/