vue2.0自定義指令

一、什麼是指令？

指令一般以"v-"做爲前綴, 以方便Vue知道你在使用一種特殊的標記。
除了 Vue 核心攜帶着的一些默認指令（v-model 和 v-show）以外，
Vue 還容許你註冊本身的自定義指令。某些狀況下，仍是須要對普通元素進行一些底層 DOM 訪問，
這也是自定義指令仍然有其使用場景之處。

二、全局指令：

當頁面加載時，元素將獲取焦點，事實上，在訪問頁面時，若是你尚未點擊任何地方，上面的輸入框如今應該處於獲取焦點的狀態。如今讓咱們構建指令以完成此效果：

<template>
<div class="parent">
  <input v-focus>
</div>
</template>

import Vue from 'vue'
  import cnChildren from './children'
  // 註冊一個名爲 `v-focus` 的全局自定義指令
  Vue.directive('focus', {
    // 當綁定的元素插入到 DOM 時調用此函數……
    inserted: function (el) {
      // 元素調用 focus 獲取焦點
      el.focus()
    }
  });

若是你想要註冊一個局部指令，也能夠經過設置組件的 directives 選項：

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

咱們有幾個可用的鉤子：

• bind：在指令第一次綁定到元素時調用，只會調用一次。能夠在此鉤子函數中，執行一次性的初始化設置。
• inserted：在已綁定的元素插入到父節點時調用（只能保證父節點存在，不必定存在於 document 中）。
• update：在包含指令的組件的 VNode 更新後調用，但可能以前其子組件已更新。指令的值可能更新或者還沒更新，然而能夠經過比較綁定的當前值和舊值，來跳過沒必要要的更新（參考下面的鉤子函數）。
• componentUpdated：在包含指令的組件的 VNode 更新後調用，而且其子組件的 VNode 已更新。
• unbind：在指令從元素上解除綁定時調用，只會調用一次。

每一個鉤子能夠選擇一些參數。

• el：指令綁定的元素。能夠用於直接操做 DOM。

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

  一、name：指令的名稱，不包括 v- 前綴。
    二、value：向指令傳入的值。例如，在 v-my-directive="1 + 1" 中，傳入的值是 2。
    三、oldValue：以前的值，只在 update 和 componentUpdated 鉤子函數中可用。不管值是否發生變化，均可以使用。
    四、expression：指令綁定的表達式(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 編譯器(Vue’s compiler)生成的虛擬 Node 節點(virtual node)。更多細節請查看
  VNode API。

除了 el 以外的其餘參數，都應該是隻讀的，而且永遠不要去修改它們。

三、自定義指令示例

若是指令須要多個值，你還能夠向指令傳入 JavaScript 對象字面量(object literal)。記住，指令可以接收全部有效的 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!"
})