vue 自定義指令如何使用

2021-10-09 14:14:03 字數 669 閱讀 7640

指令的註冊方式和「過濾器」、「混入」、「元件」註冊的方式一樣都分為兩種:一是全域性註冊,二是區域性註冊。

1.全域性註冊

vue.directive(『name』, {})

2.區域性註冊

directives:

然後在模版中直接使用即可。

你好,六哥在這

vue 提供了自定義指令的幾個鉤子函式:

bind:指令第一次繫結到元素時呼叫,只執行一次。

inserted:被繫結的元素,插入到父節點的 dom 中時呼叫。

update:元件更新時呼叫。

componentupdated:元件與子元件更新時呼叫。

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

除update 與 componentupdated 鉤子函式之外,每個鉤子函式都含有 el、binding、vnode 這三個引數。

oldvnode 只有在 update 與 componentupdated 鉤子中生效。

引數el 就是指令繫結的 dom 元素,而binding是乙個物件,它包含一下屬性:name、value、oldvalue、expression、arg、modifiers。

另外值得注意的一點是,除了 el 之外,binding、vnode 屬性都是唯讀的。

注:vue自定義指令也可以寫修飾符和傳參

vue 自定義指令如何使用

vue 自定義指令如何使用 全域性指令 使用 vue.diretive 來全域性註冊指令。區域性指令 也可以註冊區域性指令,元件或 vue 建構函式中接受乙個 directives 的選項。鉤子函式。指令定義函式提供了幾個鉤子函式 可選 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 ...