Vue自定義指令的使用示例

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

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

1 Vue 自定義指令

1.1 定義

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

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

1.2 基礎實現

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

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

要是你只是想定義一個局部的指令在某個組件內部用的話，那么就在相應的組件內定義了

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

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

<input v-focus>

1.2 鉤子函數

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

bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

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

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

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

unbind：只調用一次，指令與元素解綁時調用。

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

當然要想好好用用這寫鉤子函數，就要懂得用下面的這些參數

1.3 鉤子函數參數

指令鉤子函數會被傳入以下參數：

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

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

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

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

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

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

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

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

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

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

然后官網有話說

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

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

// 在組件內部定義一個局部指令
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>

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

name: "demo" 
// 指定名稱
value: "Welcome to Your Vue.js App" 
// 指令綁定值
expression: "message" 
// 字符串形式的指令表達式
argument: "foo" 
// 傳給指令的參數
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 編譯生成的虛擬節點

1.4 函數簡寫

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

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

1.5 對象字面量

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

<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自定義指令的使用示例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！