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

Vue-9、Vue事件修饰符

news 2026/2/10 2:23:29

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><!--引入vue--><script type"text/javascript" src"https://cdn.jsdeliv…...

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

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

1、vue实现双向数据绑定原理是什么&#xff1f; <!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程序化广告交易模式有哪些？媒体如何选择恰当的交易模式？

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

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

VCG 网格平滑之Laplacian平滑

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

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

Jupyter Markdown格式

穿插在程序中&#xff0c;太复杂了喧宾夺主&#xff0c;太简单了不如注释。这样就刚刚好&#xff1a; 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 实时显示时间

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

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

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

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;工作中&#xff0c;咱们经常会遇到需要多个线程协同工作的情况。CyclicBarrier&#xff0c;直译过来就是“循环屏障”。它是Java中用于管理一组线程&#xff0c;并让它们在某个点上同步的工具。简单来说&#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 的缩写&#xff0c;正如 list 的意思&#xff0c;ls 命令用于列出文件系统中的文件和目录。使用此命令&#xff0c;用户可以查看目录中的…...

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

QA面试题

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

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

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

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

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

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

文章目录 tree-selector1. 新增表单组件2. 在父组件中引用3. 父组件添加新增按钮4. 树形组件4.1 前端代码4.2 后端代码 前言&#xff1a;最近写项目&#xff0c;发现了一些很有意思的功能&#xff0c;想写文章&#xff0c;录视频把这些内容记录下。但这些功能太零碎&#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常用的几种事件有&#xff1a; 点击事件&#xff1a;当用户点击某个元素时触发&#xff0c;常用于按钮、链接等交互元素。事件名称为"click"。 javascriptbutton.addEventListener(click, function() { alert(按钮被点击了&#xff01;); }); 鼠标移动事…...

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2026/2/7 10:47:09