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

Vue-事件修饰符

news 来源：原创 2025/6/9 5:31:23

事件修饰符

prevent （阻止默认事件）

超链接 + 点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> prevent 阻止默认事件 </h2><a target="_blank" href="http://www.baidu.com"  @click="showTip">点我提示信息</a> </div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showTip(e){console.log("你好 " + this.name)}},});</script>
</html>

效果

控制台输出： 你好菜逼
新标签页打开： 百度首页

想禁止超链接的默认跳转

解决办法
- 调用事件的阻止默认操作方法 preventDefault

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备一个容器 --><div id="root"><h1>事件修饰符</h1><h2> prevent 阻止默认事件 </h2><a target="_blank" href="http://www.baidu.com"  @click="showTip">点我提示信息</a> </div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showTip(e){e.preventDefault(); // 阻止默认事件方法console.log("你好 " + this.name)}},});</script>
</html>

效果

控制台输出：你好菜逼
不打开新标签页跳转百度首页

在这里插入图片描述

简写

@click="showTip" => @click.prevent="showTip"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> prevent 阻止默认事件 </h2><a target="_blank" href="http://www.baidu.com"  @click.prevent="showTip">点我提示信息</a> </div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showTip(e){// e.preventDefault(); // 阻止默认事件方法console.log("你好 " + this.name)}},});</script>
</html>

stop (阻止事件冒泡)

DIV 及其子元素 Button 均包含点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> stop 阻止事件冒泡 </h2><div @click="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")},showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

点击按钮, 输出： 你好 Button
div上的点击事件也触发了，输出： 你好 Div

在这里插入图片描述

想禁止触发 Div 的点击事件

解决办法
- 调用事件的阻止事件冒泡方法 stopPropagation

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> stop 阻止事件冒泡 </h2><div @click="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")},showButton(e){e.stopPropagation();// 阻止事件冒泡console.log("你好 Button")}},});</script>
</html>

效果

点击按钮, 只输出： 你好 Button

简写

@click="showButton" => @click.stop="showButton"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> stop 阻止事件冒泡 </h2><div @click="showDiv"><button @click.stop="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")},showButton(e){console.log("你好 Button")}},});</script>
</html>

once （只触发一次）

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>事件修饰符</h1><h2> once 只触发一次 </h2><div @click="showDiv"><button @click.once="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

多次点击，只输出一次：你好 Button

在这里插入图片描述

capture (使用事件的捕获模式)

Div1、2嵌套且均包含点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}.div2{padding: 5px;background-color: red;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> capture 使用事件的捕获模式 </h2><div class="div1"  @click="showMsg('div1')">div1<div class="div2"  @click="showMsg('div2')">div2</div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showMsg(msg){console.log("你好 " + msg)}},});</script>
</html>

效果

事件的捕获是 从外到内 div1 -> div2
事件的冒泡是 从内到外 div2 -> div1·
因此先输出 你好 div2 再输出 你好 div1

在这里插入图片描述

想让按照事件捕获顺序触发事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}.div2{padding: 5px;background-color: red;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> capture 使用事件的捕获模式 </h2><div class="div1"  @click.capture="showMsg('div1')">div1<div class="div2"  @click="showMsg('div2')">div2</div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showMsg(msg){console.log("你好 " + msg)}},});</script>
</html>

效果

@click="showMsg('div1')" => @click.capture="showMsg('div1')"
开启了捕获模式，捕获时就调用方法
先输出 你好 div1 再输出 你好 div2

在这里插入图片描述

self (只有event.target是自己时才调用)

DIV 及其子元素 Button 均包含点击事件

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> self 只有event.target是自己时才触发事件 </h2><div class="div1" @click="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")console.log("div的event.target->",e.target)},showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

先输出 你好 Button
再输出 你好 Div
输出div触发事件的target是 <button >点我提示信息</button> 。（因为是点击按钮的冒泡事件）

在这里插入图片描述

想不是点击div自己就不触发事件

代码

@click="showDiv" => @click.self="showDiv"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.div1{padding: 5px;background-color: gray;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2> self 只有event.target是自己时才触发事件 </h2><div class="div1" @click.self="showDiv"><button @click="showButton">点我提示信息</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示      new Vue({el:'#root', data:{ name:"菜逼"},methods: {showDiv(e){console.log("你好 Div")console.log("div的event.target->",e.target)},showButton(e){console.log("你好 Button")}},});</script>
</html>

效果

只输出 你好 Button div的点击事件没有触发（变向的阻止事件冒泡）

在这里插入图片描述

passive (事件行为立即执行，无需等待回调执行完成)

代码

鼠标滚轮事件 @wheel

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.list {height: 200px;width: 200px;background-color: gray;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2><ul class="list" @wheel="load"><li>a</li><li>b</li><li>c</li><li>d</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el:'#root',data:{name:"菜逼"},methods: {load(e){for(let i = 0; i<10000; i++){setTimeout(1000);console.log("睡了"+(i+1)+ "秒")}console.log("执行完了");}}});</script>
</html>

效果

发现必须等到最终输出 执行完了 滚动条才下移

在这里插入图片描述

想让滚动条直接下移

@wheel="load" => @wheel.passive="load"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.list {height: 200px;width: 200px;background-color: gray;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2><ul class="list" @wheel.passive="load"><li>a</li><li>b</li><li>c</li><li>d</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el:'#root',data:{name:"菜逼"},methods: {load(e){for(let i = 0; i<10000; i++){setTimeout(1000);console.log("睡了"+(i+1)+ "秒")}console.log("执行完了");}}});</script>
</html>

在这里插入图片描述

使用 @scroll 则没有这个问题

@wheel.passive="load" => @scroll="load"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>事件修饰符</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><style>* {margin-top: 20px;}.list {height: 200px;width: 200px;background-color: gray;overflow: auto;}li {height: 100px;}</style></head><body><div id="root"><h1>事件修饰符</h1><h2>passive 默认事件行为立即执行，无需等待回调执行完成</h2><ul class="list" @scroll="load"><li>a</li><li>b</li><li>c</li><li>d</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示new Vue({el:'#root',data:{name:"菜逼"},methods: {load(e){for(let i = 0; i<10000; i++){setTimeout(1000);console.log("睡了"+(i+1)+ "秒")}console.log("执行完了");}}});</script>
</html>

在这里插入图片描述

特殊说明

passive 常用于 APP 或者平板之类的应用优化使用
并不是所有的事件均使用，需具体事件具体分析

Vue-事件修饰符

事件修饰符 prevent （阻止默认事件） 超链接点击事件代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>事件修饰符</title><script …...

编程日记 2025/5/27 4:59:31

c++函数调用运算符及类型转换运算符重载

author: hjjdebug date: 2025年 05月 17日星期六 14:44:48 CST descrip: c函数调用运算符及类型转换运算符重载文章目录 0. 前言. 运算符包括以下运算符.1. 运算符重载语句一般格式:2. 函数调用运算符：3. 类型转换运算符： 例如 int(); double(); bool(…...

编程日记 2025/5/26 10:59:13

如何在 Windows 10 或 11 中安装 PowerShellGet 模块？

PowerShell 是微软在其 Windows 操作系统上提供的强大脚本语言，可用于通过命令行界面自动化各种任务，适用于 Windows 桌面或服务器环境。而 PowerShellGet 是 PowerShell 中的一个模块，提供了用于从各种来源发现、安装、更新和发布模块的 cmdlet。本文将介绍如何在 PowerS…...

编程日记 2025/5/29 15:35:51

84.评论日记

原链接这个视频我发了四五条评论。评论内容甚至和下面这个视频内的其他评论一样。找了另外的账号也发了。发现，无论是我这个账号，还是其他的账号，评论都无法看到。我大胆猜测有一种机制，某些官号会被设置成一种高检测的等…...

编程日记 2025/5/28 16:11:59

一周学会Pandas2 Python数据处理与分析-Pandas2数据添加修改删除操作

锋哥原创的Pandas2 Python数据处理与分析视频教程： 2025版 Pandas2 Python数据处理与分析视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 对数据的修改、增加和删除在数据整理过程中时常发生。修改的情况一般是修改错误，还有一种情况是格式转换…...

编程日记 2025/5/28 13:39:50

荷兰国旗问题之指针划分区间问题

文章目录首先介绍一下什么是荷兰国旗问题？问题描述为：给定一个由红色、白色和蓝色三种颜色组成的无序数组，将数组元素按颜色排序，使得所有红色元素在前，白色元素居中，蓝色元素在后。这里的 “颜色” 通常用…...

编程日记 2025/5/29 13:50:32

冒泡排序-java

public class BubbleSort{ public static void bubbleSort(int[] arr) { int n arr.length; boolean swapped; // 外层循环控制遍历的轮数 for (int i 0; i < n - 1; i) { swapped false; for (int j 0; …...

编程日记 2025/5/28 7:53:19

进阶-数据结构部分：2、常用排序算法

飞书文档https://x509p6c8to.feishu.cn/wiki/FfpIwIPtviMMb4kAn3Sc40ABnUh 常用排序算法这几种算法都是常见的排序算法，它们的优劣和适用场景如下： 冒泡排序（Bubble Sort）：简单易懂，时间复杂度较高&…...

编程日记 2025/5/27 4:50:57

人工智能-自然语言与语音产品实现

一、语义相似度 （一）、文本向量化 1、文本向量化（Text Vectorization） 是自然语言处理（NLP）中的核心预处理步骤，旨在将人类语言的文本转换为计算机可处理的数值向量（数学表达&…...

编程日记 2025/5/29 19:40:33

阿里巴巴开源移动端多模态LLM工具——MNN

MNN 是一个高效且轻量级的深度学习框架。它支持深度学习模型的推理和训练，并在设备端的推理和训练方面具有行业领先的性能。目前，MNN 已集成到阿里巴巴集团的 30 多个应用中，如淘宝、天猫、优酷、钉钉、闲鱼等，覆盖了直播、短视频…...

编程日记 2025/5/29 18:26:37

SpringBootAdmin：全方位监控与管理SpringBoot应用

监控的意义 1. 监控服务状态是否宕机 2. 监控服务运行指标 (内存,虚拟机,线程,请求等) 3. 监控日志 4. 管理服务 (服务下线) 可视化监控平台 Spring Boot Admin, 开源社区项目, 用于管理和监控SpringBoot应用程序. 客户端注册到服务端, 通过HTTP请求方式, 服务端定期从客…...

编程日记 2025/5/29 9:53:30

SAP HCM 0008数据存储逻辑

0008信息类型：0008信息类型是存储员工基本薪酬的地方，因为很多企业都会都薪酬带宽，都会按岗定薪，所以在上线前为体现工资体系的标准化，都会在配置对应的薪酬关系，HCM叫间接评估，今天我们就分析下…...

编程日记 2025/6/3 8:19:29

【springcloud学习(dalston.sr1)】Config配置中心-ConfigServer端与Git通信（含源代码）（十三）

该系列项目整体介绍及源代码请参照前面写的一篇文章【springcloud学习(dalston.sr1)】项目整体介绍（含源代码）（一） springcloud学习（dalston.sr1）系统文章汇总如下： 【springcloud学习(dalston…...

编程日记 2025/5/31 7:28:38

A. 班委竞选签到题，模拟。 #include <bits/stdc.h> #define x first #define y second #define int long long //#define double long doubleusing namespace std; typedef unsigned long long ULL ; typedef pair<int,int> PII ; typedef pair<d…...

编程日记 2025/5/26 4:13:26

C语言输入函数对比解析

目录 C语言输入函数全家福（和它们的秘密）fgetsgetsscanfgetcharfscanf函数对比表灵魂总结哈哈，看来你正在和C语言的输入函数们玩“大家来找茬”！放心，我会用最接地气的方式给你讲明白，保证比看《甄嬛传》还…...

编程日记 2025/5/31 7:14:01

python四则运算计算器

python四则运算计算器是谁说，python不好写计算器的，我亲自写个无ui的计算器功能，证明这是谣言 step1:C:\Users\wangrusheng\Downloads\num.txt 15 - 4 * 3 10 / 2(5 3) * 2 6 / 31/2 * 8 3/4 * 4 - 0.52.5 * (4 1.6) - 9 / 3-6 12 * (…...

编程日记 2025/5/27 10:45:47

BUUCTF——Nmap

BUUCTF——Nmap 进入靶场类似于一个nmap的网站尝试一下功能没什么用看看数据包既然跟IP相关伪造一个XXF看看拼接了一下没什么用果然没这么简单尝试一下命令注入构造payload 127.0.0.1 | ls 应该有过滤加了个\ 直接构造个php木马上传试试 127.0.0.1 | <?…...

编程日记 2025/5/29 13:30:58

【Changer解码头详解及融入neck层数据的实验设计】

Changer解码头详解 ChangerEx中的 Changer 解码头（定义在 [changer.py](file://opencd\models\decode_heads\changer.py)）是基于双时相输入的，用于遥感变化检测任务。下面我将详细解释： 🎯 一、解码头输入数据来源输…...

编程日记 2025/5/29 21:09:12

深度学习推理引擎---OpenVINO

OpenVINO（Open Visual Inference & Neural Network Optimization Toolkit）是英特尔开发的开源工具套件，旨在优化和加速深度学习模型在英特尔硬件（CPU、GPU、VPU、FPGA等）上的推理性能，同时支持从训练到…...

编程日记 2025/5/30 21:31:07

JavaScript splice() 方法

1. JavaScript splice() 方法 1.1. 定义和用法 splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。返回值：如果删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组。 1.2. …...

编程日记 2025/5/29 15:05:50

数据库故障排查指南：解决常见问题，保障数据安全与稳定

数据库故障排查指南：解决常见问题，保障数据安全与稳定 📖 前言数据库作为现代应用的核心组件，其稳定性直接影响业务连续性。本文总结六大常见数据库故障场景，提供快速排查思路与解决方案，助你化身"…...

编程日记 2025/5/27 5:24:22

gem5-gpu教程第十章关于topology 的Mesh network

问题一、L1和L2缓存之间的VI_hammer_fusion中指定了互连延迟，如何更改这些数字吗？我已经实现了一个网格拓扑来连接cpu内核和GPU SM，并对VI_hammer*和网格文件进行了所有必要的更改。我的问题是： 1. There is interconnect latency specified in VI_hammer_fusion betwee…...

编程日记 2025/5/29 12:44:12

【C/C++】C++返回值优化：RVO与NRVO全解析

文章目录 C返回值优化：RVO与NRVO全解析1 简介2 RVO vs NRVO3 触发条件4 底层机制5 应用场景6 验证与限制7 性能影响8 补充说明9 总结 C返回值优化：RVO与NRVO全解析返回值优化（Return Value Optimization, RVO）是编译器通过消除临…...

编程日记 2025/5/29 16:48:11

使用 Kaniko来构建镜像

使用 Kaniko来构建镜像 Kaniko 是一种专注于容器镜像构建的开源工具，其核心设计理念与 Docker 存在显著差异。以下从功能定位、技术实现和适用场景三方面进行对比分析： 一、Kaniko 的核心特性无需 Docker 守护进程 Kaniko 直接在容器或 Kubernetes 集…...

编程日记 2025/5/29 11:16:26

2025.05.17淘天机考笔试真题第三题

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 03. 奇偶平衡树分割问题问题描述 K小姐是一位园林设计师，她设计了一个由多个花坛组成的树形公园。每个花坛中种植了不同数量的花…...

编程日记 2025/5/29 13:33:44

history模式:让URL更美观

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/5/29 11:13:55

算法：分治法

实验内容在一个2kⅹ2k个方格组成的棋盘中，若恰有一个方格与其他方格不同，则称该方格为特殊方格，且称该棋盘为一特殊棋盘。显然，特殊方格出现的位置有4k 种情况，即k>0,有4k 种不同的特殊棋盘棋盘覆盖&#xff1a…...

编程日记 2025/6/1 15:53:34

豆粕ETF投资逻辑整理归纳-20250511

目录一、什么是豆粕基本概念豆粕上游生产国豆粕下游消耗方二、豆粕ETF 概念策略展期操作超额收益行情波动豆粕资产的低相关性三、展期收益 Contango升水结构和Backwardation贴水结构豆粕的贴水逻辑还有哪些品种拥有长期的展期收益四、其他相关信…...

编程日记 2025/5/29 10:16:24

使用 Python 连接 Oracle 23ai 数据库完整指南

方法一：使用 oracledb 官方驱动（推荐） Oracle 官方维护的 oracledb 驱动（原 cx_Oracle）是最新推荐方案，支持 Thin/Thick 两种模式。 1. 环境准备 pip install oracledb2. 完整示例代码 import oracledb import getpass from typing import Unionclass Oracle23aiConn…...

编程日记 2025/6/4 10:38:25

构建集成差异化灵巧手和先进机器人控制技术的自动化系统

介绍程序 1.流程分析通过流程分析审查应用机器人自动化的可行性。 2.系统设计选择合适的机器人（机械臂、夹持器、视觉系统等），并通过详细的任务分析设计最佳系统。 3.内部测试建立内部测试平台并解决任何问题。 4.现场测试现场设…...

编程日记 2025/5/29 12:44:21

题单：汉诺塔问题

题目描述如下图所示，设有 nn 个大小不等的中空圆盘，按照从小到大的顺序叠套在立柱 A 上，另有两根立柱 B 和 C 。现在要求把全部圆盘从 A 柱（称为源柱）移到 C 柱（称为目标柱），移动…...

编程日记 2025/5/27 21:50:11

Unable to get end effector tips from jmg

这个错误信息表明在使用MoveIt2时，moveit_visual_tools无法从关节模型组（Joint Model Group，简称JMG）中获取末端执行器（End Effector，简称EE）的尖端信息。这通常是因为配置文件中缺少相关信息&a…...

编程日记 2025/5/29 13:45:36

flutter flutter run 运行项目卡在Running Gradle task ‘assembleDebug‘...

flutter run --verbose在运行flutter run 可以看到是卡在哪一步最重要的就是自己查看日志，具体哪一步有问题flutter run --verbose使用这个，运行了项目会将错误信息放在控制台可能原因静态资源问题如果：图片、字体文件等没有在pubspec.yam…...

编程日记 2025/5/29 13:38:52

STM32烧录程序正常，但是运行异常

一、硬件配置问题 BOOT引脚设置错误 STM32的启动模式由BOOT0和BOOT1引脚决定。若设置为从RAM启动（BOOT01，BOOT10），程序在掉电后无法保存，导致复位后无法正常运行。应确保BOOT00（从Flash启动）15。…...

编程日记 2025/5/29 17:07:02

TTS：F5-TTS 带有 ConvNeXt V2 的扩散变换器

1，项目简介 F5-TTS 于英文生成领域表现卓越，发音标准程度在本次评测软件中独占鳌头。再者，官方预设的多角色生成模式独具匠心，能够配置多个角色，一次性为多角色、多情绪生成对话式语音，别出心裁。最低配置…...

编程日记 2025/6/1 10:28:01

ecmascript 第6版特性 ECMA-262 ES6

https://blog.csdn.net/zlpzlpzyd/article/details/146125018 在之前写的文章基础上，ES6在export和import的基础外，还有如下特性特性说明let/const块级作用域变量声明>箭头函数Promise异步编程...

编程日记 2025/6/1 17:49:21

2024 山东省ccpc省赛

目录 I（签到） 题目简述： 思路： 代码： A（二分答案） 题目简述： 思路： 代码： K（构造） 题目： 思路： 代…...

编程日记 2025/5/27 6:13:10

角点特征：从传统算法到深度学习算法演进

1 概述图像特征是用来描述和分析图像内容的关键属性，通常包括颜色、纹理和形状等信息。颜色特征能够反映图像中不同颜色的分布，常通过 RGB 值或色彩直方图表示。纹理特征则关注图像表面的结构和细节，例如通过灰度共生矩阵或局部二值模式&…...

编程日记 2025/6/3 23:34:32

免费代理IP服务有哪些隐患？如何安全使用？

代理IP已经成为互联网众多用户日常在线活动中不可或缺的一部分。无论是为了保护个人隐私、突破地理限制，还是用于数据抓取、广告投放等商业用途，代理IP都扮演着关键角色。然而，市场上存在大量的免费代理IP服务，尽管它们看起来颇具…...

编程日记 2025/6/2 8:28:20

深入了解 VPC 端点类型 – 网关与接口

什么是VPC 端点 VPC 端点（VPC Endpoint）是 Amazon Web Services (AWS) 提供的一种服务，允许用户在 Virtual Private Cloud (VPC) 内部安全地访问 AWS 服务，而无需通过公共互联网。VPC 端点通过私有连接将 VPC 与 AWS 服务直接连接…...

编程日记 2025/5/28 8:13:11

Android屏幕采集编码打包推送RTMP技术详解：从开发到优化与应用

在现代移动应用中，屏幕采集已成为一个广泛使用的功能，尤其是在实时直播、视频会议、远程教育、游戏录制等场景中，屏幕采集技术的需求不断增长。Android 平台为开发者提供了 MediaProjection API，这使得屏幕录制和采集变得更加简单…...

编程日记 2025/5/29 19:08:00

信息系统项目管理师高级-软考高项案例分析备考指南（2023年案例分析）

个人笔记整理---仅供参考计算题案例分析里的计算题就是进度、挣值分析、预测技术。主要考査的知识点有:找关键路径、求总工期、自由时差、总时差、进度压缩资源平滑、挣值计算、预测计算。计算题是一定要拿下的，做计算题要保持头脑清晰，认真读题把PV、…...

编程日记 2025/5/29 16:35:43

全栈项目搭建指南：Nuxt.js + Node.js + MongoDB

全栈项目搭建指南：Nuxt.js Node.js MongoDB 一、项目概述我们将构建一个完整的全栈应用，包含： 前端：Nuxt.js (SSR渲染)后端：Node.js (Express/Koa框架)数据库：MongoDB后台管理系统：集成在同…...

编程日记 2025/5/28 8:41:20

Linux:基础IO

一：理解文件 1-1 狭义理解文件存储在磁盘中，由于磁盘是永久性存储介质，因此文件在磁盘上的存储是永久性的；磁盘也是外设，因此磁盘上对文件的所有操作本质是对外设的输入和输出 1-2 广义理解 Linux下一切皆文件&am…...

编程日记 2025/5/28 8:24:22

MySQL 索引优化以及慢查询优化

在数据库性能优化中，索引优化和慢查询优化是两个关键环节。合理使用索引可以显著提高查询效率，而识别和优化慢查询则能提升整体数据库性能。本文将详细介绍MySQL索引优化和慢查询优化的方法和最佳实践。一、MySQL 索引优化 1.1 索引的基本概念索引是…...

编程日记 2025/6/4 6:45:54

Leaflet使用SVG创建动态Legend

接前一篇文章，前一篇文章我们使用 SVG 创建了带有动态文字的图标，今天再看看怎样在地图上根据动态图标生成相关的legend，当然这里也还是使用了 SVG 来生成相关颜色的 legend。看下面的代码，生成了一个 svg 节点，其中…...

编程日记 2025/5/29 16:58:40

使用 Vue Tour 封装一个统一的页面引导组件

项目开发过程中需要实现用户引导功能，经过调研发现一个好用的 Vue 插件 vue-tour，今天就来分享一下我是如何基于 vue-tour 封装一个统一的引导组件，方便后续在多个页面复用的。 📦 第一步：安装 vue-tour 插件首先安装…...

编程日记 2025/5/29 2:37:51

OpenResty 深度解析：构建高性能 Web 服务的终极方案

引言 openresty是什么？在我个人对它的理解来看相当于嵌入了lua的nginx; 我们在nginx中嵌入lua是为了不需要再重新编译,我们只需要重新修改lua脚本,随后重启即可; 一.lua指令序列我们分别从初始化阶段，重写/访问阶段，内容阶段，日志…...

编程日记 2025/6/3 11:01:13

赋能企业级移动应用 CFCA FIDO+提升安全与体验

移动办公与移动金融为企业有效提升业务丰富性、执行便捷性。与此同时，“安全”始终是移动办公与移动金融都绕不开的话题。随着信息安全技术的发展，企业级移动应用中安全与便捷不再是两难的抉择。中金金融认证中心（CFCA）作为经国…...

编程日记 2025/5/27 7:22:19

Redis 数据类型与操作完全指南

Redis 是一个开源的、内存中的数据结构存储系统，它可以用作数据库、缓存和消息中间件。与传统的关系型数据库不同，Redis 提供了丰富的数据类型和灵活的操作方式，这使得它能够高效地解决各种不同场景下的数据存储和处理问题。本文将全面介绍 R…...

编程日记 2025/6/2 16:14:39

事件修饰符

prevent （阻止默认事件）

超链接 + 点击事件

想禁止超链接的默认跳转

stop (阻止事件冒泡)

DIV 及其 子元素 Button 均包含点击事件

想禁止触发 Div 的点击事件

once （只触发一次）

capture (使用事件的捕获模式)

Div1、2嵌套且均包含点击事件

想让按照事件捕获顺序触发事件

self (只有event.target是自己时才调用)

DIV 及其 子元素 Button 均包含点击事件

想不是点击div自己就不触发事件

passive (事件行为立即执行，无需等待回调执行完成)

相关文章：

DIV 及其子元素 Button 均包含点击事件

DIV 及其子元素 Button 均包含点击事件