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

Vue学习笔记（七、事件修饰符 .stop .capture .self .once .prevent）

news 2026/2/8 19:08:12

        先看一段基本的代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>VueBaseCode</title><script src="./lib/vue.js"></script><style>.inner {width: 150px;height: 168px;background-color: darkblue;}.outer {height: 256px;background-color: darkgreen;}</style>
</head><body><div id="app" ><div class="outer" @click="divOuterClick"><div class="inner" @click="divInnerClick"><input type="button" value="按钮" @click="btnClick"></div></div><a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a></div><script>var vm = new Vue({el: '#app',data: {},methods: {divOuterClick() { console.log("Outer"); },divInnerClick() { console.log("Inner"); },btnClick() { console.log("Button"); },linkClick() { console.log("linkClick"); }}});</script>
</body></html>

一、.stop阻止事件冒泡

        当我们在按钮上点击时，会顺序触发btnClick，divInnerClick，divOuterClick三个方法，为了避免按钮被点击时出现这种冒泡现象，我们可以在按钮的click事件上使用.stop指令，像这样：

    <div id="app" class="outer" @click="divOuterClick"><div class="inner" @click="divInnerClick"><input type="button" value="按钮" @click.stop="btnClick"><!--阻止冒泡--></div></div><a href="http://www.baidu.com" @click="linkClick">去百度</a>

        这样在点击按钮之后就只是执行按钮中的方法，不再冒泡。

 二、.self只有自身在点击时才会触发事件，不受冒泡影响。

    <div id="app" ><div class="outer" @click="divOuterClick"><div class="inner" @click.self.stop="divInnerClick"><!--自身点击才触发事件的同时阻止冒泡--><input type="button" value="按钮" @click="btnClick"></div></div><a href="http://www.baidu.com" @click="linkClick">去百度</a></div>

        这里面实际上在inner这个div的click事件上添加了self修饰符，保证只有自身被点击时才会触发事件，但其不会阻止自身向上冒泡，所以在其后面追加了.stop修饰符，这样就只有这个div自身产生事件了。 

三、.capture捕获机制

    <div id="app" ><div class="outer" @click.capture="divOuterClick"><!--捕获机制--><div class="inner" @click="divInnerClick"><input type="button" value="按钮" @click="btnClick"></div></div><a href="http://www.baidu.com" @click="linkClick">去百度</a></div>

        这里给outer这个div的click事件添加了.capture修饰符，这样在事件冒泡过程中，这个事件总是首先执行，然后才执行其他的事件。 

四、.once修饰符只起一次作用

    <div id="app" ><div class="outer" @click="divOuterClick"><div class="inner" @click="divInnerClick"><input type="button" value="按钮" @click.stop.once="btnClick"><!--修饰符只起一次作用--></div></div><a href="http://www.baidu.com" @click="linkClick">去百度</a></div>

         这里给按钮的click事件在添加了.stop阻止冒泡修饰符之后又添加了.once修饰符，这个once修饰符让click事件只起一次作用的情况下，让.stop也只其一次作用，也就是说再按钮点击一次之后，该按钮的事件不再执行，同时也不再阻止事件冒泡。

五、.prevent阻止默认行为

    <div id="app" ><div class="outer" @click="divOuterClick"><div class="inner" @click="divInnerClick"><input type="button" value="按钮" @click="btnClick"></div></div><a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a></div>

        这里在链接的click事件后面添加了.prevent修饰符，来阻止默认的页面跳转行为，只是执行onclick的绑定方法linkClick。

相关文章：

Vue学习笔记（七、事件修饰符 .stop .capture .self .once .prevent）

先看一段基本的代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>VueBaseCode</title><script src"./lib/vue.js"></script><style>.inner {width:…...

编程日记 2024/10/23 5:11:12

web网站搭建（静态）

准备工作&#xff1a; 关闭防火墙&#xff1a; [rootlocalhost ~]# systemctl disable --now firewalld 修改enforce为permissive [rootlocalhost ~]# setenforce 0 [rootlocalhost ~]# geten getenforce getent [rootlocalhost ~]# getenforce Permissive 重启服务 [rootloca…...

编程日记 2024/10/23 5:10:11

高效特征选择策略：提升Python机器学习模型性能的方法

高效特征选择策略&#xff1a;提升Python机器学习模型性能的方法 目录 &#x1f50d; 特征选择的重要性&#x1f4ca; 相关性分析&#x1f504; 递归特征消除 (RFE)&#x1f333; 基于模型的特征选择 1. &#x1f50d; 特征选择的重要性 特征选择在机器学习中至关重要&#…...

编程日记 2024/10/23 5:09:09

2024年TI杯E题-三子棋游戏装置方案分享-jdk123团队-第四弹 第一题

#1024程序员节&#xff5c;征文# 往期回顾 前期准备 摄像头bug解决 手搓机械臂 视觉模块的封装 第一问&#xff1a; 需要将一颗黑棋&#xff0c;放入棋盘中的五号位置。 理想思路&#xff1a;依据摄像头&#xff0c;依据机械臂及其传感器。建立机械臂的逆运动学方程。然后完…...

编程日记 2024/10/23 5:08:08

优化多表联表查询的常见方法归纳

目录 一、使用mybatis的嵌套查询 二、添加表冗余字段&#xff0c;减少联表查询需求 三、分表预处理&#xff0c;前端再匹配 一、使用mybatis的嵌套查询 【场景说明】 前端需要展示一张列表&#xff0c;其中的字段来源于多张表&#xff0c;如何进行查询优化&#xff1f; 【…...

编程日记 2024/10/23 5:07:06

Java毕业设计 基于SpringBoot发卡平台

Java毕业设计 基于SpringBoot发卡平台 这篇博文将介绍一个基于SpringBoot发卡平台&#xff0c;适合用于Java毕业设计。 功能介绍 首页 图片轮播　商品介绍　商品详情　提交订单　文章教程　文章详情　查询订单　 查看订单卡密　客服 　 后台管理 登录 个人信息　修改密码　管…...

编程日记 2024/10/23 5:06:05

VRoid Studio 介绍 3D 模型编辑器

VRoid Studio 是由日本公司 pixiv 开发的一款免费 3D 模型创建软件&#xff0c;专门设计用于轻松制作 3D 虚拟角色。它的主要特点是用户友好&#xff0c;允许没有 3D 建模经验的用户创建高质量的 3D 人物角色&#xff0c;尤其是针对虚拟主播&#xff08;Vtuber&#xff09;、动…...

编程日记 2024/10/23 5:05:04

软件设计模式------抽象工厂模式

抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;&#xff0c;又称Kit模式&#xff0c;属于对象创建型模式。 一&#xff1a;先理解两个概念&#xff1a; &#xff08;1&#xff09;产品等级结构&#xff1a; 即产品的继承结构。 通俗来讲&#xff0c;就是不同品…...

编程日记 2024/10/23 5:03:01

基于springboot+微信小程序校园自助打印管理系统（打印1）

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于springboot微信小程序校园自助打印管理系统实现了管理员、店长和用户。管理员实现了用户管理、店长管理、打印店管理、打印服务管理、服务类型管理、预约打印管理和系统管理。店长实现…...

编程日记 2024/10/23 5:02:00

解锁文本数据可视化的无限可能：Wordcloud库全解析

文章目录 **&#x1f31f;解锁文本数据可视化的无限可能&#xff1a;Wordcloud库全解析&#x1f510;**1. **背景介绍**2. **Wordcloud库是什么&#xff1f;**3. **如何安装Wordcloud库&#xff1f;**4. **Wordcloud库的基本函数使用方法**5. **实际应用场景**6. **常见问题及解…...

编程日记 2024/10/23 5:01:00

代码审计-Python Flask

1.Jinjia2模版注入 Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug &#xff0c;模板引擎则使用 Jinja2。jinja2是Flask作者开发的一个模板系统&#xff0c;起初是仿django模板的一个模板引擎&#xff0c;为Flask提供模板支持&#xff0c;由于…...

编程日记 2024/10/23 4:59:59

深度学习：开启人工智能的新纪元

深度学习&#xff1a;开启人工智能的新纪元 深度学习是机器学习的一个子领域&#xff0c;它基于人工神经网络的学习算法&#xff0c;特别是那些具有多个非线性变换的层&#xff08;即“深度”&#xff09;。这些算法模仿人脑处理信息的方式&#xff0c;通过学习数据的多层次表…...

编程日记 2024/10/23 4:57:57

第十四章_File类与IO流

目录 1. java.io.File类的使用 1.1 概述 1.2 构造器 1.3 常用方法 1、获取文件和目录基本信息 2、列出目录的下一级 3、File类的重命名功能 4、判断功能的方法 5、创建、删除功能 1.4 练习 2. IO流原理及流的分类 2.1 Java IO原理 2.2 流的分类 2.3 流的API 3. …...

编程日记 2024/10/23 4:56:56

Qml-CheckBox的使用

Qml-CheckBox的使用 CheckBox属性 CheckBox的继承关系&#xff1a; CheckBox – AbstractButton – Control – Item; CheckBox的属性主要继承于AbstractButton。属性checkState&#xff1a;勾选状态&#xff0c;值为&#xff1a;Qt.Unchecked、Qt.Checked、Qt.PartiallyChec…...

编程日记 2024/10/23 4:55:55

Java的RocketMQ使用

在 Spring Boot 中&#xff0c;RocketMQ 和 Kafka 都是常用的消息中间件&#xff0c;它们的使用方法有一些相似之处&#xff0c;也有各自的特点。 一、RocketMQ 在 Spring Boot 中的使用 引入依赖 在项目的pom.xml文件中添加 RocketMQ 的依赖。 <dependency><groupId…...

编程日记 2024/10/23 4:54:54

中间件之MQ-Kafka

一、引言 Apache Kafka是一个分布式消息队列系统&#xff0c;最初由LinkedIn开发&#xff0c;并于2011年开源。Kafka以其高吞吐量、低延迟和容错能力而著名&#xff0c;广泛应用于日志收集、实时流处理、事件驱动架构等领域。本文将详细介绍Kafka的基本概念、特点、应用场景以…...

编程日记 2024/10/23 4:53:53

[DB] NSM

Database Workloads&#xff08;数据库工作负载&#xff09; 数据库工作负载指的是数据库在执行不同类型任务时所需的资源和计算方式&#xff0c;主要包括以下几种类型&#xff1a; 1. On-Line Transaction Processing (OLTP) 中文&#xff1a;联机事务处理解释&#xff1a;…...

编程日记 2024/10/23 4:47:48

Redis 高可用：从主从到集群的全面解析

目录 一、主从复制 (基础)1. 同步复制a. 全量数据同步b. 增量数据同步c. 可能带来的数据不一致 2. 环形缓冲区a. 动态调整槽位 3. runid4. 主从复制解决单点故障a. 单点故障b. 可用性问题 5. 注意事项a. Replica 主动向 Master 建立连接b. Replica 主动向 Master 拉取数据 二、…...

编程日记 2024/10/23 4:45:46

全能型选手视频播放器VLC 3.0.21 for Windows 64 bits支持Windows、Mac OS等供大家学习参考

全能型选手视频播放器&#xff0c;支持Windows、Mac OS、Linux、Android、iOS等系统&#xff0c;也支持播放几乎所有主流视频格式。 推荐指数&#xff1a; ★★★★★ 优点&#xff1a; ◆、界面干净简洁&#xff0c;播放流畅 ◆、支持打开绝大多数的文件格式&#xff0c;包…...

编程日记 2024/10/23 4:44:45

解决在Vue3中使用monaco-editor创建多个实例的导致页面卡死的问题

最近在项目中使用到了monaco-editor来实现相关的业务功能&#xff0c;按照官方使用方法进行了相关操作&#xff0c;但是在使用的时候&#xff0c;总是会导致创建多个编辑器实例&#xff0c;导致页面卡死的情况&#xff0c;下面来看看怎么处理这种情况吧&#xff0c;先说一下我使…...

编程日记 2024/10/23 4:41:42

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

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/12/21 20:15:17

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2026/2/6 0:01:52

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2026/1/26 6:01:03