vue3 自定义指令

news2024/11/25 10:54:09

Vue 除了内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令。

 一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

 在setup语法糖中,任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  // 指令被绑定到元素上时调用
  // el: 元素对象
  // binding: 指令相关的信息
  mounted: (el) => {
    console.log(el);
    // 可以在这里操作元素、添加事件监听等
    el.style.color = "red";
    el.addEventListener("click", () => {
      console.log("Directive clicked");
    });
  },
};
</script>

<template>
  <input v-focus />
</template>

效果展示:

 没有使用setup语法糖 的情况下,自定义指令需要通过 directives 选项注册

<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      mounted: (el, binding) => {
        console.log(el);
        console.log(binding);
        el.style.color = "red";
        el.addEventListener("click", () => {
          console.log("Directive clicked");
        });
      },
    },
  },
};
</script>

 也可以在全局进行绑定:

const app = Vue.createApp({});

app.directive('my-directive', {
  mounted(el, binding) {
    el.style.color = 'red';
    el.addEventListener('click', () => {
      console.log('Directive clicked');
    });
  },
});

app.mount('#app');

自定义指令的生命周期

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}
指令的钩子会传递以下几种参数:

el:指令绑定到的元素。这可以用于直接操作 DOM。

binding:一个对象,包含以下属性。

value:传递给指令的值。例如在 v-my-directive="1 + 1" 中,值是 2。
oldValue:之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。
arg:传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 "foo"。
modifiers:一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。
instance:使用该指令的组件实例。
dir:指令的定义对象。
vnode:代表绑定元素的底层 VNode。

prevNode:代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于热交换优化的BP神经网络(分类应用) - 附代码

基于热交换优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于热交换优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.热交换优化BP神经网络3.1 BP神经网络参数设置3.2 热交换算法应用 4.测试结果&#x…

Java Cryptography Tools and Techniques

链接&#xff1a;https://pan.baidu.com/s/1n6tYUtYYL_3Gn_Mjp4QEWg?pwdh23n 提取码&#xff1a;h23n Block and Stream Ciphers Two fundamental types of encryption algorithms are Block Ciphers and Stream Ciphers. Block Ciphers : These work on data blocks of fix…

【想法】取代NI的 PCIe-8371

PCIe-8371 涨价非常厉害。 PCA3 https://www.terasic.com.tw/cgi-bin/page/archive.pl?LanguageEnglish&CategoryNo65&No1143 PCA3 (PCIe Cable Adapter, Gen 3) is a conversion card to connect boards with your host PC. It can support up to PCIe Gen 3 x4. …

C++笔记之popen()和std_system()和std_async()执行系统命令比较

C笔记之popen()和std_system()和std_async()执行系统命令比较 code review! 文章目录 C笔记之popen()和std_system()和std_async()执行系统命令比较1.popen()2.std::system()3.std::async()——C11提供的异步操作库&#xff0c;适合在多线程中执行外部命令&#xff0c;建议使…

计算机毕业设计选什么题目好?springboot 美食推荐系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

【翻译】Efficient Data Loader for Fast Sampling-Based GNN Training on Large Graphs

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 此内容为机器翻译的结果&#xff0c;若有异议的地方&#xff0c;建议查看原文。 机器翻译的一些注意点&#xff0c;比如&#xff1a; 纪元、时代 > epoch工人 > worker火车、培训、训练师 > train Effic…

Codeforces Round 903 (Div. 3)

D. Divide and Equalize Example input Copy 7 5 100 2 50 10 1 3 1 1 1 4 8 2 4 2 4 30 50 27 20 2 75 40 2 4 4 3 2 3 1 output Copy YES YES NO YES NO YES NONote The first test case is explained in the problem statement. 很重要很重要的知识点&a…

如何使用JMeter测试导入接口/导出接口

今天一上班&#xff0c;被开发问了一个问题&#xff1a;JMeter调试接口&#xff0c;文件导入接口怎么老是不通&#xff1f;还有导出文件接口&#xff0c;不知道文件导到哪里去了&#xff1f; 我一听&#xff0c;这不是JMeter做接口测试经常遇到的嘛&#xff0c;但是一时半会又…

【爬虫实战】用pyhon爬百度故事会专栏

一.爬虫需求 获取对应所有专栏数据&#xff1b;自动实现分页&#xff1b;多线程爬取&#xff1b;批量多账号爬取&#xff1b;保存到mysql、csv&#xff08;本案例以mysql为例&#xff09;&#xff1b;保存数据时已存在就更新&#xff0c;无数据就添加&#xff1b; 二.最终效果…

PLC和工控机的网络特性

现场总线技术是工业自动化***深刻变革之一。PLC和工控机采用现场总线后可方便地作为I/O站和监控站连接在DCS系统中。现场总线是一种取代4&#xff5e;20mA标准&#xff0c;用于连接智能现场设备和控制设备的双向数字通讯技术&#xff0c;现场总线具有开放性和互操作性&#xff…

MongoDB 集群配置

一、副本集 Replica Sets 1.1 简介 MongoDB 中的副本集&#xff08;Replica Set&#xff09;是一组维护相同数据集的 mongod 服务。 副本集可提供冗余和高可用性&#xff0c;是所有生产部署的基础。 也可以说&#xff0c;副本集类似于有自动故障恢复功能的主从集群。通俗的讲就…

视觉里程计- 位姿

SLAM中的位姿概念对新手很难&#xff0c;这里讨论下。首先放出一张图&#xff0c;下文会反复说道这张图。 注意到位姿节点之间的变换并不是位姿&#xff0c;之前一直有误解&#xff1b;一般地有如下概念&#xff1a; 路标节点&#xff1a;也就是观测方程【数学形式下见】的观测…

运算放大器基本原理与参数解读-优先看

运算放大器基本原理与参数解读 运算放大器的出现&#xff0c;大大降低了硬件模拟前端电路设计的难度。但是对于高精度的模拟信号处理电路中&#xff0c;用好运放也不是一件容易的事&#xff0c;更不用说压着最低的物料成本设计出符合系统要求的运放电路了。高端的电路往往蕴含着…

第二证券:跨行转账为什么迟迟不到账?

现在&#xff0c;越来越多的人挑选使用跨行转账来结束日常资金生意。不过&#xff0c;有时候在进行跨行转账时&#xff0c;或许会出现迟迟不到账的状况。这种状况常常让人感到困惑和焦虑。所以&#xff0c;我们需求深入分析这个问题&#xff0c;找出原因&#xff0c;以便可以防…

光伏PV三相并网逆变器MATLAB/Simulink仿真分析

微❤关注“电击小子程高兴的MATLAB小屋”获得资料&#xff08;专享优惠&#xff09; 光伏PV三相并网逆变器Matlab/Simulink仿真 光伏PV三相并网逆变器MATLABf仿真下载 引言&#xff1a; 随着可再生能源的日益重视和发展&#xff0c;光伏发电系统在电力系统中的地位越来越重…

C/C++笔试易错题+图解知识点(二)—— C++部分(持续跟新中)

目录 1.构造函数初始化列表 1.1 构造函数初始化列表与函数体内初始化区别 1.2 必须在初始化列表初始化的成员 2. 引用初始化以后不能被改变&#xff0c;指针可以改变所指的对象 1.构造函数初始化列表 有一个类A&#xff0c;其数据成员如下&#xff1a; 则构造函数中&#xff0c…

vue项目打包,使用externals抽离公共的第三方库

封装了一个插件&#xff0c;用来vue打包抽离公共的第三方库&#xff0c;使用unplugin进行插件开发&#xff0c;vite对应的功能使用了vite-plugin-externals进行二次开发 github地址 npm地址 hfex-auto-externals-plugin 自动注入插件,使用 unplugin 和 html-webpack-plugin进…

01 | Spring Data JPA 初识

Spring Boot 和 Spring Data JPA 的 Demo演示 我们利用 JPA Spring Boot 简单做一个 RESTful API 接口&#xff0c;方便你来了解 Spring Data JPA 是干什么用的&#xff0c;具体步骤如下。 第一步&#xff1a;利用 IDEA 和 SpringBoot 2.3.3 快速创建一个案例项目。 点击“…

2.MySQL表的操作

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 表的操作 (1)表的创建 CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储引擎; 存储引擎的不同会导致创建表的文件不同。 换个引擎。 t…

【C语言】结构体、位段、枚举、联合(共用体)

结构体 结构&#xff1a;一些值的集合&#xff0c;这些值称为成员变量。结构体的每个成员可以是不同类型的变量&#xff1b; 结构体声明&#xff1a;struct是结构体关键字&#xff0c;结构体声明不能省略struct&#xff1b; 匿名结构体&#xff1a;只能在声明结构体的时候声…