Vue中如何详细实现自定义指令？

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

一、什么是全局API？

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

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

- Vue.directive：自定义指令- Vue.component：全局组件- Vue.prototype.$options：获取Vue实例的选项对象

简单来说，全局API是Vue提供的一些可以直接在Vue实例中使用的方法或属性，方便开发者进行全局操作。

一、什么是全局API？

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

二、Vue.directive自定义指令

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

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

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

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

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

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