vue 自定義指令如何使用

2021-10-24 04:49:42 字數 1006 閱讀 6087

vue 自定義指令如何使用

【全域性指令】

使用 vue.diretive()來全域性註冊指令。

【區域性指令】

也可以註冊區域性指令,元件或 vue 建構函式中接受乙個 directives 的選項。

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

【bind】

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

【inserted】

被繫結元素插入父節點時呼叫( 父節點存在即可呼叫, 不必存在於

document 中)。

【update】

所在元件的 vnode 更新時呼叫,但是可能發生在其孩子的 vnode 更新之前。指令的值可能發生了改變也可能沒有。但是可以通過比較更新前後的值來忽略不必要的模板更新。

【componentupdated】

所在元件的 vnode 及其孩子的 vnode 全部更新時呼叫。

【unbind】

只呼叫一次,指令與元素解綁時呼叫。鉤子函式引數

鉤子函式被賦予了以下引數

【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.foo.bar, 修飾符物件 modifiers 的值是 。

vue 自定義指令如何使用

指令的註冊方式和 過濾器 混入 元件 註冊的方式一樣都分為兩種 一是全域性註冊,二是區域性註冊。1.全域性註冊 vue.directive name 2.區域性註冊 directives 然後在模版中直接使用即可。你好,六哥在這 vue 提供了自定義指令的幾個鉤子函式 bind 指令第一次繫結到元素...

Vue自定義指令

vue有很多內建的指令,比如說v on,v model,v clock等等,每乙個指令會完成一定的功能,但是這些內建的指令總會有些侷限性,要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令,只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...