在Vue中自定義指令

1.自定義全域性指令

// 自定義指令: v-focus，

//功能: 為繫結的元素自動獲取焦點：
vue.
directive
('focus',}
);

// 自定義指令: v-color，

//功能: 為繫結的元素設定指定的字型顏色：
directives:
}}

//使用 v-focus 自動獲取焦點

//使用 v-color 把字型設定為 pink
"text" v-focus v-color=
"'pink'"
>

鉤子函式

觸發時機/條件/作用

bind

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

inserted

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

update

所在元件的 vnode 更新時呼叫，但是可能發生在其子 vnode 更新之前。指令的值可能發生了改變，也可能沒有。

unbind

只呼叫一次，指令與元素解綁時呼叫

componentupdated

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

使用鉤子函式時可以傳入不同的引數

el引數就是指令所繫結的元素，可以用來直接操作 dom.

如果你定義的指令在使用時需要傳入不同的值,你可以直接寫到鉤子函式的形參中 在函式體內使用即可

例如:

bind

(el, xingcan)

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...