vue3中使用全局自定义指令和组件自定义指令

这篇文章会教大家如何实现全局自定义指令和组件自定义指令

        📓全局自定义指令和组件自定义指令的区别,除了写法不同和作用不同,其他的包括生命周期的使用方法都是一致的,全局自定义指令在main.ts中注册后整个项目都可以使用,而组件自定义指令只能在组件中注册,并且在组件中使用。

1,全局自定义指令

        📓首先我们可以了解下为什么要创建全局自定义指令,首先,vue官方给我们提供了一些指令,那些指令虽然很强大,但是有可能会不适合当前公司的一个开发的实际的业务逻辑,所以这时候我们就得需要通过官方提供的方法创建输入自己的指令了。

        📓下面根据我的思路来一步步的设计全局自定义组件吧

1.1 创建组件的执行函数

         📓在项目中新建文件夹directive,在文件夹里新建idnex.ts文件,在文件里写处理逻辑

        

1.2 在里面写写我们的指令的生命周期和处理代码

export default {
  click: {
      beforeMount(el:any, binding:any, vnode:any) { //元素被挂载到dom之前调用
        console.log('beforeMount');
      },
      mounted(el:any, binding:any, vnode:any) {//元素被挂载到dom之后调用
        console.log('mounted');
      },
      beforeUpdate(el:any, binding:any, vnode:any, prevvnode:any) {//vnode(虚拟节点)更新前调用
        console.log('beforeUpdate');
      },
      updated(el:any, binding:any, vnode:any, prevvnode:any) {//vnode(虚拟节点)更新后调用
        console.log('updated');
      },
      beforeUnmount(el:any, binding:any, vnode:any) {//vnode(虚拟节点)卸载前调用
        console.log('beforeUnmount');
      },
      unmounted(el:any, binding:any, vnode:any) {//vnode(虚拟节点)卸载后调用
        console.log('unmounted');
      },
    
  },
};

       📓如上方所示,vue的创建指令的方法,处理接受指令名称的话,还需要接受我们指令的生命周期,vue创建指令的方法接受2个参数,第一个参数是指令名称,第二个参数是对象,对象里面的属性是指令的生命周期,属性值就是在当前生命周期所要执行的函数。       

 这里在解释下,为什么要元素要挂在到dom上还有解释什么是vnode

        📓 首先你页面中的元素,最终都会变成真正的dom元素,并讲这个元素放在页面上,这个过程解释挂载,在挂载这个元素之前,vue首先会创建组件的vnode,也就是虚拟节点,然后在将组件的虚拟节点(vnode)转换成真实的dom元素,并将其插入到页面的特定位置上去,所以这就是vnode,元素在页面上显示之前需要在vnode上创建虚拟节点

       📓至于为什么要将元素挂载到dom,我们知道,vue的整个体系,都是需要dom来支撑的,因为只有将元素插入到dom中,这个元素才会在页面上显示,而且只有将这个元素插入挂载到dom中,vue才能管理他的生命周期,响应式,事件处理等。

 指令的生命周期和组件的生命周期很相似。很多地方都基本一致

  1.3 在main.ts中注册指令

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import store from "./store";
import dir from "./directive/index"; //从这里导入我们创建的指令的生命周期

const app = createApp(App); //创建app实例
 
app.directive("myDirective", dir.click); //注册指令需要调用app的directive方法,这个方法传入2个参数第一个参数就是我们的组件名称,第二个参数就是我们在directive文件夹里写的对象,对象里有指令的生命周期方法

app.use(router).use(ElementPlus).use(store).mount("#app");

 这里要注意下,注册指令一定要比挂载app之前,要比mount("#app")更早执行!!!,不然会注册失败

1.4 在页面上使用

         📓当我们注册完成后,就能在元素上使用了,如下

    <div>
        <button v-myDirective>{{ butt }}</button>
        <button @click="buttfn">修改 </button>
        <RouterView />
    </div>

         📓这里我给button加上了一个指令,这里要注意下,我们在页面上使用指令时,得在我们注册时写的指令名称前加上 v- 

1.5 获取元素的dom,并修改

        📓现在在页面上元素使用,还不算达到我们的预期,这时候我们需要看如何操作元素,这才算达到我们的预期,首先,我们在directive文件夹里,找到我们定义的指令生命周期,生命周期的属性值接受一些参数,我们打印下这些参数是啥

看下页面上显示的结果

 📓我们能看到,el居然是我们在页面上绑定元素的元素对象,我们可以通过这个元素对象来修改这个元素的属性,或者是进行一些事件操作了。

 📓比如,我要修改元素的颜色

 📓这时候还是有些不够的,假设,我们想实现一个@click的功能,如果用指令实现咧,这时候我们就需要靠函数中另外一个参数binding,通过这个参数来接收从页面上传入的一些值,包括函数,

 📓我们在页面上定义一个函数,通过  指令="函数" 的方法,将指令传给函数

<template>
    <div>
        <button v-myDirective = "butt">{{ butt }}</button> //将函数传给指令
        <RouterView />
    </div>
</template>
<script lang="ts">
import router from '@/router'
import { ref } from "vue"
export default ({
    setup() {
        const butt = ref("跳转")
        const fn = () => {  //定义一个函数
            router.push("/user")
        }
        return {
            fn,butt
        }
    }
})

</script>

 📓在我们的指令生命周期函数里,就能接受这个函数,并写入跳转的指令

export default {
  click: {
    mounted(el: any, binding: any) {//元素被挂载到dom之后调用
      el.addEventListener("click",binding.instance.fn)  //通过binding.instance来获取我们之前传入的参数,在通过这个元素对象写入一个点击事件,就实现了类似于@click一样的功能了
    },
  },
};

 📓这样,我们的自定义指令也有和@click一样的功能啦,这只是简单的用法,当配合指令的生命周期函数后,能够实现的东西非常非常的多。

2,组件自定义指令

       📓  组件自定义指令的生命周期和用法和全局自定义指令的用法一致,只是写法不同而已,看下方的例子

        

<template>
    <div>
        <button v-myDirective = "butt">{{ butt }}</button>
        <div v-color = "'red'">我是组件内指令</div>   //2.将定义好的组指令放在页面上使用
        <RouterView />
    </div>
</template>
<script lang="ts">
import router from '@/router'
import { ref } from "vue"
export default ({
    setup() {
        const butt = ref("跳转")
        const fn = () => {
            router.push("/user")
        }
        return {
            fn,butt
        }
    },
    directives:{  //1.在组件里添加directives属性,属性值是对象,对象的属性就是我们的指令名称,属性值也是一个对象,在对象里写生命周期函数即可
        color:{
            mounted(el:any,bind:any){
                el.style.color=bind.value
            
            }
        }
    }
})

</script>

最近烦心的事不少,感觉诸事不顺,从来没觉得这样过。因为一件事情的出现,导致我的梦想,我的一切规划,都没了 ,很难过,愁啊。不知道如何取舍,感觉都在将他们的想法强加给我,用所谓的大义来压我。很累很累

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/172126.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

每日一题(LeetCode)----链表--两两交换链表中的节点

每日一题(LeetCode)----链表–两两交换链表中的节点 1.题目&#xff08;[24. 两两交换链表中的节点](https://leetcode.cn/problems/spiral-matrix/)&#xff09; 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内…

网站迁移到HTTPS,如何避免内容重复?

我们常说安装SSL证书不是件难事&#xff0c;但将网站迁移到HTTPS的过程却不那么容易。你不是真的在重新建立一个网站&#xff0c;但如果出了差错&#xff0c;百度会误认为这是个新网站&#xff0c;还可能判定你的网站内容重复。原因归结于你将使用不同的协议来呈现整个网站。HT…

python内容榜第三名

这是家常帖。 最近沉迷整理知识&#xff0c;和大家一起共同学习&#xff0c;共同进步。 越来越爱写博客被大家阅读认可的感觉了。我辛苦学习总结来的成果被大家喜爱。 今天荣登python领域内容榜 榜三&#xff0c;给了我很大的信心去坚持做这件事&#xff0c;知识传播&#xf…

CTF-栈溢出-基本ROP-【ret2syscall】

文章目录 ret2syscallBxMCTF 2023 Anti-Libcmainwrite_bufflush_obufreadintread_buf 思路exp ret2syscall 即控制程序执行系统调用&#xff0c;获取 shell。 BxMCTF 2023 Anti-Libc main write_buf 写入字符的&#xff0c;待会输出 flush_obuf 把字符输出到屏幕 read…

前景一片蓝海,Android音视频开发必备基础知识汇总

转瞬间&#xff0c;2023 已慢慢步入深冬&#xff0c;回首过去一年&#xff0c;音视频技术在经历一番风浪的侵袭过后&#xff0c;变得逐渐相对平静下来。 “内卷”之外&#xff0c;大家似乎更多了一份“理性”指导我们去做一些正确的事&#xff0c;追求技术在商业中的更高价值。…

华为ac+fit无线2层漫游配置案例

ap的管理dhcp在ac上&#xff0c;业务dhcp在汇聚交换机上、并且带2层漫游 R1: interface GigabitEthernet0/0/0 ip address 11.1.1.1 255.255.255.0 ip route-static 12.2.2.0 255.255.255.0 11.1.1.2 ip route-static 192.168.0.0 255.255.0.0 11.1.1.2 lsw1: vlan batch 100…

[AutoSar]在Davinci Configurator中导入Dbc Cdd 文件

目录 关键词平台说明一、实现步骤1.1 添加相关模块1.2 导入文件1.3 加载完成后点next而不是finish1.4 更新配置1.5 解决错误 关键词 嵌入式、C语言、autosar 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&#xff0c;C编译器HighTec (GCC) 一、实现…

SpringCloud原理-OpenFeign篇(二、OpenFeign包扫描和FeignClient的注册原理)

文章目录 前言正文一、从启动类开始二、EnableFeignClients 的源码分析三、Import FeignClientsRegistrar 的作用四、FeignClientsRegistrar#registerFeignClients(...)五、饥饿注册&懒注册 FeignClientsRegistrar#registerFeignClient(...)六、通过Holder真正注册beanDefi…

kafka原理看这一篇就够了

为何使用消息队列 异步。接口方式实现多个系统协作&#xff0c;如图A系统作为用户请求接收方&#xff0c;需要调用多个系统的接口&#xff0c;这些接口还有可能是在A系统里同步调用&#xff0c;所以最后的接口耗时是多个系统接口耗时的总和&#xff1b;mq方式则可以异步发送消…

终于有人把数据资产入表知识地图总结出来了,轻松看懂

在当前数字化的浪潮下&#xff0c;数据已经成为劳动、土地、知识、技术以后的第五大生产要素&#xff0c;“数据就是资源”已成为共识。如今数据资产“入表”已成定局&#xff0c;数据资产化迫在眉睫。 2023年8月21日&#xff0c;财政部正式印发《企业数据资源相关会计处理暂行…

[Linux] 进程入门

&#x1f4bb;文章目录 &#x1f4c4;前言计算机的结构体系与概念冯诺依曼体系结构操作系统概念目的与定位 进程概念描述进程-PCBtask_struct检查进程利用fork创建子进程 进程状态进程状态查看僵尸进程孤儿进程 &#x1f4d3;总结 &#x1f4c4;前言 作为一名程序员&#xff0c…

Django学习日志09

choices参数的使用 """对于以上可能被我们列举完的字段我们一般都是选择使用choices参来做""" class UserInfo(models.Model):username models.CharField(max_length64)password models.CharField(max_length32)# 先写一个映射关系gender_cho…

从零开始的搭建指南:开发高效的抖音预约服务小程序

预约服务小程序提高了效率&#xff0c;节省了用户时间。下文&#xff0c;小编将与大家一同探讨如何从零开始打造预约服务小程序。 第一步&#xff1a;明确需求和目标 确定你的小程序主要服务领域是什么&#xff1f;是医疗预约、美容美发、餐厅预订还是其他行业&#xff1f;明…

【C++ 学习 ㊴】- 详解 C++ 的 I/O 流

目录 一、C 的 I/O 流 二、C 的标准 I/O 流 三、C 的文件 I/O 流 一、C 的 I/O 流 C 语言有一套完成数据读写&#xff08;I/O&#xff09;的解决方案&#xff1a; 使用 scanf()、gets() 等函数从键盘读取数据&#xff0c;使用 printf()、puts() 等函数向屏幕输出数据&#…

Web前端—移动Web第三天(移动Web基础、rem、less、综合案例—极速问诊)

版本说明 当前版本号[20231120]。 版本修改说明20231120初版 目录 文章目录 版本说明目录移动 Web 第三天01-移动 Web 基础谷歌模拟器屏幕分辨率视口二倍图适配方案 02-rem简介媒体查询rem 布局flexible.jsrem 移动适配 03-less注释运算嵌套变量导入导出禁止导出 04-综合案例…

【用unity实现100个游戏之16】Unity程序化生成随机2D地牢游戏2(附项目源码)

文章目录 先看看最终效果前言生成走廊生成房间修复死胡同增加走廊宽度获取走廊位置信息集合方法一方法二 源码完结 先看看最终效果 前言 上期已经实现了房间的生成&#xff0c;本期紧跟着上期内容&#xff0c;生成走廊并结合上期内容生成连通的房间。 生成走廊 修改Procedur…

WPF Button点击鼠标左键弹出菜单

目录 ContextMenu介绍WPF实现点击鼠标左键弹出菜单如何禁用右键菜单如何修改菜单样式菜单位置设置 本篇博客介绍WPF点击按钮弹出菜单&#xff0c;效果如下&#xff1a; 菜单的位置、央视可以自定义。 实现技巧&#xff1a;不在xaml里菜单&#xff0c;在按钮左键按下的点击事件里…

Linux系统编程 系统编程概念

1.系统调用 系统调用&#xff08;system call&#xff09;其实是 Linux 内核提供给应用层的应用编程接口&#xff08;API&#xff09;&#xff0c;是 Linux 应用层进入内核的入口。不止 Linux 系统&#xff0c;所有的操作系统都会向应用层提供系统调用&#xff0c;应用程序通过…

每日汇评:美日在两个月低点附近似乎较为脆弱,熊市可能会在FOMC会议纪要公布前暂停

美元/日元跌至两个月低点&#xff0c;并受到多种因素的压力&#xff1b; 美联储鸽派预期和美国债券收益率下降继续令美元承压&#xff1b; 美日利差缩小以及日本央行政策转变的押注提振了日元&#xff1b; 美元/日元货币对在周二持续第四天承受着沉重的卖压&#xff0c;同时也标…

jenkins-2.426.1-1.1.noarch.rpm 的公钥没有安装

执行命令 yum install jenkins 报错 jenkins-2.426.1-1.1.noarch.rpm 的公钥没有安装 下载的软件包保存在缓存中&#xff0c;直到下次成功执行事务。 您可以通过执行 yum clean packages 删除软件包缓存。 错误&#xff1a;GPG 检查失败 解决办法&#xff1a; 1、安装新的公…