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

Vue常见的事件修饰符

前言

vue一共给我们准备了6个事件修饰符,前三个比较常用,后三个少见,这里着重讲下前三个

1.prevent:阻止默认事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只触发一次(常用)
4.captrue:使用事件的捕捉模式(不常用)
5.self:只有event.target是当前操作的元素时才触发事件(不常用)
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕(不常用)

阻止默认事件(常用)

首先写一个简单的例子,一个简单的超链接标签,我们给一个百度链接和一个单击事件

在这里插入图片描述

查看页面,虽然点击文字出现了弹窗,但是随之跳到了超链接指向的地址

在这里插入图片描述

在这里插入图片描述

跳转到链接是a标签的默认行为,那么我们怎么阻止这个默认行为呢?

普通阻止默认行为方式

使用参数对象的preventDefault方法

在这里插入图片描述

这时候浏览器点击文字提示弹框后就不会跳转了

vue阻止默认行为方式

在vue中,不用我们亲自编写上面的方式,我们可以在事件名称后面跟一个.prevent就可以阻止默认行为了,效果都是一样的

 <!-- .prevent:阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

在这里插入图片描述

阻止事件冒泡(常用)

编写代码,实现例子

在这里插入图片描述

我们发现,单击玩确定后会继续弹窗,这就是一个冒泡事件

在这里插入图片描述

阻止的方式和上一个例子类似,我这里以及下面都用vue特定的阻止行为了

我们在单击事件前面加上.stop

<!--   .stop:阻止事件冒泡 -->
<button @click.stop="showInfo">点我提示信息</button>

在这里插入图片描述

再次验证浏览器,解决问题

事件只触发一次(常用)

编写代码

在这里插入图片描述

如图,按钮点击多少次,就会弹窗多少次

在这里插入图片描述

我们加上once修饰符

<!--   3.once:事件只触发一次 --><button @click.once="showInfo">点我提示信息</button>

使用事件的捕捉模式 (不常用)

在这里插入图片描述

   <!--  4.captrue:使用事件的捕捉模式 --><div class="box1" @click.capture="showMsg(1)">div1 <div  class="box2" @click="showMsg(2)">div2</div></div>

在这里插入图片描述

只有event.target是当前操作的元素时才触发事件(不常用)

 <!--     5.只有event.target是当前操作的元素时才触发事件 --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div>

在这里插入图片描述

在这里插入图片描述

事件的默认行为立即执行,无需等待事件回调执行完毕不常用)

在这里插入图片描述

在这里插入图片描述

扩展:多个修饰符使用小技巧

比如现在有个需求,我们知道点击超链接后会弹窗然后跳转到指定的url,那么我们又想阻止冒泡,又想阻止默认行为,该怎么办呢?

在这里插入图片描述

我们可以多个修饰符一起使用,比如

// 多个事件修饰符一起使用,可以随意顺序<a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>

在这里插入图片描述

页面上只会弹窗就不跳转了

总结

个人感觉,了解常见的这些时间修饰符就够用了,不常见的了解即可。用到的时候再搜索相关资料

相关文章:

Vue常见的事件修饰符

前言 vue一共给我们准备了6个事件修饰符&#xff0c;前三个比较常用&#xff0c;后三个少见&#xff0c;这里着重讲下前三个 1.prevent:阻止默认事件(常用) 2. stop:阻止事件冒泡(常用) 3. once:事件只触发一次(常用) 4.captrue:使用事件的捕捉模式(不常用) 5.self:只有event…...

【卷积神经网络】激活函数 | Tanh / Sigmoid / ReLU / Leaky ReLU / ELU / SiLU / GeLU

文章目录一、Tanh二、Sigmoid三、ReLU四、Leaky ReLU五、ELU六、SiLU七、Mish本文主要介绍卷积神经网络中常用的激活函数及其各自的优缺点 最简单的激活函数被称为线性激活&#xff0c;其中没有应用任何转换。 一个仅由线性激活函数组成的网络很容易训练&#xff0c;但不能学习…...

刷题记录:牛客NC24048[USACO 2017 Jan P]Promotion Counting 求子树的逆序对个数

传送门:牛客 题目描述 奶牛们又一次试图创建一家创业公司&#xff0c;还是没有从过去的经验中吸取教训–牛是可怕的管理者&#xff01; 为了方便&#xff0c;把奶牛从 1∼n1\sim n1∼n 编号&#xff0c;把公司组织成一棵树&#xff0c;1 号奶牛作为总裁&#xff08;这棵树的根…...

MpAndroidChart3最强实践攻略

本篇主要总结下Android非常火爆的一个三方库MpAndroidChart的使用。可能在大多数情况下&#xff0c;我们很少会在Android端去开发图表。但如果说去做一些金融财经类、工厂类、大数据类等的app&#xff0c;那么绝对会用到MpAndroidChart。 一、前言 2018年&#xff0c;那年的我…...

Spring笔记(9):事务管理ACID

一、事务管理 一个数据库事务是一个被视为单一的工作单元操作序列。 事务管理有四个原则&#xff0c;被成为ACID&#xff1a; Atomicity 原子性—— 事务作为独立单元进行操作&#xff0c;整个序列是一体的&#xff0c;操作全都成功或失败。Consistency 一致性—— 引用完整…...

io流 知识点+代码实例

需求 : 如何实现读写文件内部的内容?流 : 数据以先入先出的方式进行流动相当于管道,作用用来传输数据数据源-->流-->目的地流的分类 :流向分 : 以程序为中心输入流输出流操作单元 :字节流 : 万能流字符流 : 只能操作纯文本文件功能分 :节点流 : 真实实现读写的功能流(包…...

【MySQL】P8 多表查询(2) - 连接查询 联合查询

连接查询以及联合查询多表查询概述连接查询内连接隐式内连接显式内连接外连接左外连接右外连接自连接联合查询多表查询概述 建表语句见上一篇博文&#xff1a;https://blog.csdn.net/weixin_43098506/article/details/129402302 e.g.e.g.e.g. select * from emp, dept where e…...

QML动画(Animator)

在Qt5.2之后&#xff0c;引入Animator动画元素。这种方式可以直接所用于Qt Quick的场景图形系统&#xff0c;这使得基于Animator元素的动画及时在ui界面线程阻塞的情况下仍然能通过图形系统的渲染线程来工作&#xff0c;比传统的基于对象和属性的Animation元素能带来更好的用户…...

Git 分支操作【解决分支冲突问题】

1. 什么是分支 在版本控制过程中&#xff0c;同时推进多个任务&#xff0c;为每个任务&#xff0c;我们就可以创建每个任务的单独分支。使用分支意味着程序员可以把自己的工作从开发主线上分离开来&#xff0c;开发自己分支的时候&#xff0c;不会影响主线分支的运行。对于初学…...

盘点全球10大女性技术先驱

盘点全球10大女性技术先驱 人们普遍认为技术是男性主导的领域&#xff0c;但事实&#xff0c;技术或编程与性别无关&#xff0c;几乎任何人都可以成为技术大神。已经有很多案例证明女性同样可以在技术领域施展才能。在女神节来临之际&#xff0c;我为大家盘点一下为编程做出卓越…...

C++之dynamic_cast

C之dynamic_cast前言dynamic_castNote:示例:前言 dynamic_cast运算符牵扯到的面向对象的多态性跟程序运行时的状态&#xff0c;所以不能完全的使用传统的转换方式来替代。因此是最常用&#xff0c;最不可缺少的一个运算符&#xff0c;与static_cast一样&#xff0c;dynamic_cas…...

JavaScript 箭头函数、函数参数

箭头函数&#xff1a; 箭头函数是一种更加简洁的函数书写方式箭头函数本身没有作用域&#xff08;无this&#xff09;箭头函数的this指向上一层&#xff0c;上下文决定其this基本语法&#xff1a;参数 > 函数体 a. 基本用法 let fn v > v; //等价于 let fn function(…...

JavaScript_Object.keys() Object.values()

目录 一、Object.keys() 二、Object.values() 一、Object.keys() Object.keys( ) 的 用法 : 作用 &#xff1a;遍历对象 { } 返回结果&#xff1a;返回 对象中 每一项 的 key 值 返回值 : 是一个 *** [ 数 组 ] *** 例子 ( 1 ) : <script>// 1. 定义一个对象var obj …...

扬帆优配|高送转+高分红+高增长潜力股揭秘

高送转且高分红的高增加股票&#xff0c;有望跑赢大盘。 此前七连阴的泽宇智能&#xff0c;今日早盘大幅高开。到上午收盘&#xff0c;该股飙涨9.3%&#xff0c;位居涨幅榜前列。音讯面上&#xff0c;3月7日晚间&#xff0c;泽宇智能发表2022年年报&#xff0c;年报显现&#x…...

基于transformer的多帧自监督深度估计 Multi-Frame Self-Supervised Depth with Transformers

Multi-Frame Self-Supervised Depth with Transformers基于transformer的多帧自监督深度估计0 Abstract 多帧深度估计除了学习基于外观的特征外&#xff0c;也通过特征匹配利用图像之间的几何关系来改善单帧估计。我们采用深度离散的核极抽样来选择匹配像素&#xff0c;并通过一…...

设计模式: 单例模式

目录单例模式应用场景实现步骤涉及知识点设计与实现单例模式 通过单例模式的方法创建的类在当前进程中只有一个实例&#xff1b; 应用场景 配置管理 日志记录 线程池 连接池 内存池 对象池 消息队列 实现步骤 将类的构造方法定义为私有方法 定义一个私有的静态实例 提供一…...

idea编辑XML文件出现:Tag name expected报错

说明 Tag name expected解释其实就是&#xff1a;需要标记名称&#xff0c;也就是符号不能直接使用的意思 XML (eXtensible Markup Language) 是一种标记语言&#xff0c;用于存储和传输数据。在 XML 中&#xff0c;有些字符被视为特殊字符&#xff0c;这些字符在 XML 中具有…...

第十三届蓝桥杯省赛C++ A组 爬树的甲壳虫(简单概率DP)

题目如下&#xff1a; 思路 or 题解&#xff1a; 概率DP 状态定义&#xff1a; dp[i]dp[i]dp[i] 表示从树根到第 iii 层的期望 状态转移&#xff1a; dp[i](dp[i−1]1)∗11−pdp[i] (dp[i - 1] 1) * \frac{1}{1-p}dp[i](dp[i−1]1)∗1−p1​ 这个式子的意思是&#xff1a;…...

手动集成Tencent SDK遇到的坑!!!

手动集成的原因 由于腾讯未把Tencent SDK上传到Github中&#xff0c;所以我们不能通过Cocoapods的方式集成&#xff0c;只能通过官方下载其SDK手动集成。 Tencent SDK手动集成步骤 1.访问腾讯开放平台SDK下载界面&#xff0c;找到并下载iOS_SDK_V3.5.1。&#xff08;目前最新…...

三天吃透mybatis面试八股文

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…...

SpringBoot整合Quartz以及异步调用

文章目录前言一、异步方法调用1、导入依赖2、创建异步执行任务线程池3、创建业务层接口和实现类4、创建业务层接口和实现类二、测试定时任务1.导入依赖2.编写测试类&#xff0c;开启扫描定时任务3.测试三、实现定时发送邮件案例1.邮箱开启IMAP服务2.导入依赖3.导入EmailUtil4.编…...

Golang 中 Slice的分析与使用(含源码)

文章目录1、slice结构体2、slice初始化3、append操作4、slice截取5、slice深拷贝6、值传递还是引用传递参考文献众所周知&#xff0c;在golang中&#xff0c;slice&#xff08;切片&#xff09;是我们最常使用到的一种数据结构&#xff0c;是一种可变长度的数组&#xff0c;本篇…...

瀑布开发与敏捷开发的区别,以及从瀑布转型敏捷项目管理的5大注意事项

事实证明&#xff0c;瀑布开发管理模式并不适合所有的软件项目&#xff0c;但敏捷项目管理却对大多数项目有效。那么当团队选择转型敏捷的时候有哪些因素必须注意&#xff1f;敏捷开发最早使用者大多是小型、独立的团队&#xff0c;他们通常致力于小型、独立的项目。正是他们的…...

“华为杯”研究生数学建模竞赛2007年-【华为杯】A题:建立食品卫生安全保障体系数学模型及改进模型的若干理论问题(附获奖论文)

赛题描述 我国是一个拥有13亿人口的发展中国家,每天都在消费大量的各种食品,这批食品是由成千上万的食品加工厂、不可计数的小作坊、几亿农民生产出来的,并且经过较多的中间环节和长途运输后才为广大群众所消费,加之近年来我国经济发展迅速而环境治理没有能够完全跟上,以…...

基于JavaWeb学生选课系统开发与设计(附源码资料)

文章目录1. 适用人群2. 你将收获3.项目简介4.技术实现5.运行部分截图5.1.管理员模块5.2.教师模块5.3.学生模块1. 适用人群 本课程主要是针对计算机专业相关正在做毕业设计或者是需要实战项目的Java开发学习者。 2. 你将收获 提供&#xff1a;项目源码、项目文档、数据库脚本…...

centos7 oracle19c安装||新建用户|| ORA-01012: not logged on

总共分三步 1.下载安装包:里面有一份详细的安装教程 链接&#xff1a;https://pan.baidu.com/s/1Of2a72pNLZ-DDIWKrTQfLw?pwd8NAx 提取码&#xff1a;8NAx 2.安装后,执行初始化:时间较长 /etc/init.d/oracledb_ORCLCDB-19c configure 3.配置环境变量,不配置环境变量,sq…...

【算法设计-分治】递归与尾递归

文章目录1. 阶乘尾递归&#xff1a;递归的进一步优化2. 斐波那契数列3. 最大公约数&#xff08;GCD&#xff09;4. 上楼梯5. 汉诺塔&#xff08;1&#xff09;输出移动过程输出移动步数5. 汉诺塔&#xff08;2&#xff09;输出移动过程输出移动步数6. 杨辉三角形7. 完全二叉树1…...

HTML 编辑器

文章目录 HTML 编辑器HTML 编辑器推荐编辑器下载网站HBuilder步骤 1: 新建 HTML 文件步骤 2: 另存为 HTML 文件步骤 3: 在浏览器中运行这个 HTML 文件HTML 编辑器 HTML 编辑器推荐 可以使用专业的 HTML 编辑器来编辑 HTML,我为大家推荐几款常用的编辑器: Notepad++:Windows…...

css盒模型详解

一、引言 盒模型是网页开发中的一个基本概念&#xff0c;它描述了网页元素的外观和大小。盒模型由内容区域、内边距、边框和外边距四个部分组成&#xff0c;这些部分的大小和位置都可以通过CSS进行控制。在本文中&#xff0c;我们将介绍盒模型的概念和作用&#xff0c;并提出本…...

函数模板(template关键字的应用)

注释&#xff1a;本文主要介绍了函数模板的由来以及用法&#xff0c;还有关键字template。 我们感到时间的延续像一条我们无法逆行的小溪。 ——柏格森 文章目录一、语言的定式二、函数模板2.1 函数模板格式2.2 模板函数的实例化2.2.1隐式实例化/显式实例化2.3 模板参数的匹配…...

做网站推广邢台/seo排名赚app官网

1 下载 Sublime Text 2 http://www.sublimetext.com/ 2 下载Nodejs插件,下载ZIP包 https://github.com/tanepiper/SublimeText-Nodejs 3 解压ZIP&#xff0c;重命名为Nodejs 4 将Nodejs复制到C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages目录下 5 重…...

郴州市做网站/seo怎么收费

按照常理&#xff0c;对于某一单元行需要显示时&#xff0c;使用&#xff1a;display:block属性&#xff0c;不需要显示时使用display:none属性&#xff0c;而且这样做在IE浏 览器中显示正常&#xff0c;没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题&#xff…...

柳州做网站设计的公司/提高百度搜索排名工具

通往牛逼的道路上不是坎坷和荆棘&#xff0c;而是蹲着一大堆傻逼&#xff0c;你就可能是最大的一个。 ----------匿名 先谈谈什么信号&#xff0c;信号就是进程正在执行&#xff0c;接受到信号&#xff0c;先执行信号&#xff0c;然后在继续执行进程&#xff0c;也是一种进程间…...

智能印刷在线设计平台/seo是什么职业做什么的

前言 今天在涉机器学习相关知识时,看到黎晨这篇文章,觉得蛮有意思的,拿来这里介绍大家.这里判定的维度越多越精准,下面判定仅供参考,仅供娱乐学习! 判定整体思路 主要从以下几个方面可以进行粗略进行判定: 1.写作习惯 每个人写作都有一些与种不同的小习惯,这些小习惯并不会…...

成都青羊网站建设/品牌营销案例

退出程序 : AltF4重画屏幕 : CtrlAltSpace完成语法 : CtrlE复制一行 : CtrlK恰好复制该位置右边的该行的字符 : CtrlShiftK复制到剪贴板 …...

全椒有做网站的吗/希爱力跟万艾可哪个猛

在开发环境中&#xff0c;如果线上数据太多&#xff0c;都放在了一个list里面&#xff0c;那么对list去进行操作的时候&#xff0c;可能就会边得很缓慢&#xff0c;尤其是当一个list数据达到上万条时&#xff0c;批量的去对数据库进行更新或删除操作&#xff0c;就会造成数据库…...