vue中的指令 自定義指令

2021-10-10 03:24:38 字數 1762 閱讀 8595

之前我們已經了解過了內建指令,這些內建指令可以滿足我們學大部分的需求,但是在某些特殊情況下我們要對dom進行操作,這個時候我們就需要用到自定義智力了。

自定義指令只有在註冊之後才能使用,兩種註冊方式:

//1.全域性註冊,這種定義方式可以在全域性進行使用

//第一次引數是指令id,第二個引數是乙個定義物件或函式物件

vue.

directive

(id,

[definition]

)//2.區域性註冊,只能在該例項繫結的檢視中使用

//id表示指令id

newvue(}

})

自定義指令的功能是在定義物件中實現的,而定義物件是由鉤子函式組成的,vue提供了幾個鉤子函式

bind:只呼叫一次,指令第一次繫結到元素時呼叫。指令如果需要一些一次性的初始化設定,可以放到這個鉤子函式中。

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

update:被繫結元素所在的模板更新時呼叫,而不論繫結值是否變化。通過比較更新前後的繫結值,可以忽略不必要的模板更新

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

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

通過下列例項了解一下bind鉤子函式:

>

頁面載入時,input 元素自動獲取焦點:<

/p>

<

/div>

// 建立根例項

newvue(}

}})<

/script>效果圖如下:

在使用鉤子函式的時候,我們設定了乙個形參el,指令中的鉤子函式可以帶有一些引數,其中el就是其中之一,其他引數如下:

el:表的指令所用繫結的元素

binding:表示乙個物件,包含:name——指令名,value——指令繫結的值,oldvalue——指令繫結的前乙個值(僅在update和componentupdated鉤子函式中使用),expression——字串形式的指令表示式,arg——傳給指令的引數,modifiers——乙個包含修飾符的物件

vonde:表示vue編譯生成的虛擬節點

上述例項具體講解了binding引數中的部分屬性,其中提到的引數我們在下面內容會進行講解,在鉤子函式中除了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...