vue自定義指令(全域性 區域性)

2021-10-02 05:44:45 字數 1060 閱讀 4152

vue除了提供了缺省內置的指令外,還允許開發人員根據實際情況自定義指令,它的作用價值在於當開發人員在某些場景下需要對普通dom元素進行操作的時候。

vue自定義指令和元件一樣存在著全域性註冊和區域性註冊兩種方式。

全域性指令

效果

區域性指令

顧名思義 區域性指令定義在組建內,寫法上最大的不同是定義時directives,而不是vue.directive,看下面案例你就明白了。當全域性指令和區域性指令同名時以區域性指令為準;

"text" v-focus=

"true"

/>

<

/div>

<

/template>

exprot default

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

inserted

(el, binding, vnode, oldvnode)

// 設定輸入框背景色

el.style.backgroundcolor =

'red'},

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

update

(el, binding, vnode, oldvnode)

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

componentupdated

(el, binding, vnode, oldvnode)

,unbind

(el, binding, vnode, oldvnode)}}

,data()

}}<

/script>

Vue 自定義指令(全域性定義 區域性定義)

前面已經介紹了幾個系統提供的指令,比如 v text v bind v on 等等,本文我們來介紹下自定義指令的實現。我們想建立乙個自動獲取焦點的指令,該功能其實可以通過document.getelementbyid search focus 來實現,但此處我們專門來介紹下自定義指令的實現方式。效果...

vue自定義全域性和區域性指令

一 介紹 1 除了核心功能缺省內置的指令 v model和v show vue 也允許註冊自定義指令。2 自定義指令的分類 1 全域性指令 2 區域性指令 3 自定義全域性指令格式 vue.directive 指令id,指令定義物件 4 自定義區域性指令格式 略二 指令物件中的鉤子函式 乙個指令定義...

vue自定義指令 區域性指令和全域性指令

以後都優先用inserted,因為inserted裡獲取到的資訊比bind中多一些 在鉤子函式內部可以通過第二個引數binding的value屬性,獲取到指令繫結的引數 指令的修飾符可以用來做一些特定的邏輯判斷處理 注意 在鉤子函式內部的this不是vm例項,可以通過第三個引數vnode.conte...