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

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

news 2026/1/2 0:02:38

        先看一段基本的代码：

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

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/12/24 23:13:19

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2026/1/1 0:27:43

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/12/16 7:53:39

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/1/1 9:40:28

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

编程新知 2025/12/24 22:27:19

新版NANO下载烧录过程

一、序言 搭建 Jetson 系列产品烧录系统的环境需要在电脑主机上安装 Ubuntu 系统。此处使用 18.04 LTS。 二、环境搭建 1、安装库 $ sudo apt-get install qemu-user-static$ sudo apt-get install python 搭建环境的过程需要这个应用库来将某些 NVIDIA 软件组件安装到 Je…...

编程新知 2026/1/1 14:27:34

生成对抗网络（GAN）损失函数解读

GAN损失函数的形式&#xff1a; 以下是对每个部分的解读&#xff1a; 1. ⁡, ​ &#xff1a;这个部分表示生成器&#xff08;Generator&#xff09;G的目标是最小化损失函数。 &#xff1a;判别器&#xff08;Discriminator&#xff09;D的目标是最大化损失函数。 GAN的训…...

编程新知 2025/12/28 23:58:49

Prompt工程学习之思维树（TOT）

思维树 定义&#xff1a;思维树&#xff08;Tree of Thoughts, ToT&#xff09; 是一种先进的推理框架&#xff0c;它通过同时探索多条推理路径对思维链&#xff08;Chain of Thought&#xff09;** 进行了扩展。该技术将问题解决视为一个搜索过程 —— 模型生成不同的中间步骤…...

编程新知 2025/10/17 0:59:18