Vue自定義指令的使用示例

這篇文章主要介紹Vue自定義指令的使用示例，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

最近搞了畢設(shè)，需要實現(xiàn)一個場景，點擊一塊區(qū)域，彈出一個編輯區(qū)域，點擊頁面的其他地方的時候，這個編輯區(qū)域就隱藏，本想想之前寫模態(tài)框一樣寫個方法的時候，突然覺得可以嘗試用 vue 相關(guān)的東西優(yōu)雅的解決這個事情，然后就學(xué)了下面的自定義指令了。

1 Vue 自定義指令

1.1 定義

直接看官網(wǎng)的介紹吧（覺得官方文檔說的很清楚了，所以我基本都是抄他的了）。

除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復(fù)用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進(jìn)行底層操作，這時候就會用到自定義指令。

1.2 基礎(chǔ)實現(xiàn)

這個在分兩種情況，如果你想定義一個全局的自定義組件的話,那么就在項目中的 main.js 里面定義了，例如定義一個官網(wǎng)中的自動聚焦的指令

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

要是你只是想定義一個局部的指令在某個組件內(nèi)部用的話，那么就在相應(yīng)的組件內(nèi)定義了

// 跟 data(),methods:{} 那些同級寫了
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

定義完后我們就能愉快的使用了

<input v-focus>

1.2 鉤子函數(shù)

當(dāng)然這個自定義指令不會就這么一點東西啦，為了解決一些現(xiàn)實中場景，Vue 給我們一堆鉤子函數(shù)用來實現(xiàn)我們的一些騷操作。具體如下 (均為可選)：

bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

接下來我們來看一下鉤子函數(shù)的參數(shù) (即 el、binding、vnode 和 oldVnode)。

當(dāng)然要想好好用用這寫鉤子函數(shù)，就要懂得用下面的這些參數(shù)

1.3 鉤子函數(shù)參數(shù)

指令鉤子函數(shù)會被傳入以下參數(shù)：

el：指令所綁定的元素，可以用來直接操作 DOM 。

binding：一個對象，包含以下屬性：

name：指令名，不包括 v- 前綴。

value：指令的綁定值，例如：- v-my-directive="1 + 1" 中，綁定值為 2。

oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。

arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。

modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { - foo: true, bar: true }。

vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。

oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

然后官網(wǎng)有話說

除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進(jìn)行。

然后下面我們給一個簡單的例子

// 在組件內(nèi)部定義一個局部指令
directives:{
  demo:{
    bind: function (el, binding, vnode) {
      var s = JSON.stringify;
      el.innerHTML = 
        `name: ${s(binding.name)} <br>
        value: ${s(binding.value)} <br>
        expression: ${s(binding.expression)} <br>
        argument: ${s(binding.arg)} <br>
        modifiers: ${s(binding.modifiers)} <br>
        vnode keys: ${Object.keys(vnode).join(', ')}`
    }
  }
}
 // 綁定到組件中的一個 div 中
<div v-demo:foo.a.b="message"></div>

然后我們在網(wǎng)頁中就可以看到這么一堆文字了(當(dāng)然下面的注釋是我自己寫的)

name: "demo" 
// 指定名稱
value: "Welcome to Your Vue.js App" 
// 指令綁定值
expression: "message" 
// 字符串形式的指令表達(dá)式
argument: "foo" 
// 傳給指令的參數(shù)
modifiers: {"a":true,"b":true} 
// 修飾符的對象
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
// Vue 編譯生成的虛擬節(jié)點

1.4 函數(shù)簡寫

在很多時候，你可能想在 bind 和 update 時觸發(fā)相同行為，而不關(guān)心其它的鉤子。比如這樣寫:

colorSwatch: function colorSwitch(el, binding) {
  el.style.backgroundColor = binding.value
},

1.5 對象字面量

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

以上是“Vue自定義指令的使用示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！