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：在指令从元素上解除绑定时调用，只会调用一次。