关于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 开发者套件，以便于契合申请者的面部特征，提供更好的佩戴体验。 …...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下 总结 问题原因 在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...