自定義指令

一、基本用法

全局注冊和局部注冊,和組件類似,區(qū)別是把component 換成了 directive

二、鉤子函數(shù)

1?bind
只調(diào)用一次 (和@click類似),指定第一次綁定到元素時調(diào)用
用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作

2?inserted
被綁定元素插入父節(jié)點(diǎn)時調(diào)用(父節(jié)點(diǎn)存在即可調(diào)用,不必存在document中)

3?update
綁定元素所在模板更新時調(diào)用(不論綁定值是否變化)
通過比較更新前后的綁定值,可以忽略不必要的模板更新

4?componentUpdated
被綁定元素所在模板完成一次更新周期時調(diào)用

5?unbind
只調(diào)用一次,指令與元素解綁時調(diào)用

三、鉤子函數(shù)的參數(shù)

1?el :指令所綁定的元素,可以用來直接操作DOM

2、binding:一個對象,包含屬性有:

2.1?name:指令名,不包括v- 前綴

2.2?value:指令的綁定值,如: v-my-directive="1+1",value值是2

2.3?oldValue:指令綁定的前一個值,僅在update 和 componentUpdated中用,無論值是否改變都可用

2.4?expression:綁定值的字符串形式(綁定值的屬性名,也叫值的表達(dá)式)
? 如:v-my-directive="1+1",expression值是"1+1"

2.5?arg:傳給指令的參數(shù),如:v-my-directive:foo,arg的值是"foo"

2.6?modifiers:一個包含修飾符的對象
? 如:v-my-directive.foo.bar,修飾符對象modifiers的值是 {foo: true, bar:true}

3?vnode:Vue 編譯生成的虛擬節(jié)點(diǎn)

4?oldVnode:上一個虛擬節(jié)點(diǎn),僅在update 和 componentUpdated中

 <div v-test:xwu.e.f="word"></div>

【Demo實例 https://jsbin.com/zovozoz/edit?html,output

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容