Vue-9、Vue事件修饰符

1、prevent 阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="root"><!--prevent 阻止默认事件（常用）--><a :href="url" @click.prevent="showinfo">点我提示信息</a></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{url:'http://www.atguigu.com'},methods:{showinfo(){alert("prevent,阻止默认事件")}}})</script>
</body>
</html>

2、stop 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body><div id="root"><!--stop 阻止事件冒泡（常用）--><div class="demo1" @click="showinfo2"><button @click.top="showinfo">点我提示信息</button></div></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{url:'http://www.atguigu.com'},methods:{showinfo(){alert("你好")},showinfo2(){alert("事件冒泡")},}})</script>
</body>
</html>

另外一种写法 e.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}</style>
</head>
<body><div id="root"><!--stop 阻止事件冒泡（常用）--><div class="demo1" @click="showinfo2"><button @click="showinfo">点我提示信息</button></div></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{url:'http://www.atguigu.com'},methods:{showinfo(e){e.stopPropagation();alert("你好")},showinfo2(){alert("事件冒泡")},}})</script>
</body>
</html>

3、once 事件只触发一次（常用）

  <button @click.once="showinfo">点我提示信息</button>

4、capture: 使用事件的捕获形式

未使用前

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}</style>
</head>
<body><div id="root"><!-- capture: 使用事件的捕获形式--><div class="box1" @click="showmessage(1)">div1<div class="box2" @click="showmessage(2)">div2</div></div></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{url:'http://www.atguigu.com'},methods:{showmessage(msg){console.log(msg)},}})</script></body></html>

在这里插入图片描述
使用后

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}</style>
</head>
<body><div id="root"><!-- capture: 使用事件的捕获形式--><div class="box1" @click.capture="showmessage(1)">div1<div class="box2" @click="showmessage(2)">div2</div></div></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{url:'http://www.atguigu.com'},methods:{showmessage(msg){console.log(msg)},}})</script></body></html>

在这里插入图片描述
5、self: 只有event.target是当前操作的元素时才触发事件
使用前

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}</style>
</head>
<body><div id="root"><!-- self: 只有event.target是当前操作的元素时才触发事件--><div class="demo1" @click="showInfo"><button @click="showInfo">点我提示信息</button></div></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",methods:{showInfo(e){//alert("你好啊")console.log(e.target);},}})</script></body></html>

效果
在这里插入图片描述
使用后

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}</style>
</head>
<body><div id="root"><!-- self: 只有event.target是当前操作的元素时才触发事件--><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",methods:{showInfo(e){//alert("你好啊")console.log(e.target);},}})</script></body></html>

效果
在这里插入图片描述
6、鼠标滚轮滚动 @wheel 和 滚轮条滚动 @scroll

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width:200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style>
</head>
<body><div id="root"><!--鼠标滚轮滚动  @wheel--><ul @wheel="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul><!--滚轮条滚动  @scroll--><ul @scroll="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",methods:{demo(){console.log('@');}}})</script></body></html>

passive 事件的默认行为立即执行，无需等待事件回调执行完毕

passive使用前

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width:200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style>
</head>
<body><div id="root"><!--鼠标滚轮滚动  @wheel--><ul @wheel="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",methods:{demo(){for (let i = 0; i < 100000; i++) {console.log('#')}console.log('累坏了')}}})</script></body></html>

在这里插入图片描述
使用后
在这里插入图片描述
在这里插入图片描述

注意：prevent 和stop可以连着一起使用、

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/609964.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用html和css实现一个加载页面【究极简单】

用html和css实现一个加载页面【究极简单】

要创建一个简单的加载页面&#xff0c;你可以使用 HTML 和 CSS 来设计。以下是一个基本的加载页面示例&#xff1a; HTML 文件 (index.html): <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"…
阅读更多...
Hive基础知识（五）：Hive 配置 JDBC方式访问

Hive基础知识（五）：Hive 配置 JDBC方式访问

1&#xff09;在 hive-site.xml 文件中添加如下配置信息 <!--指定 hiveserver2 连接的 host --> <property><name>hive.server2.thrift.bind.host</name><value>hadoop100</value> </property> <!--指定 hiveserver2 连接的端口号…
阅读更多...
JavaScript中解锁Map和Set的力量

JavaScript中解锁Map和Set的力量

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 ES6带来了Map和Set两个新的数据结构 - 它们分别用于存放键值对和唯一值。Map和Set提供了更…
阅读更多...
前端国际化之痛点(三)：上线后修改翻译内容

前端国际化之痛点(三)：上线后修改翻译内容

前言 VoerkaI18n是一款非常优秀的前端国际化解决方案&#xff0c;其开发的出发点是为了解决现存多语言的一些痛点,接下来几篇文章将分别进行分析 前端国际化之痛点(一)&#xff1a;让人头疼的词条Key前端国际化之痛点(二)&#xff1a;多包多库场景下联动多语言前端国际化之痛…
阅读更多...
深入浅出Go语言：匿名函数的原理和实践案例

深入浅出Go语言：匿名函数的原理和实践案例

深入浅出Go语言&#xff1a;匿名函数的原理和实践案例 引言匿名函数的基础实际应用案例一实际应用案例二性能考虑最佳实践与常见错误结语 引言 在Go语言的世界里&#xff0c;有一个功能强大且灵活的编程元素值得每位开发者深入了解——匿名函数。作为Go语言核心特性之一&#…
阅读更多...
AI论文润色平台一览，让你的论文更加流畅易懂！

AI论文润色平台一览，让你的论文更加流畅易懂！

之前其实比较犹豫&#xff0c;是否应该整理一篇关于可辅助论文写作的在线平台的文章。因为论文这个事情&#xff0c;更重要的是要有个人的思考&#xff0c;要亲自动手写&#xff0c;这涉及到诚信的问题。然而&#xff0c;通过AI直接生成的论文可能很难通过查重和AI检测&#xf…
阅读更多...
计算机网路——延迟

计算机网路——延迟

1. 延迟 在数据传输过程中&#xff0c;从发射器到接收器&#xff0c;数据会遇到的不同类型的延迟。 1.1 延迟的种类 1.1.1 发射持续时间 这个时间段与数据的大小成正比&#xff0c;并且与网络的带宽成反比。也就是说&#xff0c;如果数据段很长或者网络带宽较小&#xff0c;那…
阅读更多...
计算机二级WPS Office考试须知、如何备考、备考建议

计算机二级WPS Office考试须知、如何备考、备考建议

本文从计算机二级考试须知、如何备考、备考建议以及考试的注意事项等方面进行讲述&#xff0c;认认真真看&#xff0c;对你受益匪浅。 一、计算机二级考试须知 2021年3月27日至29日将举办第60次全国计算机等级考试&#xff08;NCRE&#xff09;&#xff0c;从今年起&#xff0…
阅读更多...
40-特殊运算符delete,new,.getDate,.setDate,运算符优先级

40-特殊运算符delete,new,.getDate,.setDate,运算符优先级

1.delete删除. 数组 // 可以删除数组元素&#xff0c;可以删除对象键值对// 删除数组的值&#xff0c;数组长度保持不变// 删掉的值变成emptyvar arr [1,2,3,4,5];delete arr[0];console.log(arr); 对象 var obj {"a":"aa","b":"bb&quo…
阅读更多...
前端基础面试题

前端基础面试题

一、HTML 1.行内元素有哪些&#xff1f;块级元素有哪些&#xff1f; 空(void)元素有哪些&#xff1f; 行内元素&#xff1a;span、img、input... 块级元素&#xff1a;div、footer、header、section、p、h1...h6... 空元素&#xff1a;br、hr... 2.元素之间…
阅读更多...
什么是云安全？如何保护云资源

什么是云安全？如何保护云资源

云计算允许组织通过互联网按需向其客户、合作伙伴或员工提供关键业务应用程序、服务和资源。换句话说&#xff0c;不再需要物理维护资源。每当您通过 Internet 从计算机访问文件或服务时&#xff0c;您都是在访问云。 迁移到云可以帮助企业增强安全性、简化运营并降低成本。企…
阅读更多...
理解接雨水算法

理解接雨水算法

一、IDEA注释显示图片 在做题时&#xff0c;需要对照这图片&#xff0c;才能更好的梳理思路。 首先&#xff0c;注释里添加<img/>标签 之后&#xff0c;将鼠标光标放置在需要以阅读模式预览注释的地方&#xff0c;然后按快捷键CtrlAltQ即可 二、接雨水算法 先看接雨水…
阅读更多...
C++经典程序

C++经典程序

C有许多经典的程序示例&#xff0c;以下是其中一些简单但常见的例子&#xff0c;以帮助你更好地了解C语言的基本概念。 1. **Hello World程序:** cpp #include <iostream> int main() { std::cout << "Hello, World!" << std…
阅读更多...
【SPDK】【NoF】使用SPDK部署NVMe over TCP

【SPDK】【NoF】使用SPDK部署NVMe over TCP

SPDK NVMe over Fabrics Target是一个用户空间应用程序&#xff0c;通过以太网&#xff0c;Infiniband或光纤通道等结构呈现块设备,SPDK目前支持RDMA和TCP传输。 本文将在已经编译好SPDK的基础上演示如何使用SPDK搭建NVMe over TCP&#xff0c;前提是您已经将一块NVMe硬盘挂载…
阅读更多...
Python使用函数统计指定数字的个数

Python使用函数统计指定数字的个数

本题要求实现一个统计整数中指定数字的个数的简单函数。 CountDigit(number,digit )其中number是整数&#xff0c;digit为[1, 9]区间内的整数。函数CountDigit应返回number中digit出现的次数。 函数接口定义&#xff1a; 在这里描述函数接口。例如&#xff1a; CountDigit(n…
阅读更多...
Android Room数据库升级Migration解决方案

Android Room数据库升级Migration解决方案

一、介绍 Android Room 是 Android 官方提供的一个轻量级数据库框架&#xff0c;用于在 Android 应用程序中管理数据持久性。它简化了数据库访问&#xff0c;提供了更安全、更快速的数据存储方式&#xff0c;并使得数据操作更加便捷。 二、Room的特点(八股文可以参考) 以下是…
阅读更多...
【Spring实战】27 统一异常处理最佳实践

【Spring实战】27 统一异常处理最佳实践

文章目录 1. 自定义异常2. 统一异常处理3. 配置4. 应用5. 启动类6. 启动服务7. 验证8. 优点总结 在 Spring 项目中&#xff0c;有效的异常处理是确保应用程序稳定性和用户体验的关键因素之一。通过实现统一异常处理&#xff0c;我们能够更好的管理和响应应用程序中的各种异常情…
阅读更多...
Hadoop之mapreduce参数大全-2

Hadoop之mapreduce参数大全-2

25.指定在Reduce任务在shuffle阶段的fetch操作中重试的超时时间 mapreduce.reduce.shuffle.fetch.retry.timeout-ms是Apache Hadoop MapReduce任务配置中的一个属性&#xff0c;用于指定在Reduce任务在shuffle阶段的fetch操作中重试的超时时间&#xff08;以毫秒为单位&#x…
阅读更多...
Phi-2小语言模型QLoRA微调教程

Phi-2小语言模型QLoRA微调教程

前言 就在不久前&#xff0c;微软正式发布了一个 27 亿参数的语言模型——Phi-2。这是一种文本到文本的人工智能程序&#xff0c;具有出色的推理和语言理解能力。同时&#xff0c;微软研究院也在官方 X 平台上声称&#xff1a;“Phi-2 的性能优于其他现有的小型语言模型&#…
阅读更多...
安卓(雷电)模拟器清除屏幕密码

安卓(雷电)模拟器清除屏幕密码

1、设置磁盘可写 启动模拟器&#xff0c;然后在模拟器的设置界面&#xff0c;设置磁盘共享为可写入&#xff0c;重启模拟器&#xff0c;如下图&#xff1a; 2、找到模拟器目录 返回桌面&#xff0c;右键模拟器图标&#xff0c;打开文件所在目录&#xff0c;如下图&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023