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