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

Vue3学习笔记（9.4）

news 2025/7/18 16:54:51

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指令绑定到元素。这可用于直接操作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自定义指令除了默认设置的核心指令（v-model和v-show），Vue也允许注册自定义指令。下面我们注册一个全局指令v-focus，该指令的功能是在页面加载时，元素获得焦点： <!--* Author: RealRoad10834252…...

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

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

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

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

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

文章目录前言一、关键词二、运算符三、数据类型1、基本类型：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 动态规划（未懂）1.2 中心扩展（已懂）1.3 Manacher（未懂）2、第二个参考答案2.1 暴力求法（已懂）2.2 反转法（未懂）2.3 动态规划&…...

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

使用 Docker run 命令简化容器化

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

编程日记 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 下文件描述符标志和文件状态标志区别

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

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

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

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

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

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

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

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

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

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

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

目录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报如下错误： xialiangzhideMacBook-Pro:~ xialz$ bre…...

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

Linux软件安装---Tomcat安装

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

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

提示工程师是什么工作？

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

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

WXSS-WXML-WXS语法

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

编程日记 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响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。 1.百分比布局 1.有父元素就相对于父元素 2.没有父元素就相对于视口的大小举一…...

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

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

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

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

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

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

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

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

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

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

python/java环境配置

环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...

编程新知 2025/7/17 19:45:39

Robots.txt 文件

什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/7/8 21:17:59

Matlab | matlab常用命令总结

常用命令一、基础操作与环境二、矩阵与数组操作（核心）三、绘图与可视化四、编程与控制流五、符号计算 (Symbolic Math Toolbox)六、文件与数据 I/O七、常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...

编程新知 2025/7/17 7:45:25

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目，设置虚拟环境，出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/7/9 14:33:19

FOPLP vs CoWoS

以下是 FOPLP（Fan-out panel-level packaging 扇出型面板级封装）与 CoWoS（Chip on Wafer on Substrate）两种先进封装技术的详细对比分析，涵盖技术原理、性能、成本、应用场景及市场趋势等维度： 一、技术原…...

编程新知 2025/7/6 23:27:14

Java中栈的多种实现类详解

Java中栈的多种实现类详解：Stack、LinkedList与ArrayDeque全方位对比前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析三、ArrayDeque类——高…...

编程新知 2025/7/7 17:26:48

使用python进行图像处理—图像滤波（5）

图像滤波是图像处理中最基本和最重要的操作之一。它的目的是在空间域上修改图像的像素值，以达到平滑（去噪）、锐化、边缘检测等效果。滤波通常通过卷积操作实现。 5.1卷积(Convolution)原理卷积是滤波的核心。它是一种数学运算，…...

编程新知 2025/7/6 10:46:51

【汇编逆向系列】六、函数调用包含多个参数之多个整型-参数压栈顺序，rcx,rdx,r8,r9寄存器

从本章节开始，进入到函数有多个参数的情况，前面几个章节中介绍了整型和浮点型使用了不同的寄存器在进行函数传参，ECX是整型的第一个参数的寄存器，那么多个参数的情况下函数如何传参，下面展开介绍参数为整型时候的几种情…...

编程新知 2025/7/16 2:19:00

生产管理系统开发：专业软件开发公司的实践与思考

生产管理系统开发的关键点在当前制造业智能化升级的转型背景下，生产管理系统开发正逐步成为企业优化生产流程的重要技术手段。不同行业、不同规模的企业在推进生产管理数字化转型过程中，面临的挑战存在显著差异。本文结合具体实践案例，分析…...

编程新知 2025/7/11 23:44:41

Vue3学习笔记（9.4）

相关文章：

Vue3学习笔记（9.4）

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

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

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

使用 Docker run 命令简化容器化

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

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

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

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

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

解决brew安装opencv报错问题

Linux软件安装---Tomcat安装

提示工程师是什么工作？

WXSS-WXML-WXS语法

POSIX正则表达式

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

响应式布局的五种方法

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

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

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

python/java环境配置

Robots.txt 文件

Matlab | matlab常用命令总结

Rust 开发环境搭建

pycharm 设置环境出错

FOPLP vs CoWoS

Java中栈的多种实现类详解

使用python进行图像处理—图像滤波（5）

【汇编逆向系列】六、函数调用包含多个参数之多个整型-参数压栈顺序，rcx,rdx,r8,r9寄存器

生产管理系统开发：专业软件开发公司的实践与思考