Vue全家桶实践（六）---自定义指令（directive）

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算简单梳理一下思路。

相关博客：

1. Vue全家桶实践（一）—vue-cli
2. Vue全家桶实践（二）—iView
3. Vue全家桶实践（三）—axios
4. Vue全家桶实践（四）—vue-router
5. Vue全家桶实践（五）—渲染函数&JSX
6. Vue全家桶实践（六）—自定义指令（directive）

自定义指令

参考资料：自定义指令

Vue默认有v-if,v-show等指令，我们也可以根据需求，自定义一些常用的指令。比如表单界面需要autoFocue，那么我们可以使用Vue的自定义指令功能，来制造一个v-focus指令，之后，只要在需要自动获得焦点的元素上边加上这个指令即可。
比如：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 想注册局部自定义指令，只要在组件种使用directives选项即可：
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
// 使用
<input v-focus>

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。