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

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

news 2025/11/7 13:52:49

        先看一段基本的代码：

<!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

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/10/19 8:14:08

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/11/5 17:12:12

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/11/1 3:09:34

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/11/2 20:24:05

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

编程新知 2025/10/28 15:58:29

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2025/10/30 9:12:56

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2025/10/30 2:37:04