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

常见Vue事件修饰符浅析

一、.stop修饰符

.stop修饰符代表event.stopPropagation(),加上这个修饰符,就等于在方法中加上了这句代码。

<!--阻止单击事件继续传播-->
<a @click.stop="doThis"></a>

上面的代码等同于如下代码。

<!--阻止单击事件继续传播-->
doThis(event){
event.stoppropagation()
}

二、.prevent修饰符(重要)

.prevent修饰符代表event.preventDefault(),加上这个修饰符,就等于在方法中加上了这句代码。例如提交submit事件后触发自动刷新页面,但是加了这个修饰符之后就不会再触发。

<!--提交事件不再重载页面-->
<form @submit.prevent="onSubmit"></form>

上述代码等同于如下代码。

onSubmit(event){
event.preventDefault()
}

三、.capture修饰符

在事件监听器中通常有3个参数:监听的事件名称、回调函数和是否设置capture。所谓的capture就是指在事件捕获阶段监听还是在冒泡阶段监听,将其设置为true表示在捕获阶段监听,设置为false表示在冒泡阶段监听。

element.addEventListener(<event-name>,<callback>,{
capture:false,
passive:false,
once:false
});

设置.capture修饰符就代表在捕获阶段监听,不设置该修饰符则代表在冒泡阶段监听。所谓捕获阶段是指先执行点击元素自身的事件,再从外到里依次执行元素内部的事件。而冒泡阶段是先执行内部元素的事件,再由里到外执行父级元素的事件。

<div v-on:click.capture="doThis">...</div>

相当于

<div ref="div"></div>
const app=new Vue({
el:'#app',
mounted(){this.$refs.div.addEventListener('click',doThis,{capture:ture})
}
})

四、.passive修饰符

通常在监听时间的时候,只有当监听事件的方法执行完成后才会执行默认的操作。例如执行滚动操作,当监听页面的滚动事件时,只有当方法执行过程结束后页面才会滚动,但当在移动端时就会造成滚动卡顿的现象。
添加.passive修饰符,等于告诉浏览器不需要等到方法执行完成后再去触发滚动事件,而是立刻触发。这样可以提升移动端性能,为用户带来流畅的操作体验,因此.passive修饰符在移动端的使用比较常见。

<div v-on:scroll.passive="onScroll">...</div>

等于

<div ref="div">...</div>
const app=new Vue({
el:'app',
mounted(){
this.$refs.div.addEventListener('scroll',onScroll,{passive:true})
}
})

相关文章:

常见Vue事件修饰符浅析

一、.stop修饰符 .stop修饰符代表event.stopPropagation()&#xff0c;加上这个修饰符&#xff0c;就等于在方法中加上了这句代码。 <!--阻止单击事件继续传播--> <a click.stop"doThis"></a>上面的代码等同于如下代码。 <!--阻止单击事件继…...

怎样开始用selenium进行自动化测试?

如果您刚开始使用 Selenium 进行自动化测试&#xff0c;以下是建议的步骤。 1、安装 Selenium 首先&#xff0c;您需要安装 Selenium。Selenium 支持多种编程语言&#xff0c;如 Python、Java、C# 等。可以通过 pip 命令在 Python 中安装 Selenium&#xff1a; pip install …...

二维数组多次排序 或 嵌套list多次排序

可以排序int[ ][ ]的顺序&#xff0c;也可以排序List<List<Integer>> 顺序 为便于理解&#xff0c;以力扣原题为例&#xff1a;1333.餐厅过滤器 原题中给了一个双重数组&#xff0c;并要求返回一个List<Integer>。 方法1&#xff1a; 会用流的&#xff0c…...

Flutter - 波浪动画和lottie动画的使用

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新&#xff0c;请前往github查看最新代码 波浪动画三方库wave lottie动画 Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。具有丰富的动画效果和交互功能。 # 波浪动画 https://pub-web…...

忘记压缩包密码?解决方法一键找回,省时又便捷!

使用在线rar/zip解密工具&#xff0c;找回rar/zip密码并解密压缩包的方法非常简单。具体步骤如下&#xff1a;首先&#xff0c;在百度上搜索“密码帝官网”&#xff0c;这是一个专业的解密服务网站。然后&#xff0c;点击搜索结果中的链接&#xff0c;进入官网首页。在页面上方…...

“UTONMOS”掀起元宇宙游戏热潮,全球发展前景广阔

我们都知道&#xff0c;市面上无论是PC端的网游还是移动端手游&#xff0c;它如果要做到源源不断的内容输出&#xff0c;不仅取决于游戏公司产品质量和业绩&#xff0c;也与公司的决策和市场沟通密不可分。 元宇宙游戏市场受到关注 近年来&#xff0c;元宇宙游戏市场逐渐升温…...

用idea工具scala 和 Java开发 spark案例:WordCount

目录 一 环境准备 二 scala代码编写 三 java 代码编写 一 环境准备 创建一个 maven 工程 添加下列依赖 <dependency><groupId>org.apache.spark</groupId><artifactId>spark-core_2.12</artifactId><version>${spark.version}</vers…...

【git merge/rebase】详解合并代码、解决冲突

目录 1.概述 2.merge 3.rebase 4.merge和rabase的区别 5.解决冲突 1.概述 在实际开发中&#xff0c;一个项目往往是多个人一起协作的&#xff0c;头天下班前大家把代码交到远端仓库&#xff0c;第二天工作的第一件事情都是从服务器上拉最新的代码&#xff0c;保证代码版本…...

nrm,npm源的管理工具

npm手动切换淘宝源 查看当前的仓库 npm config get registry设置成淘宝源 npm config set registry https://registry.npmmirror.com/设置回官方源 npm config set registry https://registry.npmjs.org/手动切换不免不太方便&#xff0c;而且网上很多资料淘宝源还是过期的链接…...

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack

堆叠容器&#xff0c;子组件按照顺序依次入栈&#xff0c;后一个子组件覆盖前一个子组件。该组件从API Version 7开始支持。可以包含子组件。 一、接口 Stack(value?: { alignContent?: Alignment }) 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使用。 二、…...

腾讯云2核4G服务器一年和三年价格性能测评

腾讯云轻量2核4G5M服务器&#xff1a;CPU内存流量带宽系统盘性能测评&#xff1a;轻量应用服务器2核4G5M带宽&#xff0c;免费500GB月流量&#xff0c;60GB系统盘SSD盘&#xff0c;5M带宽下载速度可达640KB/秒&#xff0c;流量超额按照0.8元每GB的价格支付流量费&#xff0c;轻…...

集线器、交换机、路由器是如何转发包的

集线器、交换机、路由器是如何转发包的 集线器交换机MAC地址表的维护 路由器路由表中的信息路由器的包接收操作查询路由表确定输出端口找不到匹配路由时选择默认路由包的有效期通过分片功能拆分大网络包路由器发送操作中的一些特点 参考文档 集线器 集线器是一层&#xff08;物…...

交通物流模型 | MDRGCN:用于多模式交通客流预测的深度学习模型

城市交通拥堵是造成交通事故的重要原因,也是城市发展的主要障碍。通过学习历史交通流数据,我们可以预测未来一些区域的交通流,这对城市道路规划、交通管理、交通控制等都有重要意义。然而,由于交通网络拓扑结构的复杂性和影响交通流的因素的多样性,交通模式往往是复杂多变…...

保研经历分享(一)

这个系列的文章主要是想记录一下自己大学期间最重要的一件事&#xff08;保研!!&#xff09;的经历、过程&#xff0c;外加一些保研流程介绍、面试经验、院校投递、踩坑经历&#xff0c;主要给学弟学妹们避雷&#xff0c;也做一些借鉴吧~ 这一篇主要是对保研过程的一些介绍&…...

【手写数字识别】数据挖掘实验二

文章目录 Ⅰ、项目任务要求任务描述&#xff1a;主要任务要求(必须完成以下内容但不限于这些内容)&#xff1a; II、实现过程数据集描述实验运行环境描述KNN模型决策树模型朴素贝叶斯模型SVM模型不同方法对MNIST数据集分类识别结果分析(不同方法识别对比率表及结果分析) 完整代…...

什么是云计算?云计算简介

其实“云计算”作为一个名词而言&#xff0c;那是相当成功滴。很多人都有听过。但提及云计算”具体是什么?很多人&#xff0c;知其然&#xff0c;却不知其所以然! 利用软件将这些成千上万不可靠的硬件组织成一个稳定可靠的IT系统&#xff0c;以此支撑其公司的IT基础服务。这家…...

Vue路由进阶--VueRouter声明式导航

Vue路由进阶–VueRouter声明式导航 文章目录 Vue路由进阶--VueRouter声明式导航1、声明式导航1.1、导航链接1.2、高亮类名1.3、跳转传参1.4、动态路由参数可选符 1、声明式导航 1.1、导航链接 需求&#xff1a;实现导航高亮效果 vue-router提供了一个全局组件router-link(取…...

Oracle 云服务即将支持 PostgreSQL!

2023 年 9 月 19 日&#xff0c;Oracle 产品团队发布了一篇文章&#xff0c;宣布 Oracle 云基础架构&#xff08;OCI&#xff09;开始提供 PostgreSQL 服务。目前支持的版本为 PostgreSQL 14.9&#xff0c;提供有限支持&#xff0c;12 月份将会提供正式版本。 众所周知&#x…...

数字孪生项目:突破技术难关,引领未来发展

项目背景 数字孪生技术一直在不断发展&#xff0c;为企业提供了无限的潜力和机会。在这个数字时代&#xff0c;公司需要不断进化&#xff0c;以适应市场的需求和客户的期望。北京智汇云舟一直以“视频孪生”为标签&#xff0c;是数字孪生领域的头部企业&#xff0c;拥有强大的…...

MySQL 如何使用离线模式维护服务器

离线模式 作为 DBA&#xff0c;最常见的任务之一就是批量处理 MySQL 服务的启停或其他一些活动。在停止 MySQL 服务前&#xff0c;我们可能需要检查是否有活动连接&#xff1b;如果有&#xff0c;我们可能需要把它们全部杀死。通常&#xff0c;我们使用 pt-kill 杀死应用连接或…...

请解释 Linux 系统中的内核模块管理,并描述如何加载和卸载模块。

在 Linux 系统中&#xff0c;内核模块&#xff08;Kernel Modules&#xff09; 是可以在不重新编译或重启内核的情况下&#xff0c;动态添加到运行中内核的代码片段。它们通常用于支持新的硬件设备、文件系统或网络协议。 这种机制使得 Linux 内核保持精简&#xff08;核心功能…...

一步步教你:星图平台部署Qwen3-VL:30B完整流程,Clawdbot飞书集成实战

一步步教你&#xff1a;星图平台部署Qwen3-VL:30B完整流程&#xff0c;Clawdbot飞书集成实战 想象一下这个场景&#xff1a;你的团队在飞书群里讨论产品设计&#xff0c;有人发了一张UI截图问“这个按钮位置是不是太靠下了&#xff1f;”&#xff1b;财务同事上传了一张发票照…...

SSM+Vue大学生兼职网站源码+论文

代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 分享万套开题报告任务书答辩PPT模板 作者完整代码目录供你选择&#xff1a; 《SpringBoot网站项目》1800套 《SSM网站项目》1500套 《小程序项目》1600套 《APP项目》1500套 《Python网站项目》…...

双向充放电前馈控制:储能变流器PCS_PWM变流器的SVPWM调制与实现

【复现】储能变流器PCS_PWM变流器双向充放电前馈控制SVPWM调制 1、电路构成&#xff1a;三相电网、三相 PWM变流器、Buck/Boost 变换器和蓄电池 2、三相变流器控制&#xff1a;采用电压外环、电流内环双闭环PI 控制&#xff0c;电网电压和电容电流前馈&#xff0c;电感电流解耦…...

基于STM32F与ESP8266的智能桌面天气时钟:从网络授时到OLED显示的完整实现

1. 项目背景与核心功能 最近在工作室捣鼓了一个特别实用的小玩意儿——用STM32F和ESP8266做的智能桌面天气时钟。这可不是普通的电子钟&#xff0c;它能自动联网校准时间&#xff0c;还能实时显示当地天气&#xff0c;放在书桌上既美观又实用。很多朋友看到后都问我是怎么做的&…...

Java线程与操作系统线程的生命周期

平时不管是面试还是线上排查问题&#xff0c;线程生命周期都是绕不开的点&#xff0c;但我发现Java线程的状态和操作系统&#xff08;OS&#xff09;底层的线程状态很容易搞混&#xff0c;本文就来理清楚二者的区别。 先说个大前提&#xff1a; 我们常用的HotSpot虚拟机&#x…...

新手零障碍入门:在免激活的快马平台完成你的第一个Python小游戏

作为一个刚接触编程的新手&#xff0c;我最近在InsCode(快马)平台上完成了人生第一个Python小游戏——猜数字。整个过程比想象中简单得多&#xff0c;特别适合像我这样零基础的小白入门。下面分享我的学习笔记&#xff0c;希望能帮到同样想尝试编程的朋友。 为什么选择猜数字游…...

PrismML发布1比特模型:突破大模型运行困境,提升智能密度

【导语&#xff1a;大型模型在智能手机和数据中心运行面临难题&#xff0c;PrismML构建超密集智能解决方案&#xff0c;推出1比特Bonsai系列模型&#xff0c;内存占用、速度、能耗等方面表现出色&#xff0c;重塑模型设计方式。】超密集智能&#xff1a;解决大模型运行难题大型…...

微信小游戏安全漏洞深度剖析:从反编译到协议篡改

1. 微信小游戏安全风险全景图 微信小游戏凭借即点即玩的特性迅速占领市场&#xff0c;但很多开发者对安全防护的重视程度远远不够。我见过太多团队把精力全放在玩法创新上&#xff0c;结果上线三天就被破解的案例。常见的安全威胁主要来自三个方向&#xff1a;客户端篡改、协议…...

RMBG-2.0实测参数详解:batch_size=1/resize=1024/alpha_threshold=0.5设定依据

RMBG-2.0实测参数详解&#xff1a;batch_size1/resize1024/alpha_threshold0.5设定依据 1. 项目背景与核心价值 RMBG-2.0&#xff08;BiRefNet&#xff09;是目前开源领域最强大的图像抠图模型之一&#xff0c;它在处理复杂边缘细节方面表现出色&#xff0c;特别是对于毛发、…...