vue自定义指令

2021-10-27 476 阅读1分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前端开发中难免会碰到可以用到自定义指令的地方，但是由于平时使用不多一些内容老是容易遗忘，所以特地用本篇文章记录一下自定义指令的详细用法。

1.指令注册

自定义指令分为全局注册和局部注册

// 全局注册
Vue.directive('xxx', {
    bind: function() {
        // ...
    }
})

// 局部注册
var app = new Vue({
    el: '#app',
    directives: {
        xxx: {
            // ...
        }
    }
})

2.指令属性

vue2.0版本

bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。
update：组件更新时调用。
componentUpdated：组件与子组件更新时调用。
unbind：指令与元素解绑时调用，只执行一次。

vue3.0版本

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted：在绑定元素的父组件被挂载后调用。
beforeUpdate：在更新包含组件的 VNode 之前调用。
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

可以看出来3.0版本钩子函数与2.0版本还是有所不同的，在使用过程中要注意。