Vue.js 2.x筆記：指令（4）

1. 內置指令

　　指令是Vue.js 中一個重要的特性，主要提供了一種機制將數據的變化映射爲DOM 行爲。

　　Vue.js 自己提供了大量的內置指令來進行對DOM 的操做，同時能夠開發自定義指令。

2. 自定義指令

　　在 Vue 2.0 中，代碼重用和抽象(reuse and abstraction)的主要是以組件的形式。 

　　可是，可能某些狀況下，仍是須要對普通元素進行一些底層 DOM 訪問，這是自定義指令的使用場景之處。

2.1 註冊指令

2.1.1 全局自定義指令

　　Vue.directive(id, definition) ：註冊全局自定義指令，接收參數id和定義對象。

　　其中，

　　　　id ：指令的惟一標識

　　　　定義對象：指令的相關屬性及鉤子函數。

<div id="app">
    <input v-focus />
</div>
<script>
    // 註冊一個名爲 `v-focus` 的全局自定義指令
    Vue.directive('focus', {
        // 當綁定的元素插入到 DOM 時調用此函數……
        inserted: function (el) {
            // 元素調用 focus 獲取焦點
            el.focus()
        }
    });

    var vm = new Vue({
        el: "#app"
    });
</script>

2.1.2 局部指令

　　註冊局部指令：經過設置組件的 directives 選項。

<div id="app">
    <input v-focus />
</div>
<script>
    var vm = new Vue({
        el: "#app",
        directives: {
            // 註冊一個局部的自定義指令 v-focus
            focus: {
                // 指令的定義
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                }
            }
        }
    });
</script>

2.2 鉤子函數

　　指令的定義對象提供了幾個鉤子函數（所有可選）：

　　bind：在指令第一次綁定到元素時調用，只會調用一次。能夠在此鉤子函數中，執行一次性的初始化設置。

　　inserted：在已綁定的元素插入到父節點時調用（只能保證父節點存在，不必定存在於 document 中）。

　　update：在包含指令的組件的 VNode 更新後調用，但可能以前其子組件已更新。指令的值可能更新或者還沒更新，然而能夠經過比較綁定的當前值和舊值，來跳過沒必要要的更新。

　　componentUpdated：在包含指令的組件的 VNode 更新後調用，而且其子組件的 VNode 已更新。

　　unbind：在指令從元素上解除綁定時調用，只會調用一次。