Vue.directive如何自定义长尾词指令？

本文共计981个文字，预计阅读时间需要4分钟。

一、什么是全局API？

全局API并不在构造器中，而是先声明全局变量或方法，然后在Vue实例中使用。

Vue内置了一些全局API，例如：

- Vue.directive：自定义指令- Vue.prototype.$nextTick：在下次DOM更新循环结束之后执行延迟回调- Vue.prototype.$forceUpdate：强制更新视图- Vue.prototype.$watch：监听数据变化

简单来说，全局API是在Vue实例创建之前定义的，可以在任何组件中使用，扩展了Vue的功能。

一、什么是全局API？

全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。

二、Vue.directive自定义指令

我们在第一季就学习了内部指令，我们也可以定义一些属于自己的指令，比如我们要定义一个v-jspang的指令，作用就是让文字变成绿色。

在自定义指令前我们写一个小功能，在页面上有一个数字为10，数字的下面有一个按钮，我们每点击一次按钮后，数字加1.

三、自定义指令中传递的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。

binding: 一个对象，包含指令的很多信息。

vnode: Vue编译生成的虚拟节点。