这篇文章主要介绍“vue中的自定义指令如何使用”，在日常操作中，相信很多人在vue中的自定义指令如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中的自定义指令如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。创新互联公司坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都做网站、网站设计、外贸营销网站建设、微信公众号开发、电商网站开发，重庆小程序开发，软件按需定制开发等一站式互联网企业服务。
1. 什么是自定义指令？
想要使用自定义指令，首先我们得搞清楚什么是自定义指令？
自定义指令非常好理解，我们使用的v-for、v-if、v-model等等称之为指令，也被称之为Vue的内置指令。这些指令都是我们可以直接使用的。
为了更好的满足需求，最大化的让开发者个性化开发，Vue暴漏了自定义指令的API给我们，让我们除了使用内置指令外，我们还可以自己定义指令，定义好后和内置指令的方式非常类似。
比如我们看面的代码：
我是一段话
上面那段代码中v-pin可能很多小伙伴不知道是什么，看起来像是指令，但是有没有遇到过。其实v-pin就是一个自定义指令，只是我们这儿省略注册它的代码。
2. 环境准备
我们为了房间，直接使用Vue2.x的脚手架工具快速搭建一个项目。
搭建命令：
vue create 项目名称
运行起来：
3. 如何注册自定义指令？
要想使用自定义指令，我们必须先提前把它注册好，就好比我们的组件一样，得先注册，才能使用。
注册指令也分为全局注册和局部注册，和全局注册组件和局部注册组件一个道理。全局注册的指令可以在任何组件中直接使用，局部注册的指令只能在注册的地方使用。
3.1 全局注册
全局注册顾名思义，自定义指令注册好后，在项目的所有组件内都可以直接使用。
Vue提供了一个directive方法给我们注册自定义指令，我们在main.js中注册一个全局的自定义指令。
代码如下：
// src/main.js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
Vue.directive("resize", {
bind() {},
inserted() {},
update() {},
componentUpdated() {},
unbind() {},
});
new Vue({
render: (h) => h(App),
}).$mount("#app");
上段代码中我们就直接调用了Vue提供的directive方法来注册全局的自定义指令，该方法接收两个参数：指令名称、包含指令钩子函数的对象。
指令注册完毕后，我们就可以在项目中任意组件中的元素上使用“v-指令名称”的形式使用指令了。
需要注意的是，指令钩子函数不是必须的，大家可以把它与vue的生命周期钩子函数做类比，它们的作用就是用来让指令在不同的过程中做不同的事情。
3.2 局部注册
通常来说，如果自定义指令不是每个组件都会用到的话，我们一般局注册自定义指令就好了。
我们改造一下APP.vue文件，在其内部注册自定义指令，代码如下：
如上所示，Vue提供了一个directives选项供我们注册自定义指令，它与data、methods同级别，上段代码中我们注册了一个名叫resize的自定义指令，该指令只允许在组件内部使用。
注意：全局注册指令使用的是directive，局部注册指令使用的是directives，很好理解，局部指令一次性注意注册很多个，全局指令依次只能注册一个。
4. 自定义指令参数详解
上一节简单介绍了局部注册自定义指令和全局注册自定义指令，可以看到指令里面有几个钩子函数，我们的操作逻辑主要在这几个钩子函数当中，所以我们有必要介绍下这几个钩子函数。
4.1 钩子函数介绍
bind：
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：
被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：
所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：
指令所在组件的 VNode及其子 VNode全部更新后调用。
unbind：
只调用一次，指令与元素解绑时调用。
上面5个就是自定义指令的全部钩子函数，每个钩子函数都是可选的，视情况而定。大家可以简单理解钩子函数顺序：指令绑定到元素时（bind）、元素插入时（inserted）、组件更新时（update）、组件更新后（componentUpdated）、指令与元素解绑时（unbind）。这些和组件的生命周期函数有点类似。
4.2 钩子函数参数介绍
为了方便我们的逻辑操作，每个钩子函数都会接收参数，我们可以用这些参数做我们想做的事。
el：
指令所绑定的元素，可以用来直接操作 DOM。
binding：
一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：
Vue 编译生成的虚拟节点。
oldVnode：
上一个虚拟节点，仅在update和componentUpdated钩子中可用。
在使用的时候，el和binding参数是我们使用得最平凡的，有了这些参数，我们的操作就变得简单起来。
5. 简单案列实战
上面两节介绍了如何注册自定义指令以及相关参数，接下来就该实战了，我们在APPVue中定义一个自定义指令，先来验证一下钩子函数的执行情况。
代码如下：
