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

libingql發表於2018-06-11
Vue.js筆記

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：在指令從元素上解除繫結時呼叫，只會呼叫一次。

相關文章