前言
通俗点来说，Vue.js是一个轻量级的，易上手易使用的，便捷，灵活性强的前端MVVM框架。简洁的API，良好健全的中文文档，使开发者能够较容易的上手Vue框架。
本文将结合个人在使用Vue中的一些经(cai)验(keng)和一些案例，对Vue框架掌握的部分知识进行输出，同时也巩固对Vue框架的理解。
介绍
- 什么是指令
指令就是直接作用在（写在）DOM上的小命令，在VUE中，指令是以v-开头的，vue就能识别这是一个指令并保持语法的一致性。
- 使用条件是什么？
代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
- 指令和组件的区别是什么？
在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元——有自己的视图和数据逻辑。
自定义指令的API
-
自定义指令的注册和应用
// 全局注册 Vue.directive("focus", { inserted: function(el){ el.focus(); } })
// 如果想注册局部指令，组件中也接受一个 directives 的选项： directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
-
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
// 注册
Vue.directive('my-directive', {
bind: function () {}, // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted: function () {}, // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update: function () {}, // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated: function () {}, // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind: function () {} // 只调用一次，指令与元素解绑时调用
})
各个钩子函数作用的顺序是：
PS：个人认为这五个钩子函数中bind和update是最有用的。
实际需求：创建一个自定义指令来实现防暴击功能
- 场景分析
项目通过自定义指令的方式来简化按钮click的防暴击操作，通过简单的配置来获取理想的效果，例如支持自定义防暴击的时间间隔，默认的防暴击间隔时间是1000ms
埋点指令：v-prevent-reclick
- 参数设置
（1）自定义防暴击间隔时间，2000是毫秒，注意配置哟
<van-button @click="onSubmit" v-prevent-reclick="2000">发布任务</van-button>
（2）使用默认防暴击间隔时间
<van-button @click="onSubmit" v-prevent-reclick>发布任务</van-button>
- 源码分享
