<input v-focus>1.2 鉤子函數
當然這個自定義指令不會就這么一點東西啦，為了解決一些現實中場景，Vue 給我們一堆鉤子函數用來實現我們的一些騷操作。具體如下 (均為可選)：
bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
unbind：只調用一次，指令與元素解綁時調用。
接下來我們來看一下鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。
當然要想好好用用這寫鉤子函數，就要懂得用下面的這些參數
1.3 鉤子函數參數
指令鉤子函數會被傳入以下參數：
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 編譯生成的虛擬節點1.4 函數簡寫
在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子。比如這樣寫:
colorSwatch: function colorSwitch(el, binding) {
el.style.backgroundColor = binding.value
},1.5 對象字面量
如果指令需要多個值，可以傳入一個 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中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
關鍵詞：Vue自定義指令的學習理解（代碼示例）