Vue自定義指令directive（主要是鈎子函數及其參數）一、指令注冊二、鈎子函數（五種）三、鈎子函數參數（el、binding、vnode 和 oldVnode）

文章目錄

• 一、指令注冊
• 二、`鈎子函數（五種）`
• 三、鈎子函數參數（`el、binding、vnode 和 oldVnode`）
• 四、動态指令參數
• 五、函數簡寫
• 六、對象字面量

一、指令注冊

Vue主要是以元件來進行複用，但還支援對底層DOM進行操作（自定義指令）

最基本的全局和局部（基本都有這兩塊，就不看了）

• 全局注冊（

  Vue.directive('focus', {})

  ）

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

• 局部注冊（元件中在

  directives

  中注冊就可以了）

在元件中注冊，與data()同級

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}
           

• inserted

  被綁定元素插入父節點時調用，在元素節點樹的時候就綁定了這個聚焦，然後元件

  created

  後就聚焦了

<input v-focus>

<el-input></el-input> 
           

• 如果用到

  el-input

  這個元件中的時候，會發現它其實是div包裹的input，是以-須要擷取到裡面的

  input

  元素再進行聚焦

二、

鈎子函數（五種）

• 一個指令定義對象可以提供如下幾個鈎子函數 (均為可選)：

bind

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

inserted

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

update

：所在元件的

VNode

更新時調用，但是可能發生在其子

VNode

更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模闆更新 (詳細的鈎子函數參數見下)。

componentUpdated

：指令所在元件的

VNode

及其子

VNode

全部更新後調用。

unbind

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

三、鈎子函數參數（

el、binding、vnode 和 oldVnode

）

el

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

DOM

。

binding

：一個對象，包含以下

property

：

• 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 編譯生成的虛拟節點。

oldVnode

：上一個虛拟節點，僅在

update

和

componentUpdated

（Vue生命周期

Mounted

到

beforDestory

之間的 ）鈎子中可用。

• 除了

  el

  之外，其它參數都應該是隻讀的，切勿進行修改。如果需要在鈎子之間共享資料，建議通過元素的

  dataset

  （

  js

  用來擷取全局屬性連結：

  data-*

  ） 來進行。

對應這些參數，官網有一個例子（處理

update

生命周期時的都講到了）

Vue.directive('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(', ')
  }
  //bind對應鈎子函數
  // 顯示了有name指令名（demo）、value指令的綁定值（hello!）、expression字元串形式的指令表達式（message）、argument傳給指令的參數（foo）、modifiers一個包含修飾符的對象{ a: true, b: true }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})
           

四、動态指令參數

• 指令的參數可以是動态的（像這樣

  v-mydirective:[argument]="value"

  ）

<div id="baseexample">
  <p>Scroll down the page</p>
  <p v-pin="200">Stick me 200px from the top of the page</p>
  <!-- 就這個200是bingding的value的（就元件中的資料動态綁定進去）-->
</div>
           

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

new Vue({
  el: '#baseexample'
})
           

五、函數簡寫

在很多時候，你可能想在

bind

和

update

時觸發相同行為，而不關心其它的鈎子。比如這樣寫：

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})
           

六、對象字面量

• 簡而言之就是給綁定的value可是是一個對象（即很多值的時候）（引号中的内容

  v-my-directive="1 + 1"

  ）
• 指令函數能夠接受所有合法的 JavaScript 表達式。