如何在Vue 3项目中自定义指令开发 - 行业资讯 - 肥雀云

　　介绍

本篇文章为大家展示了如何在Vue 3项目中自定义指令开发,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

什么是指令(指令)

在角和Vue中都有指示的概念,我们通常讲指令翻译为“指令”。

在计算机技术中,指令是由指令集架构定义的单个CPU的操作。在更广泛的意义上,“指令”可以是任何可执行程序的元素的表述,例如字节码。

那么在前端框架Vue中”指令”到底是什么,他有什么作用呢?

,在Vue开发中我们在模板中经常会使用v模型和v-show等以v -开头的关键字,这些关键字就是Vue框架内置的指令。通过使用v模型,可以获取实现DOM和数据的绑定;使用v-show,可以控制DOM元素显示。简而言之通过使用这些模板上的标签,让框架对DOM元素进行了指定的处理,同时DOM改变后框架可以同时更新指定数据。指令是Vue MVVM的基础之一。

指令的使用场景

除了使用内置的指令,Vue同样支持自定义指令,以下场景可以考虑通过自定义指令实现:

DOM的基础操作,当组件中的一些处理无法用现有指令实现,可以自定义指令实现,例如组件水印,自动焦点。相对于用ref获取DOM操作,封装指令更加符合MVVM的架构,M和v不直接交互。

& lt; p v-highlight=? # 39;黄色# 39;“祝辞Highlight 却;能够text bright yellow

多组件可用的通用操作,通过使用组件(组件)可以很好的实现复用,同样通过使用组件也可以实现功能在组件上的复用例。如拼写检查,图片懒加载。使用组件,只要在需要拼写检查的输入组件上加上标签,遍可为组件注入拼写检查的功能,无需再针对不同组件封装新的支持拼写功能呢。

Vue 3如何自定义指令

Vue支持全局注册和局部注册指令。

全局注册注册通过应用实例的指示方法进行注册。

let app =, createApp(应用) 　　app.directive(& # 39;突出# 39;,,{ 　　beforeMount (el,绑定,vnode), { 　　el.style.background =binding.value 　　} 　　})

局部注册通过给组件设置指令属性注册

export default defineComponent ({ 　　名称:,“WebDesigner", 　　组件:{ 　　设计师, 　　}，　　指示:{ 　　强调:{ 　　beforeMount (el,绑定,vnode), { 　　时间=el.style.background binding.value; 　　}，　　}，　　}，　　});

注册组件包含组件的名字,需要唯一和组件的一个实现对象,组册后即可在任何元素上使用了。

& lt; p v-highlight=? # 39;黄色# 39;“祝辞Highlight 却;能够text bright yellow

自定义组件就是实现Vue提供的钩子函数,在Vue 3中钩子函数的生命周期和组件的生命周期类似:,

<李>

创建——元素创建后,但是属性和事件还没有生效时调用。

<李>

beforeMount——仅调用一次,当指令第一次绑定元素的时候。

<李>

安装-元素被插入父元素时调用。李李

beforeUpdate:在元素自己更新之前调用

<李>

更新——元素或者子元素更新之后调用。李李

beforeUnmount:元素卸载前调用。李李

卸载,当指令卸载后调用,仅调用一次

每一个钩子函数都有如下参数:

<李>

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

<李>

绑定:数据对象,包含以下属性

,,,,,,,,,,,,,,,,,实例:当前组件的实例,一般推荐指令和组件无关,如果有需要使用组件上下文ViewModel,可以从这里获取
,,,,,,,,,,,,,,,,,价值:指令的值,即上面示例中的“黄色”
,,,,,,,,,,,,,,,,,oldValue:指令的前一个值,在beforeUpdate和更新中,可以和价值是相同的内容。
,,,,,,,,,,,,,,,,,参数:传给指令的参数,例如v:点击中的点击。
,,,,,,,,,,,,,,,,,修饰符:包含修饰符的对象,例如v。站:点击可以获取到一个{停止:真}的对象

<李>

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

<李>

prevVNode:更新时的上一个虚拟节点