Vue自定義指令是Vue非常有用的模塊，它可以讓你通過Vue實(shí)例控制DOM元素。使用指令可以減少在頁面中自己書寫一些冗余的代碼，提高代碼重用率。

下面我們來看一下如何創(chuàng)建一個(gè)自定義指令。

// 1. 全局指令
Vue.directive('my-directive', {
bind: function (el, binding, vnode) {
// 綁定時(shí)的操作
},
inserted: function (el, binding, vnode) {
// 插入到DOM中時(shí)的操作
},
update: function (el, binding, vnode, oldVnode) {
// 當(dāng)綁定值更新時(shí)的操作
},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 組件更新時(shí)的操作
},
unbind: function (el, binding, vnode) {
// 解綁時(shí)的操作
}
})
// 2. 局部指令
new Vue({
directives: {
'my-local-directive': {
bind: function (el, binding, vnode) {
// 綁定時(shí)的操作
},
inserted: function (el, binding, vnode) {
// 插入到DOM中時(shí)的操作
},
update: function (el, binding, vnode, oldVnode) {
// 當(dāng)綁定值更新時(shí)的操作
},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 組件更新時(shí)的操作
},
unbind: function (el, binding, vnode) {
// 解綁時(shí)的操作
}
}
}
})

自定義指令的五個(gè)鉤子函數(shù)：

• bind: 只調(diào)用一次，在指令綁定到元素上時(shí)調(diào)用。在這里可以進(jìn)行一些初始化工作，例如添加事件監(jiān)聽器。
• inserted: 被綁定元素插入到父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在，這時(shí)候不一定被插入到 DOM 中）。
• update: 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。
• componentUpdated: 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind: 只調(diào)用一次，在指令與元素解綁時(shí)調(diào)用。

以上就是Vue自定義指令的簡要介紹及示例代碼，相信你看完之后已經(jīng)明白如何使用自定義指令了。