Vue.js(进阶)自定义指令

0x00

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

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

<div  id="demo">
    <input type="text" v-focus v-warn>
    <!--使用 自定义指令-->
</div>
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: 上一个虚拟节点。