关于vue，记录一次修饰符.stop和.once的使用，以及猜想。
内置指令 | Vue.js
在vue的api里，关于v-on有stop和once两个事件标签。
.stop- 调用event.stopPropagation()。.once- 最多触发一次处理函数。
原有主要代码和页面效果 （无stop和once）:
...<div class="div" @click="divClick()"><p class="p" @click="pClick()"></p></div>...<script>...divClick(){console.log('div点击了');},pClick(){console.log('p点击了');}...</script>
.stop
stop用于在页面表单中，只触发子元素，不触发父元素的操作。例如：
<div class="div" @click="divClick()"><p class="p" @click.stop="pClick()"></p></div>效果如下。p元素（绿区）绑定了pClick的指令，p元素是div元素（背景红区）的子元素，div也绑定了一个事件。点击p元素，div所绑定的事件没有被触发。
.once
once用于在页面表单中，只触发子元素，不触发父元素的操作。例如：
<div class="div" @click="divClick()"><p class="p" @click.once="pClick()"></p></div>效果如下。p元素（绿区）绑定了pClick的指令，p元素是div元素（背景红区）的子元素，div也绑定了一个事件。点击p元素两次，p所绑定的事件只触发了一次，div所绑定的事件两次被触发。
.stop.once或者.once.stop：
代码如下：
<div class="div" @click="divClick()"><p class="p" @click.stop.once="pClick()"></p></div>效果如下：
第一次点击绿区p，只触发了绿区p的事件，没有触发红区div的事件。
第二次点击绿区p，没有触发了绿区p的事件，但是触发了红区div的事件。
点击绿区p第三次，同样只触发红区div的事件，不触发绿区p的事件。
将.stop.once改成.once.stop得到的也是一样的结果。
...<div class="div" @click="divClick()"><p class="p" @click.once.stop="pClick()"></p></div>......pClick(){console.log('p点击了 .once.stop');},...
猜想：
stop的作用是不触发当前处理函数所在元素的父级元素处理函数，once的作用是最多触发一次处理函数。当.stop.once混用的时候，第一次点击stop和once都对当前元素的函数，其作用范围只在当前元素上。但是第二次点击的时候，stop不再起作用了，父级元素可以被多次触发。
因此我猜测，once这个修饰符，在第一次点击执行后，对当前元素做了去除操作（不知道是逻辑去除还是物理去除，个人偏向物理）。这个操作不仅会去除该元素绑定的处理函数，还会去除该元素上带有的其他修饰符。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件</title><script src="../../public/script/vue_2.2.2.min.js"></script><style>.div{width: 200px;height: 200px;background-color: red;margin-top: 20px;}.div2{width: 200px;height: 200px;background-color: yellow;margin-top: 20px;}.p{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div id="app"><button @click="add('horse',$event)">加一马</button><input type="text" :value="age" /><button @click="sub()">减一马</button><div class="div" @click="divClick()"><p class="p" @click.once.stop="pClick()"></p></div><div class="div2" @click="divClick()"><p @click.stop.once="aClick()" target="_blank">Baidu一下</p></div></div><script>const vm = new Vue({el: "#app",data: {name: 'Calven',age: 24,wechat: 'CalvenZeng'},methods: {add(msg, event){this.age++;console.log(msg);console.log(event);},sub(){this.age--;},divClick(){console.log('div点击了');},pClick(){console.log('p点击了 .once.stop');},aClick(){console.log('a点击了');window.open("https://www.baidu.com", "baidu");}}});</script>
</body>
</html>
相关文章：
关于vue，记录一次修饰符.stop和.once的使用，以及猜想。
内置指令 | Vue.js 在vue的api里，关于v-on有stop和once两个事件标签。 .stop - 调用 event.stopPropagation()。.once - 最多触发一次处理函数。 原有主要代码和页面效果 （无stop和once）: ...<div class"div" click"di…...
解决git reset --soft HEAD^撤销commit时报错
今天在使用git回退功能的时候，遇到以下错误： 解决git reset --soft HEAD^撤销commit时报错 问题： 在进行完commit后，想要撤销该commit，于是使用了git reset --soft HEAD^命令，但是出现如下报错࿱…...
【BASH】回顾与知识点梳理（三十四）
【BASH】回顾与知识点梳理 三十四 三十四. 认识系统服务（二）34.1 systemctl 针对 service 类型的配置文件systemctl 配置文件相关目录简介systemctl 配置文件的设定项目简介[Unit] 部份[Service] 部份[Install] 部份 两个 vsftpd 运作的实例多重的重复设…...
Python可视化在量化交易中的应用(11)_Seaborn折线图
举个栗子，用seaborn绘制折线图。 Seaborn中折线图的绘制方法 在seaborn中，我们一般使用sns作为seaborn模块的别名，因此，在下文中，均以sns指代seaborn模块。 seaborn中绘制折线图使用的是sns.plot()函数： …...
无涯教程-TensorFlow - TensorBoard可视化
TensorFlow包含一个可视化工具，称为TensorBoard，它用于分析数据流图，还用于了解机器学习模型。 TensorBoard的重要功能包括查看有关垂直对齐的任何图形的参数和详细信息的不同类型统计的视图。 深度神经网络包括多达36，000个节点…...
[uni-app] uview封装Popup组件,处理props及v-model的传值问题
文章目录 需求及效果遇到的问题解决的办法偷懒的写法 需求及效果 uView(1.x版本)中, 有Pop弹出层的组件, 现在有个需求是,进行简单封装,有些通用的设置不想每次都写(比如 :mask-custom-style"{background: rgba(0, 0, 0, 0.7)}"这种) 然后内部内容交给插槽去自己随…...
【C++】int a；和int *p=new int；有什么区别？
2023年8月19日，周六早上 int a; 和 int *p new int; 之间有以下区别： 1. 内存分配方式：int a; 是在栈上分配内存，而 int *p new int; 是在堆上动态分配内存。 2. 生命周期：int a; 的生命周期与其所在的作用域相同&…...
redis事务管理
目录 一、redis事务定义 二、事务控制命令——Multi、Exec、discard 三、事务的错误处理 四、事务的冲突问题 悲观锁 乐观锁 WATCH unwatch 五、事务特性 单独的隔离操作 没有隔离级别的概念 不保证原子性 一、redis事务定义 Redis 事务是一个单独的隔离操作&…...
TPS_C++版本及功能支持备注
TPS_C版本及功能支持备注 相关参考链接C23：https://zh.cppreference.com/w/cpp/23 相关参考链接C20：https://zh.cppreference.com/w/cpp/20 相关参考链接C17：https://zh.cppreference.com/w/cpp/17 相关参考链接C14：https://zh.cp…...
同步jenkinsfile流水线（sync-job）
环境 变量：env（环境变量：sit/dev/simulation/prod/all），job（job-name/all）目录：/var/lib/jenkins/jenkinsfile environment.json： [roottest-01 jenkinsfile]# cat env…...
STM32单片机WIFI-APP智能温室大棚系统CO2土壤湿度空气温湿度补光
实践制作DIY- GC0161--智能温室大棚系统 基于STM32单片机设计---智能温室大棚系统 二、功能介绍： 电路组成：STM32F103CXT6最小系统LCD1602显示器DHT11空气温度湿度光敏电阻光强土壤湿度传感器SGP30二氧化碳传感器 1个继电器（空气加湿&#x…...
SpringBoot复习：（52）不再需要使用@EnableTransactionManagement的原因
在Spring项目中，要用事务，需要EnableTransactionManagement注解加Transactional注解。而在SpringBoot项目，有事务的自动配置类TransactionAutoConfiguration,代码如下： 可以在其内部类EnableTransactionManagementConfiguratio…...
HackNos 3靶场
配置 进入控制面板配置网卡 第一步：启动靶机时按下 shift 键， 进入以下界面 第二步：选择第二个选项，然后按下 e 键，进入编辑界面 将这里的ro修改为rw single init/bin/bash，然后按ctrlx，进入…...
【办公自动化】使用Python批量生成PPT版荣誉证书
🤵♂️ 个人主页：艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞Ǵ…...
【C++深入浅出】初识C++中篇（引用、内联函数）
目录 一. 前言 二. 引用 2.1 引用的概念 2.2 引用的使用 2.3 引用的特性 2.4 常引用 2.5 引用的使用场景 2.6 传值、传引用效率比较 2.7 引用和指针的区别 三. 内联函数 3.1 内联函数的概念 3.2 内联函数的特性 一. 前言 上期说道，C是在C的基础之上&…...
前端：VUE2中的父子传值
文章目录 一、背景什么是父子传值二、业务场景子传父1、在父页面中引入子页面2、子传父：父组件标识3、子传父：子组件标识 父传子父组件调用子组件中的方法 总结： 一、背景 最近做项目中需要使用到流工作，在这里流工作需要用到父子…...
【100天精通python】Day40：GUI界面编程_PyQt 从入门到实战（完）_网络编程与打包发布
目录 8 网络编程 8.1 使用PyQt 网络模块进行网络通信 服务器端示例 客户端示例 8.2 处理网络请求和响应 9 打包和发布 9.1 创建可执行文件或安装程序 9.2 解决依赖问题 9.3 发布 PyQt 应用到不同平台 9.3.1 发布到 Windows 9.3.2 发布到 macOS 9.3.3 发布到 Linux 9…...
Redis——set类型详解
概要 Set（集合），将一些有关联的数据放到一起，集合中的元素是无序的，并且集合中的元素是不能重复的 之前介绍的list就是有序的，对于列表来说[1, 2, 3] 和 [2, 1, 3]是两个不同的列表，而对于集合…...
redis---》高级用法之慢查询/pipline与事务/发布订阅/bitmap位图/HyperLogLog/GEO地理位置信息/持久化
高级用法之慢查询 # 配置一个时间，如果查询时间超过了我们设置的时间，我们就认为这是一个慢查询 # 配置的慢查询，只在命令执行阶段# 慢查询演示-设置慢查询---》只要超过某个时间的命令---》都会保存起来# 设置记录所有命令CONFIG SET slowl…...
Find My资讯|苹果Vision Pro开发者需将设备配对 AirTag
最近苹果Vision Pro获开发者申请，苹果要求获批的申请者使用 Measure and Fit 应用确认合适的佩戴尺寸，并会根据申请者提交的信息，定制不同的 Vision Pro 开发者套件，以便于契合申请者的面部特征，提供更好的佩戴体验。 …...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...