01-03.Vue:v-on的事件修饰符
01-03.Vue:v-on的事件修饰符
- 前言
- v-on的事件修饰符
- `.stop`的举例
- `.capture`举例
- `.prevent`的举例1
- `.prevent`的举例2
- `.self`举例
前言
我们接着上一篇文章 01-02.Vue的常用指令(二) 来讲
下一篇文章 01-04.Vue的使用示例:列表功能
v-on的事件修饰符
v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下:
.stop阻止冒泡。本质是调用 event.stopPropagation()。.prevent阻止默认事件(默认行为)。本质是调用 event.preventDefault()。.capture添加事件监听器时,使用捕获的方式(也就是说,事件采用捕获的方式,而不是采用冒泡的方式)。.self只有当事件在该元素本身(比如不是子元素)触发时,才会触发回调。.once事件只触发一次。
PS:一个事件,允许同时使用多个事件修饰符。
写法示范:
<!-- click事件 --><button v-on:click="doThis"></button><!-- 缩写 --><button @click="doThis"></button><!-- 内联语句 --><button v-on:click="doThat('hello', $event)"></button><!-- 阻止冒泡 --><button @click.stop="doThis"></button><!-- 阻止默认行为 --><button @click.prevent="doThis"></button><!-- 阻止默认行为,没有表达式 --><form @submit.prevent></form><!-- 串联修饰符 --><button @click.stop.prevent="doThis"></button>
.stop的举例
我们来看下面这个例子:
<template><div id="app"><div class="father" @click="fatherClick"><div class="child" @click="childClick"></div></div></div>
</template><script>
export default {data() {return {};},methods: {fatherClick: function () {console.log("father 被点击了");},childClick: function () {console.log("child 被点击了");},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.father {height: 300px;width: 300px;background: pink;
}.child {width: 200px;height: 200px;background: green;
}
</style>
上方代码中,存在冒泡的现象,父标签中包含了一个子标签。当点击子标签时,父标签也会被触发。打印顺序是:
child 被点击了father 被点击了
那么问题来了,如果我不想让子标签的点击事件冒泡到父亲,该怎么做呢?办法是:给子标签加一个事件修饰符.stop,阻止冒泡。代码如下:
<div class="child" @click.stop="childClick">
阻止冒泡后,当点击子标签时,打印结果是:
child 被点击了
PS:我发现一个有意思的现象。上方的这行代码中,如果把.stop改为:stop,造成的现象是,父标签被触发了,而子标签没有被触发。
.capture举例
.capture:触发事件时,采用捕获的形式,而不是冒泡的形式。
还是采用上面的例子:当按钮点击时,如果想要采取捕获的方式,而不是冒泡的方式,办法是:可以直接在父标签上加事件修饰符.capture。代码如下:
<div class="father" @click.capture="fatherClick">
当点击子标签时,打印结果是:
father 被点击了child 被点击了
.prevent的举例1
比如说,超链接<a>默认有跳转行为,那我可以通过事件修饰符.prevent阻止这种跳转行为。
<template><div id="app"><a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a></div>
</template><script>
export default {data() {return {};},methods: {linkClick: function () {console.log("超链接被点击了");},},
};
</script>
上方代码中:
-
如果去掉
.prevent,点击按钮后,既会打印log,又会跳转到百度页面。 -
现在加上了
.prevent,就只会打印loeg,不会跳转到百度页面。
.prevent的举例2
现在有一个form表单:
<form action="http://www.baidu.com"><input type="submit" value="表单提交"></form>
我们知道,上面这个表单因为type="submit",因此它是一个提交按钮,点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
现在,我们可以用.prevent来阻止这种默认行为。修改为:点击按钮后,不提交到服务器,而是执行我们自己想要的事件(在submit方法中另行定义)。如下:
<template><div id="app"><!-- 阻止表单中submit的默认事件 --><form @submit.prevent action="http://www.baidu.com"><!-- 执行自定义的click事件 --><input type="submit" @click="mySubmit" value="表单提交" /></form></div>
</template><script>
export default {methods: {mySubmit: function () {alert("ok");},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
</style>
上方代码中,我们通过.prevent阻止了提交按钮的默认事件,点击按钮后,执行的是mySubmit()方法里的内容。这个方法名是可以随便起的,我们甚至可以起名为submit,反正默认的submit已经失效了。
.self举例
.self只有当事件在该元素本身(比如不是子元素)触发时,才会触发回调。
我们知道,在事件触发机制中,当点击子标签时,父标签会通过冒泡的形式被触发(父标签本身并没有被点击)。可如果我给父标签的点击事件设置.self修饰符,达到的效果是:子标签的点击事件不会再冒泡到父标签了,只有点击符标签本身,父标签的事件才会被触发。代码如下:
<div class="father" @click.self="fatherClick">
疑问:既然.stop和.self都可以阻止冒泡,那二者有什么区别呢?区别在于:前者能阻止整个冒泡行为,而后者只能阻止自己身上的冒泡行为。
相关文章:
01-03.Vue:v-on的事件修饰符
01-03.Vue:v-on的事件修饰符 前言v-on的事件修饰符.stop的举例.capture举例.prevent的举例1.prevent的举例2.self举例 前言 我们接着上一篇文章 01-02.Vue的常用指令(二) 来讲 下一篇文章 01-04.Vue的使用示例:列表功能 v-on的事件修饰符 v-on 提供了很…...
MSI U盘重装系统
MSI U盘重装系统 1. 准备一块U盘 首先需要将U盘格式化,这个格式化并不是在文件管理中将U盘里面的所有东西都删干净就可以了,需要在磁盘管理中,将这块U盘格式化,如果这块U盘有分区的话,那将所有的分区都格式化并且删除…...
ubuntu如何安装gitlab runner
一、什么是GitLab Runner GitLab Runner 是 GitLab 提供的一个开源工具,用于在构建、测试和部署过程中执行作业。它是 GitLab 持续集成和持续部署(CI/CD)工作流的核心组件之一。 GitLab Runner 有以下主要功能: 作业执行:GitLab Runner 会接收来自 GitLab 的作业请求,并在指定…...
Java整合ELK实现日志收集 之 Elasticsearch、Logstash、Kibana
简介 Logstash:用于收集并处理日志,将日志信息存储到Elasticsearch里面 Elasticsearch:用于存储收集到的日志信息 Kibana:通过Web端的可视化界面来查看日志(数据可视化) Logstash 是免费且开放的服务器端数…...
如何判断自己的情商高低?
什么是情商? 情商(简称为EQ),也叫情绪智力,和我们通常提到的智商智力有所不同(侧重于理性思维),情商更贴近实际生活,如:情绪识别和自我管理,自我…...
JAVA:Spring Boot整合MyBatis Plus持久层
1、简述 MyBatis Plus是MyBatis的增强工具包,它在MyBatis的基础上进行了扩展,提供了许多便捷的功能,例如通用CRUD操作、分页插件、代码生成器等。使用MyBatis Plus,开发者可以更加方便地进行持久层操作,并且减少了很多…...
如何选择优质的气膜体育馆工程服务商—轻空间
随着现代生活的便利化和时代感的增强,气膜体育馆成为越来越多人的选择。这种美观实用的建筑在学校、社区和体育中心等地广泛应用。许多投资者和客户都有意建造气膜体育馆,但在选择工程服务商时,往往面临困惑。以下几点将帮助您做出明智的选择…...
Anti Desgin Vue 实现 表格可编辑、新增、删除功能
1、效果图 新增: 删除: 修改: 代码: <template><div><button click"add">添加</button><span style"margin-left: 8px"><template v-if"hasSelected">{…...
黄金这轮回调会有多深?
华福策略表示,综合来看,22年3月和23年5月两次回调时美联储尚在加息,后续如果美联储降息,将对黄金价格构成显著支撑,因此本次黄金价格的回调幅度应小于前两次回调幅度。 2022年3月以来,黄金共有两次大的回调…...
自定义类型:结构体详解
1.结构体 1.1 结构的基础知识 结构是一些值的集合,这些值称为成员变量。一个整型数组,它的每个数组元素只能是整型,字符型的数组它的每个元素只能是字符型。但是结构体的每个成员可以是各种不同类型的变量。 1.2结构的声明 //声明 struct t…...
嵌入式进阶——舵机控制PWM
🎬 秋野酱:《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 舵机信号线代码示例初始化PWM初始化UART打印日志初始化外部中断Extimain函数 舵机最早用于船舶上实现转向功能,由于可以通过程序连…...
Java实现抢红包算法——详细注释,标准语法
package learn;import java.math.BigDecimal; import java.util.ArrayList; import java.util.List; import java.util.Random;public class RobRedPacket {// 发红包算法,金额参数以分为单位public static List<Integer> divideRedPacket(Integer totalAmoun…...
【优选算法】位运算 {位运算符及其优先级;位运算的应用:判断位,打开位,关闭位,转置位,位图,get lowbit,close lowbit;相关编程题解析}
一、位运算符及其优先级 我们知道,计算机中的数在内存中都是以二进制形式进行存储的 ,而位运算就是直接对整数在内存中的二进制位进行操作,因此其执行效率非常高,在程序中尽量使用位运算进行操作,这会大大提高程序的性…...
服务器数据恢复—服务器正常断电重启后raid信息丢失的数据恢复案例
服务器数据恢复环境: 一台某品牌DL380 G4服务器,服务器通过该服务器品牌smart array控制器挂载了一台国产的磁盘阵列,磁盘阵列中有一组由14块SCSI硬盘组建的RAID5。服务器安装LINUX操作系统,搭建了NFSFTP,作为内部文件…...
如何理解kmp的套娃式算法啊?
概念 KMP算法,全称Knuth Morris Pratt算法 。文章大部分内容出自《数据结构与算法之美》 核心思想 假设主串是a,模式串是b 在模式串与主串匹配的过程中,当遇到不可匹配的字符的时候,对已经对比过的字符,是否能找到…...
python中树的运用样例
目录 一、文件系统样例 二、Trie树 一、文件系统样例 class FileNode:def __init__(self, name, is_fileFalse):self.name nameself.is_file is_fileself.children []def add_child(self, child):self.children.append(child)# 创建文件系统结构 root FileNode("roo…...
C++学习/复习5--构造函数与初始化/static成员/友元/内部类/匿名对象/编译器的拷贝构造优化
一、本章概要 二、再谈构造函数 1.构造体赋初值与初始化 2.初始化列表与初始化 2.1定义 2.2注意事项与举例 3.explicit关键字与构造函数 3.1隐式类型转换 也叫做自动类型转换 这种转换通常是从存储范围小的类型到存储范围大的类型,或者是从低精度的数值类型到高…...
数学建模--LaTeX基本介绍和入门
1.引言 (1)上次我们介绍到了我们这个团队第一次参加这个数学建模比赛,就是这个电工杯,我是一名论文手,我们在这个下午也是对于这个比赛过程中出现的问题做了相应的分析,每个人也是进行了反思,知…...
【Java面试】二、Redis篇(中)
文章目录 1、Redis持久化1.1 RDB1.2 AOF1.3 RDB与AOF的对比 2、数据过期策略(删除策略)2.1 惰性删除2.2 定期删除 3、数据淘汰策略4、主从复制4.1 主从全量同步4.2 增量同步 5、哨兵模式5.1 服务状态监控5.2 哨兵选主规则5.3 哨兵模式下,Redi…...
二进制安装Kubernetes(k8s)v1.30.1
二进制安装Kubernetes(k8s)v1.30.1 https://github.com/cby-chen/Kubernetes 开源不易,帮忙点个star,谢谢了 介绍 kubernetes(k8s)二进制高可用安装部署,支持IPv4IPv6双栈。 我使用IPV6的目的是…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
PHP 8.5 即将发布:管道操作符、强力调试
前不久,PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5!作为 PHP 语言的又一次重要迭代,PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是,借助强大的本地开发环境 ServBay&am…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机,交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息,系统版本:Ubuntu22.04.5 LTS;内核版本…...
