這篇文章帶給大家的內容是關於Vue自訂指令的學習理解（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
最近搞了畢設，需要實現一個場景，點擊一塊區域，彈出一個編輯區域，點擊頁面的其他地方的時候，這個編輯區域就隱藏，本想想之前寫模態框一樣寫個方法的時候，突然覺得可以嘗試用vue 相關的東西優雅的解決這個事情，然後就學了下面的自訂指令了。
1 Vue 自訂指令
1.1 定義
直接看官網的介紹吧（覺得官方文件說的很清楚了，所以我基本上都是抄他的了）。
除了核心功能預設內建的指令 (v-model 和 v-show)，Vue 也允許註冊自訂指令。注意，在 Vue2.0 中，程式碼重複使用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自訂指令。1.2 基礎實作
這個在分兩種情況，如果你想定義一個全域的自訂元件的話,那麼就在專案中的main.js 裡面定義了，例如定義一個官網中的自動對焦的指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})要是你只是想定義一個局部的指令在某個元件內部用的話，那麼就在對應的元件內定義了
// 跟 data(),methods:{} 那些同级写了
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}定義完後我們就能愉快的使用了
<input v-focus>
當然這個自訂指令不會就這麼一點東西啦，為了解決一些現實中場景，Vue 給我們一堆鉤子函數用來實現我們的一些騷操作。具體如下 (均為可選)：
bind：只呼叫一次，指令第一次綁定到元素時呼叫。在這裡可以進行一次性的初始化設定。
inserted：被綁定元素插入父節點時呼叫 (僅保證父節點存在，但不一定已插入文件中)。
update：所在元件的 VNode 更新時調用，但可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但你可以透過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。
unbind：只呼叫一次，指令與元素解綁時呼叫。
接下來我們來看看鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。
當然要想好好用這寫鉤子函數，就要懂得用下面的這些參數
指令鉤子函數會被傳入以下參數：
el：指令所綁定的元素，可以用來直接操作DOM 。
binding：一個對象，包含以下屬性：
name：指令名，不包含 v- 前綴。
value：指令的綁定值，例如：- v-my-directive="1 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字串形式的指令表達式。例如 v-my-directive="1 1" 中，表達式為 "1 1"。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar 中，修飾符物件為 { - foo: true, bar: true }。
vnode：Vue 編譯產生的虛擬節點。移步 VNode API 了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。
然後官網有話說
除了 el 之外，其它參數都應該是唯讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議透過元素的 dataset 來進行。然後下面我們給一個簡單的例子
// 在组件内部定义一个局部指令
directives:{
demo:{
bind: function (el, binding, vnode) {
var s = JSON.stringify;
el.innerHTML =
`name: ${s(binding.name)} <br>
value: ${s(binding.value)} <br>
expression: ${s(binding.expression)} <br>
argument: ${s(binding.arg)} <br>
modifiers: ${s(binding.modifiers)} <br>
vnode keys: ${Object.keys(vnode).join(', ')}`
}
}
}
// 绑定到组件中的一个 div 中
<div v-demo:foo.a.b="message"></div>然後我們在網頁中就可以看到這麼一堆文字了(當然下面的註釋是我自己寫的)
name: "demo"
// 指定名称
value: "Welcome to Your Vue.js App"
// 指令绑定值
expression: "message"
// 字符串形式的指令表达式
argument: "foo"
// 传给指令的参数
modifiers: {"a":true,"b":true}
// 修饰符的对象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 编译生成的虚拟节点在很多時候，你可能會想在bind 和update 時觸發相同行為，而不關心其它的鉤子。例如這樣寫:
colorSwatch: function colorSwitch(el, binding) {
el.style.backgroundColor = binding.value
},如果指令需要多個值，可以傳入一個 JavaScript 物件字面量。記住，指令函數能夠接受所有合法的 JavaScript 表達式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})以上是Vue自訂指令的學習理解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
