vue自定义指令的方法有哪些(vue30自定义指令)

目录：

• 1、vue自定义指令（过滤器/函数）保留小数点后两位
• 2、8个非常实用的Vue自定义指令
• 3、vue3.2 setup 之局部自定义指令
• 4、Vue自定义指令

vue自定义指令（过滤器/函数）保留小数点后两位

一、自定义指令

1.在mainjs中写入

2.使用方法

或者

1.在mainjs中写入

2.使用方法

二、过滤器 （全局数据，不适用于input 的v-model）

1.在mainjs中注册

二、在assets/js中新建 filters.js

三、使用方法

三、函数 保留两位小数，不够自动用零补齐

1.在mainjs中引入注册

二、在assets/js中新建 公共js文件filters.js

三、使用方法

8个非常实用的Vue自定义指令

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

批量注册指令，新建 directives/index.js 文件

在 main.js 引入并调用

指令定义函数提供了几个钩子函数（可选）：

下面分享几个实用的 Vue 自定义指令

需求：实现一键**文本内容，用于鼠标右键粘贴。

思路：

使用：给 Dom 加上 v-copy 及**的文本即可

需求：实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件

思路：

使用：给 Dom 加上 v-longpress 及回调函数即可

背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。

需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。

思路：

使用：给 Dom 加上 v-debounce 及回调函数即可

背景：开发中遇到的表单输入，往往会有对输入内容的限制，比如不能输入表情和特殊字符，只能输入数字或字母等。

我们常规方法是在每一个表单的 on-change 事件上做处理。

这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。

需求：根据正则表达式，设计自定义处理表单输入规则的指令，下面以禁止输入表情和特殊字符为例。

使用：将需要校验的输入框加上 v-emoji 即可

背景：在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。

需求：实现一个图片懒加载指令，只加载浏览器可见区域的图片。

思路：

图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。

下面封装一个懒加载指令兼容两种方法，判断浏览器是否支持 IntersectionObserver API，如果支持就使用 IntersectionObserver 实现懒加载，否则则使用 srcoll 事件监听 + 节流的方法实现。

使用，将组件内 标签的 src 换成 v-LazyLoad

背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。

需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。

思路：

使用：给 v-permission 赋值判断即可

需求：给整个页面添加背景水印

思路：

使用，设置水印文案，颜色，字体大小即可

需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。

思路：

使用: 在 Dom 上加上 v-draggable 即可

vue3.2 setup 之局部自定义指令

vue2 全局自定义指令

在vue2中，全局自定义指令通过 directive 挂载到 Vue 对象上，使用Vue.directive('name',opt)。

inserted 是钩子函数，在绑定元素插入父节点时执行。

vue3 全局自定义指令

在 vue3 中，vue 实例通过createApp 创建，所以全局自定义指令的挂载方式也改变了， directive 被挂载到 app上。

在组件内部，使用 directives 引入的叫做局部自定义指令。

其实，在vue3.2中，自定义指令变得更加的简单，直接上例子。

看到了吗，重点是： 注册一个局部的自定义指令，需要以小写v开头 。

这里做最简单示例，实战中举一反三灵活应用到项目中才是真理。

看完，你的项目需求可能会更复杂，所以系统掌握vue3中指令基础知识才是重点。

一个指令定义对象可以提供如下几个钩子函数（都是可选的，根据需要引入）

eg：测试指令内生命周期函数执行

通过点击按钮，我们发现创建 input 元素的时候，会触发 created、beforeMount 和 mounted 三个钩子函数。

隐藏 input 元素的时候，会触发 beforeUnmount 和 unmounted 。

然而我们添加的 beforeUpdate 和 updated 函数并没有执行。

此时我们把 input 元素上的 v-if 修改成 v-show 就会执行上述两个方法了，具体的执行情况自行验证下。

从 vue2 升级到 vue3 ，自定义指令的生命周期钩子函数发生了改变，具体变化如下：

钩子函数被赋予了以下参数：

binding 包含的属性具体的分别为：

自定义指令的也可以带参数，参数可以是动态的，参数可以根据组件实例数据进行实时更新。

eg：自定义指令动态参数

什么时候需要自定义指令？

参考资料： 传送门

Vue自定义指令

自定义指令需要注册后才能使用，Vue提供了两种注册方式：全局注册和局部注册。全局注册使用Vue.directive()方法来注册一个全局自定义指令，该方法接受两个参数，第一个参数是指令的ID(即名字)；第二个参数是一个定义对象或者函数对象，指令要实现的功能在这个对象中定义。语法形式如下：

Vue.directive(id，[definition])

全局指令可以在任何Vue实例的模板中使用。

局部注册是在Vue实例的选项对象中使用directives选项进行注册，局部注册的自定义指令只能在该实例绑定的视图中使用。