Vue入門和基礎（四）

Vue入門和基礎—自定義指令
前言：vue的指令有很多，比如我們熟悉的v-if，v-show等等，vue中我們也可以自定義一個指令。
通過directive就可以在Vue上註冊指令

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

如果想註冊區域性指令，元件中也接受一個 directives 的選項：

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

然後你可以在模板中任何元素上使用新的 v-focus 屬性，如下：

<input v-focus>

鉤子函式
一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：

bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。
componentUpdated

：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。
unbind：只調用一次，指令與元素解綁時呼叫。
接下來我們來看一下鉤子函式的引數 (即 el、binding、vnode 和 oldVnode)。

鉤子函式引數

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

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 來進行。

這是一個使用了這些屬性的自定義鉤子樣例：

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

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: '#app',
  data: {
    message: 'hello!'
  }
})

結果：

name: "demo"
value: "hello!"
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

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

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

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

<div v-demo="{ color: 'black', text: 'message!' }"></div>
Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "black"
  console.log(binding.value.text)  // => "message!"
})