Vue自定義指令

前面的話

　　除了默認設置的核心指令( v-model 和 v-show )，Vue 也允許注冊自定義指令。在Vue里，代碼復用的主要形式和抽象是組件。然而，有的情況下，仍然需要對純 DOM 元素進行底層操作，這時候就會用到自定義指令。本文將詳細介紹Vue自定義指令

 

指令注冊

　　以一個input元素自動獲得焦點為例，當頁面加載時，使用autofocus可以讓元素將獲得焦點 。但是autofocus在移動版Safari上不工作。現在注冊一個使元素自動獲取焦點的指令

　　指令注冊類似於組件注冊，包括全局指令和局部指令兩種

【全局指令】

　　使用Vue.diretive()來全局注冊指令

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

【局部指令】

　　也可以注冊局部指令，組件或Vue構造函數中接受一個 directives 的選項

var vm = new Vue({
  el: '#example',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }

})

　　然后可以在模板中任何元素上使用新的 v-focus 屬性

<div id="example">
  <input v-focus>
</div>

<script>
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
var vm = new Vue({
  el: '#example',

})
</script>

 

鈎子函數

　　指令定義函數提供了幾個鈎子函數（可選） 

【bind】

　　只調用一次，指令第一次綁定到元素時調用，用這個鈎子函數可以定義一個在綁定時執行一次的初始化動作

【inserted】

　　被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）

【update】

　　所在組件的 VNode 更新時調用，但是可能發生在其孩子的 VNode 更新之前。指令的值可能發生了改變也可能沒有。但是可以通過比較更新前后的值來忽略不必要的模板更新

【componentUpdated】

　　所在組件的 VNode 及其孩子的 VNode 全部更新時調用

【unbind】

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

 

鈎子函數參數

　　鈎子函數被賦予了以下參數

【el】

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

【binding】

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

name: 指令名，不包括 v- 前綴。
value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。
expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。

【vnode】

　　Vue 編譯生成的虛擬節點

【oldVnode】

　　上一個虛擬節點，僅在 update 和 componentUpdated 鈎子中可用

　　[注意]除了 el 之外，其它參數都是只讀的，盡量不要修改他們。如果需要在鈎子之間共享數據，建議通過元素的 dataset 來進行

　　下面是一個使用了這些參數的自定義鈎子樣例

<div id="example" v-demo:foo.a.b="message"></div>

<script>
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(', ')
  }
})
new Vue({
  el: '#example',
  data: {
    message: 'hello!'
  }
})
</script>

【函數簡寫】

　　 大多數情況下，可能想在bind和update鈎子上做重復動作，並且不想關心其它的鈎子函數。可以這樣寫：

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

【對象字面量】

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

<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!"
})