《Vue2 十二》Vue中的自定義指令

2021-10-04 11:42:37 字數 1216 閱讀 3794

vue允許註冊自定義指令。

全域性註冊:

// 註冊乙個全域性自定義指令 `v-focus`

vue.directive('focus',

})

註冊區域性指令:

directives: 

}}

然後就可以在模板中任何元素上使用新的v-focus屬性了。

bind:只呼叫一次,指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。

inserted:被繫結元素插入父節點時呼叫。僅保證父節點存在,但不一定已被插入文件中。

upate:所在元件的vnode更新時呼叫,但是可能發生在其子vnode更新之前。

componentupdated:指令所在元件的vnode及其子vnode全部更新後呼叫。

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

鉤子函式的引數:

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」)。

指令的引數可以是動態的(例如,在 v-mydirective:[argument]=「value」 )。

modifiers:乙個包含修飾符的物件(例如:v-my-directive.foo.bar 中,修飾符物件為 )。

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

oldvnode:上乙個虛擬節點。

除了el之外,其他引數都應該是唯讀的。

vue中自定義指令

鉤子函式 mounted 鉤子函式 會自動觸發的函式 生命週期 乙個例項從建立到銷毀的整個過程 vue中對元素進行識別 ref 相當於元素的id,可以使用ref為元素設定乙個唯一的標識 編號 type text v model newcar.id ref iidd this.ref s th is ...

vue中自定義指令

vue中的自定義指令分為全域性指令和私有指令 1.全域性指令 直接在vue身上繫結directive 其中directive有三個屬性 注意 自定義指令,在定義時不需要加v 字首,但是在繫結時,必須加上v 字首 doctype html en utf 8 viewport content width...

vue中自定義指令

在vue中自定義標籤,首先要呼叫vue中乙個directive的方法,具體方法 vue.direction 指令名稱 function 例如我們要寫乙個關於顏色的指令,叫v colorred 1 vue.directive colorred function 在html中,我直接用v colorre...