Vue3学习笔记（9.4）
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自定义指令 除了默认设置的核心指令（v-model和v-show），Vue也允许注册自定义指令。 下面我们注册一个全局指令v-focus，该指令的功能是在页面加载时，元素获得焦点： <!--* Author: RealRoad10834252…...
 错误)
导入 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…...
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 补充…...
探索LeetCode【0005】最长回文子串（未搞懂，未练习）
目录0、题目1、第一个官方答案1.1 动态规划（未懂）1.2 中心扩展（已懂）1.3 Manacher（未懂）2、第二个参考答案2.1 暴力求法（已懂）2.2 反转法（未懂）2.3 动态规划&…...
使用 Docker run 命令简化容器化
使用 Docker run 命令简化容器化 Docker run 是在 Docker 容器中运行应用程序的基本命令。在开始使用 Docker 之前，了解一些重要的命令非常重要。 在本博客中，我们将解释 Docker run 命令的基本语法，并探索其一些最常见的选项，以…...
腾讯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…...
基础解惑：Linux 下文件描述符标志和文件状态标志区别
简述 文件描述符标志，是体现进程的文件描述符的状态，fork进程时，文件描述符被复制；目前只有一种文件描述符：FD_CLOEXEC文件状态标志，是体现进程打开文件的一些标志，fork时不会复制file 结构&am…...
学弟：如何在3个月内学会自动化测试？
有小学弟问：如何在3个月内学会自动化测试？ 老实说如果你现在上班，之前主要在做功能测试，或者编程基础比较弱的话，三个月够呛。 如果你是脱产学习，每天能保持6～8小时学习时间的话，可…...
C-NCAP 2025主动安全ADAS测试研究
中汽中心汽车测评管理中心（简称“中汽测评”）是负责运营C-NCAP、CCRT等测评项目的管理机构。中汽测评以引领汽车行业进步、支撑汽车强国建设为使命，通过独立、公正、专业、开放的测试评价，服务消费者，当好选车购车参谋…...
【Apifox】测试工具自动编写接口文档
在开发过程中，我们总是避免不了进行接口的测试， 而相比手动敲测试代码，使用测试工具进行测试更为便捷，高效 今天发现了一个非常好用的接口测试工具Apifox 相比于Postman，他还拥有一个非常nb的功能， 在接…...
解决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报如下错误： xialiangzhideMacBook-Pro:~ xialz$ bre…...
Linux软件安装---Tomcat安装
安装Tomcat 操作步骤： 使用xftp上传工具将tomcat的 二进制发布包上传到Linux解压安装包，命令为tar -zxvf apache-tomcat*** -C /usr/local进入Tomcat的bin的启动目录，命令为sh startup.sh或者./startup.sh 验证Tomcat启动是否成功࿰…...
提示工程师是什么工作？
提示工程师是什么工作？ 因为ChatGPT的爆火，大家都把眼光锁定在这个号称“ChatGPT新兴职业” 的“提示工程师”上。“提示工程师”是什么工作？为什么说未来所有职业 都需要提示工程的能力？ 先解释一下“提示”，它最早…...
WXSS-WXML-WXS语法
目录： 1 WXSS编写程序样式 2 Mustache语法绑定 3 WXML的条件渲染 4 WXML的列表渲染 5 WXS语法基本使用 6 WXS语法案例练习 小程序的自适应单位rpx。在设计稿为iPhone6的时候1px2rpx wxml必须是闭合标签，或者单标签加/，否则会报错&#…...
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…...
数据分析工具集合：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.…...
响应式布局的五种方法
响应式布局的五种方法1.百分比布局2.rem布局3. 媒体查询 media screen4. flex布局5.vw 和 vh响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。 1.百分比布局 1.有父元素就相对于父元素 2.没有父元素就相对于视口的大小 举一…...
Javase学习文档------数组
Java 数组是 Java 编程中非常基础和重要的一个知识点。 以下是 Java 数组的主要学习内容： 数组的几个特点 数组在声明时必须指定长度，且长度不可变：数组的长度在声明时就需要确定，一旦确定就不能修改。因此，在使用数组…...
百度高德地图JS-API学习手记:地图基本设置与省市区数据加载
无论是百度还是高德地图开发，还是高德地图开发。官方的给的案例启示很多，copy再修改下，就完成了 概述-地图 JS API | 高德地图API 地图 JS API | 百度地图API SDK 这个大致看一下，我想。有点GIS基础都能完成地图开发。 个人认…...
c语言—指针详解***内存地址***指针字节数***注意事项
创作不易，本篇文章如果帮助到了你，还请点赞支持一下♡>𖥦<)!! 主页专栏有更多知识，如有疑问欢迎大家指正讨论，共同进步！ 给大家跳段街舞感谢支持！ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
CSS | transition 和 transform的用处和区别
省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O…...