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

Vue-9、Vue事件修饰符

news 2025/9/5 23:03:04

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可以连着一起使用、

在这里插入图片描述

Vue-9、Vue事件修饰符

1、prevent 阻止默认事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>事件修饰符</title><script type"text/javascript" src"https://cdn.jsdeliv…...

编程日记 2024/1/13 8:15:56

前端面试题集合六（高频）

1、vue实现双向数据绑定原理是什么？ <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>…...

编程日记 2024/1/13 8:14:54

使用Pygame库创建了一个窗口，并在窗口中加载了一个名为“ball.png“的图片，通过不断改变物体的位置，实现了一个简单的动画效果

import pygame import sys# 初始化Pygame pygame.init()# 创建窗口 screen pygame.display.set_mode((640, 480))# 加载图片 image pygame.image.load("ball.png")# 将物体初始位置设为屏幕左上角 x 0 y 0# 游戏循环 while True:# 处理事件for event in pygame.e…...

编程日记 2024/1/13 8:13:53

常见的AdX程序化广告交易模式有哪些？媒体如何选择恰当的交易模式？

程序化广告的核心目的是：让需求方能自由地选择流量与出价，程序化广告在数字广告投放中的主导地位日益巩固。程序化广告“交易模式”有哪些？以下是详细解读，帮助媒体选择恰当的交易方式，从而实现广告价值的最大化。 …...

编程日记 2024/1/13 8:11:51

VCG 网格平滑之Laplacian平滑

文章目录一、简介二、实现代码三、实现效果参考资料一、简介由于物理采样过程固有的局限性，三维扫描仪获得的网格通常是有噪声的。为了消除这种噪声，所谓的平滑算法被开发出来。这类方法有很多，VCG主要为我们提供了一种是较为经典的Laplace平滑算法，这个方法很多库都有实…...

编程日记 2024/1/13 8:09:49

Jupyter Markdown格式

穿插在程序中，太复杂了喧宾夺主，太简单了不如注释。这样就刚刚好： Headers # header 1 ## header 2 ### header 3 #### header 4Output: header 1 header 2 header 3 header 4 2. Horizontal Line Use any of three to draw a horizon…...

编程日记 2024/1/13 8:08:48

Vue3 实时显示时间

记录一下代码，方便以后使用参考的文章链接做了以下修改修改了formateDate方法中传入参数这个不合理的地方给定时器增加了间隔时间增加了取消定时器的方法  <span>当前时间：{{ nowTime }}</span>// sc…...

编程日记 2024/1/13 8:07:47

详解Java多线程之循环栅栏技术CyclicBarrier

第1章：引言大家好，我是小黑，工作中，咱们经常会遇到需要多个线程协同工作的情况。CyclicBarrier，直译过来就是“循环屏障”。它是Java中用于管理一组线程，并让它们在某个点上同步的工具。简单来说&#xf…...

编程日记 2024/1/13 8:05:46

ebpf学习

学习ebpf相关知识参考资料: awesome-ebpf 文章目录初识准备ebpf.io介绍cilium的介绍内核文档Brendan Greggs Blog 的介绍书籍Learning eBPFWhat is eBPF? 交互式环境视频基础知识学习学习环境搭建书籍阅读项目落地流程整理环境搭建内核编译bcc环境变量zliblibelflibbpflib…...

编程日记 2024/1/13 8:04:45

【Linux】Linux系统编程——ls命令

【Linux】Linux 系统编程——ls 命令 1.命令概述 ls 命令是 Linux 和其他类 Unix 操作系统中最常用的命令之一。ls 命令是英文单词 list 的缩写，正如 list 的意思，ls 命令用于列出文件系统中的文件和目录。使用此命令，用户可以查看目录中的…...

编程日记 2024/1/13 8:02:43

QA面试题

1、质量保证(QA)是什么？ QA代表质量保证。QA 是一组活动，旨在确保开发的软件满足 SRS 文档中提到的所有规范或要求。QA 遵循 PDCA 循环： 计划/Plan - 计划是质量保证的一个阶段，组织在此阶段确定构建高质量软件产品所需的过程。做…...

编程日记 2024/1/13 8:00:40

【国产mcu填坑篇】华大单片机（小华半导体）一、SPI的DMA应用(发送主机)HC32L136

最近需要用华大的hc32l136的硬件SPIDMA传输，瞎写很久没调好，看参考手册，瞎碰一天搞通了。。。先说下我之前犯的错误，也是最宝贵的经验，供参考没多看参考手册直接写（即使有点烂仍然提供了最高的参考价值。…...

编程日记 2024/1/13 7:58:38

【前后端的那些事】treeSelect树形结构数据展示

文章目录 tree-selector1. 新增表单组件2. 在父组件中引用3. 父组件添加新增按钮4. 树形组件4.1 前端代码4.2 后端代码前言：最近写项目，发现了一些很有意思的功能，想写文章，录视频把这些内容记录下。但这些功能太零碎&#xff0c…...

编程日记 2024/1/13 7:56:35

华为OD机试 - 最长子字符串的长度(二)（Java JS Python C）

题目描述给你一个字符串 s，字符串 s 首尾相连成一个环形，请你在环中找出 l、o、x 字符都恰好出现了偶数次最长子字符串的长度。输入描述输入是一串小写的字母组成的字符串输出描述输出是一个整数备注 1 ≤ s.length ≤ 5 * 10^5s 只包含小写英文字母用例输入alolob…...

编程日记 2024/1/13 7:53:30

【VRTK】【Unity】【游戏开发】更多技巧

课程配套学习项目源码资源下载 https://download.csdn.net/download/weixin_41697242/88485426?spm=1001.2014.3001.5503 【概述】本篇将较为零散但常用的VRTK开发技巧集合在一起，主要内容：创建物理手震动反馈高亮互动对象【创建物理手】非物理手状态下，你的手会直接…...

编程日记 2024/1/13 7:52:29

Spark 读excel报错，scala.MatchError

Spark3详细报错： scala.MatchError: Map(treatemptyvaluesasnulls -> true, location -> viewfs://path.xlsx, inferschema -> false, addcolorcolumns -> true, header -> true) (of class org.apache.spark.sql.catalyst.util.CaseInsensitiveMap)scala代码…...

编程日记 2024/1/13 7:49:27

【漏洞复现】Office365-Indexs-任意文件读取

漏洞描述 Office 365 Indexs接口存在一个任意文件读取漏洞，攻击者可以通过构造精心设计的请求，成功利用漏洞读取服务器上的任意文件，包括敏感系统文件和应用程序配置文件等。通过利用此漏洞，攻击者可能获得系统内的敏感信息，导致潜在的信息泄露风险免责声明技术文章…...

编程日记 2024/1/13 7:46:24

使用Python向RabbitMQ发送JSON数据只需要一个send_json方法

发送JSON数据通过调用rabbitmq.send_json(channel, user, queueresult)能够更简单的实现发送JSON数据。生产者 import json import rabbitmq# 建立连接 connection rabbitmq.get_connection()# 创建管道 channel connection.channel()# 创建队列 queue_name "user…...

编程日记 2024/1/13 7:45:23

Gitlab Gitee GitHub 远程仓库显示图片

大家好我是苏麟 , 今天出一期开发之外的如何在远程仓库展示图片 . 以GitLab为例 1.首先我们要把一张图片上传到远程仓库 . 2.第二步,点击图片 3.鼠标右键点击下载左键点击复制连接 4.找到我们要上传的md文件 , 把连接复制到 ( ) 里 , 这样上传md之后就可以看到图片了 . 这期就到…...

编程日记 2024/1/13 7:43:19

JS常用的几种事件

JavaScript常用的几种事件有： 点击事件：当用户点击某个元素时触发，常用于按钮、链接等交互元素。事件名称为"click"。 javascriptbutton.addEventListener(click, function() { alert(按钮被点击了！); }); 鼠标移动事…...

编程日记 2024/1/13 7:38:12

Java 8 Stream API 入门到实践详解

一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/7/7 9:09:17

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名转换路径 …...

编程新知 2025/7/20 13:01:09

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/23 3:55:49

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/8/13 4:43:34

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar：依赖注入与仓储模式实践在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/9/3 13:28:14

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...

编程新知 2025/9/3 14:35:11

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构代码结构代码详情功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/9/2 18:28:40

Java后端检查空条件查询

通过抛出运行异常：throw new RuntimeException("请输入查询条件！");BranchWarehouseServiceImpl.java // 查询试剂交易（入库/出库）记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

编程新知 2025/9/2 22:11:15

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南，适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者，都能在此找到适合自己的环境搭建方法和常见问题的解决方案。快速开始一分钟快速安装与虚拟环境配置 # macOS/…...

编程新知 2025/9/2 16:47:44

相关文章：