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

Vue-9、Vue事件修饰符

news 2025/12/19 22:15:13

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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/12/18 16:42:54

UDP(Echoserver)

网络命令 Ping 命令检测网络是否连通使用方法: ping -c 次数网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态常用选项： n 拒绝显示别名&#…...

编程新知 2025/12/19 12:09:55

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/12/9 4:10:18

如何在网页里填写 PDF 表格？

有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据&#xff…...

编程新知 2025/12/9 12:17:40

《C++ 模板》

目录函数模板类模板非类型模板参数模板特化函数模板特化类模板的特化模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。函数模板函数模板可以简化函数重载的代码。格式：templa…...

编程新知 2025/6/11 3:20:47

springboot整合VUE之在线教育管理系统简介

可以学习到的技能学会常用技术栈的使用独立开发项目学会前端的开发流程学会后端的开发流程学会数据库的设计学会前后端接口调用方式学会多模块之间的关联学会数据的处理适用人群在校学生，小白用户，想学习知识的有点基础，想要通过项…...

编程新知 2025/12/16 1:40:33

C++.OpenGL （20/64）混合（Blending）

混合（Blending）透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

并发编程 - go版

1.并发编程基础概念进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/12/13 10:22:33

Web后端基础(基础知识)

BS架构：Browser/Server，浏览器/服务器架构模式。客户端只需要浏览器，应用程序的逻辑和数据都存储在服务端。优点：维护方便缺点：体验一般 CS架构：Client/Server，客户端/服务器架构模式。需要单独…...

编程新知 2025/12/19 21:07:10

麒麟系统使用-进行.NET开发

文章目录前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结前言麒麟系统的内核是基于linux的，如果需要进行.NET开发，则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET，所以要进…...

编程新知 2025/12/12 10:19:18

相关文章：