16 《vue之自定義指令》

2021-10-06 19:17:45 字數 1338 閱讀 1212

1、自定義指令:使用vue.directive(id,definition)註冊全域性自定義指令,使用元件的directives選項註冊區域性自定義指令。

2、鉤子函式:

指令定義函式提供了幾個鉤子函式(可選):

bind:只呼叫一次,指令第一次繫結到元素時呼叫,用這個鉤子函式可以定義乙個在繫結時執行一次的初始化動作。

inserted:被繫結元素插入父節點時呼叫(父節點存在即可呼叫,不必存在於 document 中)。

update:第一次是緊跟在 bind 之後呼叫,獲得的引數是繫結的初始值,之後被繫結元素所在的模板更新時呼叫,而不論繫結值是否變化。通過比較更新前後的繫結值,可以忽略不必要的模板更新(詳細的鉤子函式引數見下)。

componentupdated:被繫結元素所在模板完成一次更新週期時呼叫。

unbind:只呼叫一次, 指令與元素解綁時呼叫。

3、鉤子函式的引數:(el, binding, vnode, oldvnode)

el:指令所繫結的元素,可以用來直接操作 dom 。

binding:乙個物件,包含以下屬性

name:指令名,不包含v-的字首;

value:指令的繫結值;例如:v-my-directive="1+1",value的值是2;

oldvalue:指令繫結的前乙個值,僅在update和componentupdated鉤子函式中可用,無論值是否改變都可用;

expression:繫結值的字串形式;例如:v-my-directive="1+1",expression的值是'1+1';

arg:傳給指令的引數;例如:v-my-directive:foo,arg的值為 'foo';

modifiers:乙個包含修飾符的物件;例如:v-my-directive.a.b,modifiers的值為

vnode:vue編譯的生成虛擬節點;

oldvnode:上一次的虛擬節點,僅在update和componentupdated鉤子函式中可用。

vue之自定義指令

1.如何自定義乙個指令?在export模板中加入directives選項 比如 directives bind el bind 像這樣的inserted,bind稱為鉤子函式,裡面的引數 el 代表當前指令被繫結的元件 bind 代表當前指令所繫結的元件的一些值,通常我們列印這兩個引數時,會返回整個...

Vue之自定義指令

vue中有很多內建的命令,例如v bind,v for,v show等等,這些指令的指責是將表示式改變時,將某些行為相應地對映到dom上。那麼除了我們常用的vue的內建指令外,我們還可以自定義指令,常用的自定義vue全域性指令的模板如下 這裡的focus是定義額指令的名稱,可根據指令作用換成其他名稱...

Vue之自定義指令

先了解一下,在vue中,有很多內建的指令.比如 等等.所以,關於指令,我們可以總結下面幾點 2.0 vue自定義指令場景小demo 非常尬 場景 我們需要乙個指令,寫在某個html表單元素上,然後讓它在被載入到dom中時,自動獲取焦點.和自定義過濾器一樣,我們這裡定義的是全域性指令 vue.dire...