本文主要介绍Vue 3自定义指令开发的相关总结，帮助大家更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。
什么是指令？
Angular和Vue中都有方向的概念。我们通常说Directive翻译成“指令”。
在计算机技术中，指令是由指令集体系结构定义的单个CPU操作。从广义上来说，“指令”可以是可执行程序的任何元素的表达式，比如字节码。
那么前端框架Vue中的“指令”到底是什么，它的作用是什么？
在Vue的开发中，我们经常在模板中使用v-model、v-show等以v- in开头的关键词。这些关键字是Vue框架的内置指令。通过使用v-model，可以得到DOM和数据的绑定；使用v-show，您可以控制DOM元素的显示。简而言之，通过使用这些模板上的标签，框架可以指定DOM元素，并且在DOM发生变化后，框架可以同时更新指定的数据。是MVVM指导的基础之一。
指令的使用场景
除了使用内置指令，Vue还支持自定义指令。可以考虑通过自定义指令实现以下场景：
DOM的基本操作，当组件中的一些处理无法通过现有指令实现时，可以通过自定义指令来实现。比如组件水印，自动对焦。相对于用ref获取DOM的操作，封装指令更符合MVVM的架构，M和V不直接交互。
将此文本突出显示为亮黄色
多个组件可用的通用操作可以通过使用组件得到很好的重用，功能也可以通过使用组件在组件上重用。例如拼写检查和图片的惰性加载。通过使用组件，只要在需要拼写检查的输入组件中添加标签，就可以在组件中注入拼写检查功能，这样就不需要为不同的组件打包新的支持拼写的功能。
Vue 3如何自定义指令
Vue支持全球注册和本地注册指令。
全局注册通过app实例的directive方法注册。
let app=createApp(App)
app.directive(‘突出显示’，{
安装前(el，binding，vnode) {
El . style . background=binding . value
}
})
通过将指令属性设置为组件来注册本地注册。
导出默认定义组件({
名称：“网页设计师”，
组件：{
设计师，
},
指令：{
突出显示：{
安装前(el，binding，vnode) {
El . style . background=binding . value；
},
},
},
});
组件注册包含组件的名称，并且需要组件的唯一实现对象，所以组装后可以在任何元素上使用。
p v-highlight=”yellow ‘ ‘将此文本突出显示为亮黄色/p
定制一个组件就是实现Vue提供的钩子功能。在Vue 3中，钩子函数的生命周期类似于组件的生命周期：
created-在元素创建后调用，但属性和事件尚未生效。
BeforeMount-仅在指令第一次绑定元素时调用一次。
Mounted-当元素被插入到父元素中时调用。
Update:在Update元素更新自身之前调用。
updated-在元素或子元素更新后调用。
在卸载元素之前调用。
unmounted-当指令被卸载时调用，只调用一次。
每个挂钩函数都有以下参数：
El:由指令绑定的元素，可以用来直接操作DOM。
绑定：包含以下属性的数据对象
实例：当前组件的实例。通常，推荐的指令与组件无关。如果需要使用组件上下文ViewModel，可以从这里获得。
值：指令的值，即上面示例中的“黄色”
OldValue:在beforeUpdate和Updated中，指令的前一个值可以与Value相同。
Arg:传递给指令的参数，如click in v-on:click。
修改器：包含修改器的对象。比如v-on.stop:click可以得到一个{stop:true}对象。
vnode: Vue编译生成的虚拟节点，
Prevvnode:更新时的最后一个虚拟节点
Vue 2指令升级
指令在Vue3中是一个突破性的改变，指令的钩子函数名称和数量发生了变化Vue3中为指令创建了更多的函数，函数名称和组件的生命周期一致，更易理解。
以下是变化介绍
另一个变化是组件上下文对象的获取方式发生了变化。一般情况下推荐指令和组件实例相互独立，从自定义指令内部去访问组件实例，那可能说明这里不需要封装指令，指令就是组件本事的功能。但是可能的确有某些场景需要去获取组件实例。
在Vue 2中通过虚拟节点参数获取
bind(el，binding，vnode) {
const vm=vnode.context
}
在Vue 3中通过有约束力的参数获取
已安装(el，绑定、vnode) {
const vm=binding.instance
}
Vue 3自定义指令实例 输入拼写检查
这里使用插件的方式注入指令。
新建SpellCheckPlugin.ts，声明插件，在插件的安装方法中注入指令
从“vue”导入{应用程序}
函数SpellCheckMain(应用程序：应用程序，选项：任何){
//
}
导出默认值{
安装：SpellCheckMain
}
SpellCheckMain方法实现组件以及，拼写检查方法，具体拼写检查规则可以根据业务或者使用其他插件方法实现
函数SpellCheckMain(应用程序：应用程序，选项：任何){
const SpellCheckAttribute=’ spell-check-El ‘；
let SpellCheckTimer: Mapstring，number=new Map()；
设checker id=0；
函数checkElement(el: HTMLElement) {
设attr=El。get attribute(SpellCheckAttribute)；
如果（属性){
清除超时(spellchecktimer。get(attr))；
let timer=setTimeout(()={ checkElementAsync(El)}，500)；
SpellCheckTimer.set(attr，Timer)
}
}
函数检查文本(单词？string | null):【string？] {
如果(!单词){
return[]；
}
let errorWordList: [string？]=[];
尝试{
让单词列表=单词。火柴(/[a-zA-Z]ig)；
单词列表？forEach((单词)={
如果(!checkWord(word)) {
错误单词列表。推(字)；
}
})
}
接住{
}
返回错误单词列表
}
函数checkWord(text: string) {
//模拟拼写检查，这里使用其他检查库
返回文本。长度6?假：真；
}
函数checkElementAsync(El:html元素){
let text=(el as HTMLInputElement).value | | el.innerText
let result=check text(文本)；
设attr=El。get attribute(SpellCheckAttribute)；
如果(!属性){
返回；
}
if (result result.length) {
el.style.background=’pink ‘
让div=document。getelementbyid(attr)；
如果(!div) {
div=文档。createelement(‘ div ‘)；
div.id=属性
div.style.position=’absolute ‘
div.style.top=’0px ‘
div。风格。left=El。客户端宽度’像素’
if (el.parentElement) {
埃尔。父元素。风格。位置=’相对’
如果(El。父元素。最后一个孩子===El){
埃尔。父元素。appendchild(div)；
}
否则{
埃尔。父元素。在(div，El .之前插入。下一个兄弟姐妹)；
}
}
}
div。innerhtml=结果。长度。tostring()’-‘结果。join(‘，’)；
}否则{
埃尔。风格。背景=” “；
让div=document。getelementbyid(attr)；
if (div) {
div.innerHTML=’ ‘
}
}
console.log(结果)
}
app.directive(‘拼写检查’,{
已创建(){
console.log(‘created ‘)，参数)
},
已安装：函数(el，binding，vnode，oldVnode) {
console.log(‘mounted ‘，参数)
//为父级设置检查器编号
let attr=’拼写检查-‘(检查者id)；
埃尔。set属性(SpellCheckAttribute，attr)；
console.log(‘属性，属性)
如果(El。标记名。toupper case()===’ DIV ‘){
el.addEventListener(‘blur ‘，function () {
检查元素
},假);
}
如果(El。标记名。toupper case()===’ INPUT ‘){
el.addEventListener(‘keyup ‘，function () {
检查元素
},假);
}
//el.addEventListener(‘focus ‘，function () {
//checkElement(el)
//}，false)；
},
更新：函数(el) {
console.log(‘componentUpdated ‘，参数)
检查元素(El)；
},
卸载：函数(el) {
console.log(‘卸载，参数)
设attr=El。get attribute(SpellCheckAttribute)；
如果（属性){
让div=document。getelementbyid(attr)；
if (div) {
div。移除()；
}
}
}
})
}
主页面中使用插件
///引用路径=’。/vue-app.d.ts’ /
从“vue”导入{ createApp }
从’导入应用程序’ App.vue ‘
从’导入路由器。/路由器’
从’导入拼写检查插件/plugins/SpellCheckPlugin
let app=createApp(App)
app.use(拼写检查插件)
app.use(路由器)。挂载(#应用程序)
组件中直接使用指令即可
模板
div ref=’ s host ‘ style=’ width:100%；高度：600像素’/格
divdiv ref=’fbHost ‘拼写检查v-spell-check=’ true ‘ content editable=’ true ‘拼写检查=’ false ‘ style=’ border:1px solid # 808080；宽度：600像素；’/div/div
v拼写检查拼写检查=’ false ‘ style=’ width:200 px；//div
/模板
结合在使用SpreadJS上，基于检查用户拼写输入的功能，效果如下图：
以上就是Vue 3自定义指令开发的相关总结的详细内容，更多关于Vue 3自定义指令开发的资料请关注脚本之家其它相关文章！
来源：脚本之家
链接：https://www。jb51。网/文章/205009。html文件的后缀
