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

Vue3学习笔记（9.4）

news 2026/4/1 22:07:57

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

汽车动力性能计算工具插件：一键测算电机需求与整车性能，工程师专属轻量级辅助软件

温馨提示&#xff1a;文末有联系方式插件核心功能亮点 本款汽车动力性系统专用计算小工具&#xff0c;可精准推演电机功率与扭矩需求&#xff0c;同步输出整车加速性能、最大爬坡度、最高稳定车速等关键动力参数&#xff0c;覆盖常规工况与典型驱动场景&#xff0c;满足前期方案…...

编程新知 2026/4/1 21:28:31

别再傻傻分不清HIL和SIL了！用NI PXI和Simulink手把手教你搭建第一个测试环境

从零开始搭建HIL/SIL测试环境&#xff1a;NI PXI与Simulink实战指南 刚接触在环测试的工程师常常被各种术语搞得晕头转向——HIL、SIL、MIL&#xff0c;它们到底有什么区别&#xff1f;更重要的是&#xff0c;接到一个控制器测试任务时&#xff0c;该如何从零开始搭建测试环境&…...

编程新知 2026/4/1 20:52:04

OpenCV轮廓匹配避坑指南：用cv2.matchShapes做形状识别，为什么你的结果总不准？

OpenCV轮廓匹配避坑指南&#xff1a;为什么你的cv2.matchShapes结果总是不准&#xff1f; 在工业质检、医疗影像分析等场景中&#xff0c;形状匹配的准确性直接影响着整个系统的可靠性。许多开发者在使用OpenCV的cv2.matchShapes函数时&#xff0c;明明按照官方文档操作&#x…...

编程新知 2026/4/1 20:25:48

YOLOv5+Swin-Tiny实战：在自定义数据集上提升小目标检测精度的完整流程

YOLOv5与Swin-Tiny融合实战&#xff1a;工业级小目标检测优化指南 在无人机巡检、遥感监测和工业质检等场景中&#xff0c;小目标检测一直是计算机视觉领域的棘手挑战。传统卷积神经网络(CNN)在处理这类任务时&#xff0c;往往难以兼顾感受野与计算效率的平衡。本文将带您探索如…...

编程新知 2026/4/1 20:25:45

别再只盯着数据了！用Arduino+GP2Y1014AU传感器，手把手教你做个能“看见”空气的PM2.5监测仪

用Arduino打造智能PM2.5监测仪&#xff1a;从硬件连接到可视化交互 在空气质量日益受到关注的今天&#xff0c;拥有一个实时监测PM2.5浓度的设备不仅能提升生活品质&#xff0c;还能为健康保驾护航。不同于市面上千篇一律的商用监测仪&#xff0c;自己动手打造一个兼具实用性和…...

编程新知 2026/4/1 18:56:54

LangChain框架使用说明

LangChain框架的安装与环境配置 LangChain的安装可通过Python包管理器快速完成。核心库包括langchain、langchain-community和langchain-core&#xff0c;建议使用以下命令进行完整安装&#xff1a; pip install langchain langchain-community langchain-core openai环境配…...

编程新知 2026/4/1 18:34:20

4款GitHub热门浏览器自动化工具横向评测：哪款最适合你的开发需求？

4款GitHub热门浏览器自动化工具横向评测&#xff1a;哪款最适合你的开发需求&#xff1f; 在数字化转型浪潮中&#xff0c;浏览器自动化已成为提升开发效率的关键技术。无论是日常的数据采集、自动化测试&#xff0c;还是复杂的AI代理交互&#xff0c;选择一款合适的工具往往能…...

编程新知 2026/4/1 17:22:37

专业级foobar2000个性化配置方案：提升音乐管理效率的foobox-cn

专业级foobar2000个性化配置方案&#xff1a;提升音乐管理效率的foobox-cn 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn foobox-cn是一套针对foobar2000音乐播放器的专业级DUI&#xff08;DirectUI…...

编程新知 2026/4/1 16:57:22

从CNN到Mamba：为什么这个轻量级双分支结构在医学图像分类中表现更好？

从CNN到Mamba&#xff1a;轻量级双分支结构如何重塑医学图像分类范式 医学影像分析正面临前所未有的挑战——随着CT、MRI、超声等成像技术的普及&#xff0c;每天产生的医学图像数据呈指数级增长。传统CNN架构在应对高分辨率医学图像时&#xff0c;往往陷入局部特征提取的局限&…...

编程新知 2026/4/1 16:47:08

告别“傻跟车”：聊聊PLUTO如何用对比学习让自动驾驶学会“思考”与“决策”

告别“傻跟车”&#xff1a;PLUTO如何用对比学习重塑自动驾驶决策逻辑 清晨的都市高架上&#xff0c;一辆银色轿车正以恒定车距跟随前车匀速行驶。当领头车辆突然急刹时&#xff0c;这辆搭载最新PLUTO系统的自动驾驶汽车并未机械复制前车动作&#xff0c;而是同步检测到百米外转…...

编程新知 2026/4/1 16:47:08