当前位置： 首页 > news >正文

Vue3学习笔记（9.4）

news 2025/9/23 7:10:20

Vue3自定义指令

除了默认设置的核心指令（v-model和v-show），Vue也允许注册自定义指令。

下面我们注册一个全局指令v-focus，该指令的功能是在页面加载时，元素获得焦点：

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-04 19:26:07* @LastEditors: Mei* @LastEditTime: 2023-04-04 19:32:33* @FilePath: \vscode\v-focus.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue_doc/vue.global3.js"></script>
</head>
<body><div id="app"><p>页面加载时，input元素自动获取焦点</p><input v-focus></div><script>const app=Vue.createApp({})app.directive('focus',{mounted(element){element.focus()}})app.mount('#app')</script>
</body>
</html>

 我们也可以在实例中使用directives选项来注册局部指令，这样指令只能在这个实例中使用：

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-04 19:26:07* @LastEditors: Mei* @LastEditTime: 2023-04-04 19:40:52* @FilePath: \vscode\v-focus.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue_doc/vue.global3.js"></script>
</head>
<body><div id="app"><p>页面加载时，input元素自动获取焦点</p><input v-focus></div><script>const app={data(){return{}},directives:{focus:{mounted(el){el.focus()}}}}// directive('focus',{//     mounted(element){//         element.focus()//     }// })// app.mount('#app')Vue.createApp(app).mount('#app')</script>
</body>
</html>

 钩子

钩子函数

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

created：在绑定元素的属性或事件监听器被应用之前调用。

beforeMount:指令第一次绑定到元素并且在挂载父组件之前调用

mounted:在绑定元素的父组件被挂载后调用

beforeUpdate:在更新包含组件的VNode之前调用

updated：在包含组件的VNode及其子组件的VNode更新后调用。

beforeUNmount：当指令与在绑定元素父组件卸载之前时，只调用一次。

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

import { createApp } from 'vue'
const app = createApp({})// 注册
app.directive('my-directive', {// 指令是具有一组生命周期的钩子：// 在绑定元素的 attribute 或事件监听器被应用之前调用created() {},// 在绑定元素的父组件挂载之前调用beforeMount() {},// 绑定元素的父组件被挂载时调用mounted() {},// 在包含组件的 VNode 更新之前调用beforeUpdate() {},// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用updated() {},// 在绑定元素的父组件卸载之前调用beforeUnmount() {},// 卸载绑定元素的父组件时调用unmounted() {}
})// 注册 (功能指令)
app.directive('my-directive', () => {// 这将被作为 `mounted` 和 `updated` 调用
})// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

钩子函数参数

钩子函数参数由：

el

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

binding

binding是一个对象，包含以下属性：

instance：使用指令的组件实例

value：传递给指令的值。例如v-my-directive="1+1"中，该值为2

oldValue：先前的值，仅在beforeUpdate和updated中可用。值是否已更改都可用。

arg：参数传递给指令（如果有）。例如在v-my-directive：foo中，arg为“foo”。

modifiers：包含修饰符（如果有）的对象。例如在v-my-directive.foo.bar中，修饰对象为{foo:true,bar:true}。

dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中：

app.directive('focus', {mounted(el) {el.focus()}
})

dir将会是以下对象：

{mounted(el) {el.focus()}
}

vnode

作为el参数收到的真实DOM元素的蓝图。

prevNode

上一个虚拟节点，仅在beforeUpdate和updated钩子中可用。

以下实例演示了这些参数的使用：

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-04 19:26:07* @LastEditors: Mei* @LastEditTime: 2023-04-04 20:04:41* @FilePath: \vscode\v-focus.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue_doc/vue.global3.js"></script>
</head>
<body><div id="app"><div v-mez="{name:'爱坤',url:'www.Ikun.com'}"></div></div><script>const app=Vue.createApp({})// const app={//     data(){//         return{//         }//     },//     directives:{//         focus:{//             mounted(el){//                 el.focus()//             }//         }//     }// }app.directive('mez',(el,binding,vnode)=>{console.log(binding.value.name)console.log(binding.value.url)var s=JSON.stringifyel.innerHTML=s(binding.value)})app.mount('#app')// Vue.createApp(app).mount('#app')</script>
</body>
</html>

 有时我们不需要其他钩子函数，我们可以简写函数，如下格式：
 

Vue.directive('mez', function (el, binding) {// 设置指令的背景颜色el.style.backgroundColor = binding.value.color
})

指令函数可接受所有合法的JavaScript表达式，以下实例传入了JavaScript对象：

继续搞起，在原实例基础上加入JavaScript对象，改变了背景色

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2023-04-04 19:26:07* @LastEditors: Mei* @LastEditTime: 2023-04-04 20:09:08* @FilePath: \vscode\v-focus.html* @Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue_doc/vue.global3.js"></script>
</head>
<body><div id="app"><div v-mez="{name:'爱坤',url:'www.Ikun.com',color:'yellow'}"></div></div><script>const app=Vue.createApp({})// const app={//     data(){//         return{//         }//     },//     directives:{//         focus:{//             mounted(el){//                 el.focus()//             }//         }//     }// }app.directive('mez',(el,binding,vnode)=>{console.log(binding.value.name)console.log(binding.value.url)var s=JSON.stringifyel.innerHTML=binding.value.nameel.style.backgroundColor=binding.value.color})app.mount('#app')// Vue.createApp(app).mount('#app')</script>
</body>
</html>

 

相关文章：

Vue3学习笔记（9.4）

Vue3自定义指令 除了默认设置的核心指令&#xff08;v-model和v-show&#xff09;&#xff0c;Vue也允许注册自定义指令。 下面我们注册一个全局指令v-focus&#xff0c;该指令的功能是在页面加载时&#xff0c;元素获得焦点&#xff1a; <!--* Author: RealRoad10834252…...

编程日记 2023/5/11 14:08:49

导入 Excel 文件时，抛出 413 (Request Entity Too Large) 错误

Excel文件大小&#xff1a;8MB 异常信息&#xff1a;413 (Request Entity Too Large) 环境&#xff1a;IIS10PHP7.2.33 依次检查如下几项&#xff1a; 一、php.ini Maximum amount of memory a script may consume (128MB) 限制代码消耗的最大内存&#xff0c;默认128…...

编程日记 2023/5/24 1:30:18

Verilog学习笔记1——关键词、运算符、数据类型、function/task、initial/always、generate

文章目录前言一、关键词二、运算符三、数据类型1、基本类型&#xff1a;reg、wire、integer、parameter四、条件语句五、循环语句1、for2、generate六、function和task七、initial和always1、initial和always相同点和区别2、always和assign语句区别前言 2023.4.4 2023.4.7 补充…...

编程日记 2023/5/15 3:03:23

探索LeetCode【0005】最长回文子串（未搞懂，未练习）

目录0、题目1、第一个官方答案1.1 动态规划&#xff08;未懂&#xff09;1.2 中心扩展&#xff08;已懂&#xff09;1.3 Manacher&#xff08;未懂&#xff09;2、第二个参考答案2.1 暴力求法&#xff08;已懂&#xff09;2.2 反转法&#xff08;未懂&#xff09;2.3 动态规划&…...

编程日记 2023/5/29 5:31:06

使用 Docker run 命令简化容器化

使用 Docker run 命令简化容器化 Docker run 是在 Docker 容器中运行应用程序的基本命令。在开始使用 Docker 之前&#xff0c;了解一些重要的命令非常重要。 在本博客中&#xff0c;我们将解释 Docker run 命令的基本语法&#xff0c;并探索其一些最常见的选项&#xff0c;以…...

编程日记 2023/5/28 0:27:25

腾讯TNN神经网络推理框架手动实现多设备单算子卷积推理

文章目录前言1. 简介2. 快速开始2.1 onnx转tnn2.2 编译目标平台的 TNN 引擎2.3 使用编译好的 TNN 引擎进行推理3. 手动实现单算子卷积推理(浮点)4. 代码解析4.1 构建模型(单卷积层)4.2 构建解释器4.3 初始化tnn5. 模型量化5.1 编译量化工具5.2 量化scale的计算5.3 量化流程6. i…...

编程日记 2023/5/25 15:24:36

基础解惑：Linux 下文件描述符标志和文件状态标志区别

简述 文件描述符标志&#xff0c;是体现进程的文件描述符的状态&#xff0c;fork进程时&#xff0c;文件描述符被复制&#xff1b;目前只有一种文件描述符&#xff1a;FD_CLOEXEC文件状态标志&#xff0c;是体现进程打开文件的一些标志&#xff0c;fork时不会复制file 结构&am…...

编程日记 2023/5/27 5:50:39

学弟：如何在3个月内学会自动化测试？

有小学弟问&#xff1a;如何在3个月内学会自动化测试&#xff1f; 老实说如果你现在上班&#xff0c;之前主要在做功能测试&#xff0c;或者编程基础比较弱的话&#xff0c;三个月够呛。 如果你是脱产学习&#xff0c;每天能保持6&#xff5e;8小时学习时间的话&#xff0c;可…...

编程日记 2023/6/1 6:57:55

C-NCAP 2025主动安全ADAS测试研究

中汽中心汽车测评管理中心&#xff08;简称“中汽测评”&#xff09;是负责运营C-NCAP、CCRT等测评项目的管理机构。中汽测评以引领汽车行业进步、支撑汽车强国建设为使命&#xff0c;通过独立、公正、专业、开放的测试评价&#xff0c;服务消费者&#xff0c;当好选车购车参谋…...

编程日记 2023/5/27 14:06:45

【Apifox】测试工具自动编写接口文档

在开发过程中&#xff0c;我们总是避免不了进行接口的测试&#xff0c; 而相比手动敲测试代码&#xff0c;使用测试工具进行测试更为便捷&#xff0c;高效 今天发现了一个非常好用的接口测试工具Apifox 相比于Postman&#xff0c;他还拥有一个非常nb的功能&#xff0c; 在接…...

编程日记 2023/4/11 22:19:14

解决brew安装opencv报错问题

目录1.报错12. 解决方案3. 报错24. 解决方案4.1 原因分析4.2 手动下载portable-ruby-2.6.8_1.el_capitan.bottle.tar.gz4.3 拷贝portable-ruby-2.6.8_1.el_capitan.bottle.tar.gz到指定目录1.报错1 mac本用brew报如下错误&#xff1a; xialiangzhideMacBook-Pro:~ xialz$ bre…...

编程日记 2023/5/22 4:01:05

Linux软件安装---Tomcat安装

安装Tomcat 操作步骤&#xff1a; 使用xftp上传工具将tomcat的 二进制发布包上传到Linux解压安装包&#xff0c;命令为tar -zxvf apache-tomcat*** -C /usr/local进入Tomcat的bin的启动目录&#xff0c;命令为sh startup.sh或者./startup.sh 验证Tomcat启动是否成功&#xff0…...

编程日记 2023/5/24 20:43:53

提示工程师是什么工作？

提示工程师是什么工作&#xff1f; 因为ChatGPT的爆火&#xff0c;大家都把眼光锁定在这个号称“ChatGPT新兴职业” 的“提示工程师”上。“提示工程师”是什么工作&#xff1f;为什么说未来所有职业 都需要提示工程的能力&#xff1f; 先解释一下“提示”&#xff0c;它最早…...

编程日记 2023/5/31 22:27:45

WXSS-WXML-WXS语法

目录&#xff1a; 1 WXSS编写程序样式 2 Mustache语法绑定 3 WXML的条件渲染 4 WXML的列表渲染 5 WXS语法基本使用 6 WXS语法案例练习 小程序的自适应单位rpx。在设计稿为iPhone6的时候1px2rpx wxml必须是闭合标签&#xff0c;或者单标签加/&#xff0c;否则会报错&#…...

编程日记 2023/5/24 20:44:28

POSIX正则表达式

维基百科 POSIX基本表达式 https://en.wikibooks.org/wiki/Regular_Expressions/POSIX_Basic_Regular_Expressions POSIX扩展正则表达式 https://en.wikibooks.org/wiki/Regular_Expressions/POSIX-Extended_Regular_Expressions 正则表达式 https://en.wikipedia.org/wiki/R…...

编程日记 2023/5/23 7:13:44

数据分析工具集合：Tableau入门及其他工具简介

目录 一、Tableau简介 1、下载链接 2、使用技巧 二、其他常用数据分析工具 1、Microsoft Excel简介 1.1、下载链接 1.2、使用技巧 2、Python简介 2.1、下载链接 2.2、常用库的安装方式和使用技巧 2.2.1、Pandas 2.2.2、NumPy 2.2.3、Matplotlib 3、R语言简介 3.…...

编程日记 2023/5/28 18:28:10

响应式布局的五种方法

响应式布局的五种方法1.百分比布局2.rem布局3. 媒体查询 media screen4. flex布局5.vw 和 vh响应式布局是同一页面在不同的屏幕上有不同的布局&#xff0c;即只需要一套代码使页面适应不同的屏幕。 1.百分比布局 1.有父元素就相对于父元素 2.没有父元素就相对于视口的大小 举一…...

编程日记 2023/5/9 8:54:54

Javase学习文档------数组

Java 数组是 Java 编程中非常基础和重要的一个知识点。 以下是 Java 数组的主要学习内容&#xff1a; 数组的几个特点 数组在声明时必须指定长度&#xff0c;且长度不可变&#xff1a;数组的长度在声明时就需要确定&#xff0c;一旦确定就不能修改。因此&#xff0c;在使用数组…...

编程日记 2023/5/23 16:24:00

百度高德地图JS-API学习手记:地图基本设置与省市区数据加载

无论是百度还是高德地图开发&#xff0c;还是高德地图开发。官方的给的案例启示很多&#xff0c;copy再修改下&#xff0c;就完成了 概述-地图 JS API | 高德地图API 地图 JS API | 百度地图API SDK 这个大致看一下&#xff0c;我想。有点GIS基础都能完成地图开发。 个人认…...

编程日记 2023/4/23 0:19:33

c语言—指针详解***内存地址***指针字节数***注意事项

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…...

编程日记 2023/5/14 16:41:02

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/9/22 18:34:18

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/9/20 21:10:11

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/9/22 19:37:17

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/9/22 4:11:37

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/9/23 1:00:09

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/7/13 23:45:42

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

编程新知 2025/9/22 4:48:50