<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自定義指令的學習理解(代碼示例)