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

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

news 2025/7/7 16:47:43

        先看一段基本的代码：

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/7/7 12:02:52

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/7 9:01:16

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/7/5 15:36:39

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/7/6 14:00:15

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/7/6 22:32:31

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/6/16 13:23:09

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/7/5 12:39:07

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2025/7/6 5:12:03

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/7/5 8:24:39

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

编程新知 2025/7/6 8:43:39