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

Vue的事件处理、事件修饰符、键盘事件

news 2025/7/15 2:42:07

目录

  • 1. 事件处理基本使用
  • 2. 事件修饰符
  • 3. 键盘事件

1. 事件处理基本使用

  • 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名，比如click
  • methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><button @click="showInfo1">点我提示信息（不传参）</button><button @click="showInfo2($event,66)">点我提示信息（传参）</button>
</div><script type="text/javascript">const vm = new Vue({el:'#root',methods:{showInfo1(event){console.log(event.target.innerText)    // 点我提示信息（不传参）// console.log(this) //此处的this是vmalert('同学你好！')},showInfo2(event,number){console.log(number)     // 66alert('同学你好！！')}}})
</script></body>
</html>

2. 事件修饰符

注意: 多个事件修饰符可以连写，如@click.prevent.stop

  1. prevent：阻止默认事件（常用）。如点击<a/>标签不跳转
  2. stop：阻止事件冒泡（常用）。如div里面有一个button，都有click动作，只触发button的动作，而不进行冒泡触发div的动作
  3. once：事件只触发一次（常用）。如点击按钮函数只在第一次点击时触发
  4. capture：使用事件的捕获模式。如div里面有一个button，都有click动作。正常是先捕获到div，再捕获到button，然后执行button的动作，再执行div的动作。使用了capture会先执行div的动作，再执行button的动作
  5. self：只有event.target是当前操作的元素时才触发事件。如div里面有一个button，都有click动作。正常点击button两个动作都会被触发，现在点击button只触发button的动作。这个的效果和stop动作一样
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。如@wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动，再执行触发的函数，否则执行顺序相反

使用示例如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script><style>.div1{height: 50px;background-color: skyblue;}.ul1{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style>
</head>
<body><div id="root"><h2>prevent: </h2><!-- 也可以通过调用: event.preventDefault()来实现 --><a href="http://www.baidu.com" @click.prevent="showInfo">点我不会跳转到百度</a><h2>stop: </h2><div class="div1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><h2>once: </h2><button @click.once="showInfo">点我提示信息</button><h2>capture: </h2><div class="div1" @click.capture="showMsg(1)"><button @click="showMsg(2)">我的消息后打印</button></div><h2>self: </h2><div class="div1" @click.self="showInfo"><button @click="showInfo">你点击的是按钮，而不是div哦</button></div><!-- @scroll是右边的滚动条的滚动监听, 不需要使用passive，滚动条先滚动，再执行触发的函数 --><!-- @wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动，再执行触发的函数，否则执行顺序相反 --><h2>passive: </h2><ul @wheel.passive="cal" class="ul1"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">new Vue({el:'#root',methods:{showInfo(event){alert('同学你好！')console.log(event.target)},showMsg(msg){console.log(msg)},cal(){for (let i = 0; i < 3000; i++) {console.log('i')}console.log('累坏了')}}})
</script></body>
</html>

页面显示效果如下：
页面显示效果

3. 键盘事件

  • @keydown当键盘按下触发函数，@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到

  • Vue中常用的按键别名：

    • 回车 => enter
    • 删除 => delete (捕获“删除”和“退格”键)
    • 退出 => esc
    • 空格 => space
    • 换行 => tab (特殊，必须配合keydown去使用)
    • 上 => up
    • 下 => down
    • 左 => left
    • 右 => right

  • Vue未提供别名的按键，可以使用按键原始的key值去绑定，但多个单词的注意要转为短横线命名。如Enter，caps-lock

  • 可以使用Vue.config.keyCodes.huiche = 13定义一个按键别名。但不推荐使用keyCode，因为不同浏览器的一个按键keyCode不一样，以后keyCode这种方式会被废弃

  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta(windows图标)

    • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。如ctrl + s，key和keyCode是s和83，但是ctrl的key和keyCode是Control和17。也可以指定按键，如@keyup.ctrl.y="showInfo"
    • 配合keydown使用：正常触发事件

使用示例如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><input type="text" placeholder="按下一个指定键让弹框显示值" @keyup.enter="showInfo">
</div><script type="text/javascript">Vue.config.keyCodes.huiche = 13new Vue({el: '#root',methods: {showInfo(event) {console.log(event.key, event.keyCode)    // 获取按键的名称和codealert(event.target.value)       // 获取输入框的值}}})
</script></body>
</html>

相关文章：

Vue的事件处理、事件修饰符、键盘事件

目录 1. 事件处理基本使用2. 事件修饰符3. 键盘事件 1. 事件处理基本使用 使用v-on:xxx或xxx绑定事件&#xff0c;其中xxx是事件名&#xff0c;比如clickmethods中配置的函数&#xff0c;都是被Vue所管理的函数&#xff0c;this的指向是vm或组件实例对象 <!DOCTYPE html&g…...

编程日记 2024/8/10 13:19:36

c++单例实践

C单例实践 在日常开发中&#xff0c;虽然太多的单例调用会让代码的耦合度变高&#xff0c;但是例如日志类这种&#xff0c;单例模式就变得非常有。所以这篇文章为大家介绍static 关键字相关知识以及如何实现自己的C单例类。 static关键字 首先让我们请出今天的主角: static。…...

编程日记 2024/8/10 13:17:34

SQL注入实例（sqli-labs/less-9）

0、初始页面 1、爆库名 使用python脚本 def inject_database1(url):name for i in range(1, 20):low 32high 128mid (low high) // 2while low < high:payload "1 and if(ascii(substr(database(),%d,1)) > %d ,sleep(2),0)-- " % (i, mid)res {"…...

编程日记 2024/8/10 13:15:32

http不同类型方法的作用，get和post区别

在HTTP协议中&#xff0c;不同的请求方法用于不同的操作。常见的HTTP方法包括GET、POST、PUT、DELETE、HEAD、OPTIONS、PATCH等&#xff0c;每种方法有其特定的作用。 常见的HTTP方法及其作用 1. GET - **作用**: 从服务器请求指定资源。GET方法通常用于获取数据而不会修改数据…...

编程日记 2024/8/10 13:12:28

# 利刃出鞘_Tomcat 核心原理解析（二）

利刃出鞘_Tomcat 核心原理解析&#xff08;二&#xff09; 一、 Tomcat专题 - Tomcat架构 - HTTP工作流程 1、Http 工作原理 HTTP 协议&#xff1a;是浏览器与服务器之间的数据传送协议。作为应用层协议&#xff0c;HTTP 是基于 TCP/IP 协议来传递数据的&#xff08;HTML文件…...

编程日记 2024/8/10 13:10:27

美团秋招笔试第三题（剪彩带）求助帖

题目描述及代码如下。 我使用模拟打表法&#xff0c;示例通过了&#xff0c;但是提交通过率为0。诚心求教。欢迎补充题目&#xff0c;或者有原题链接更好~。我觉得可能出错的点&#xff1a;int -> long long ?或者一些临界条件。 /* 美团25毕业秋招第三题&#xff0c;做题…...

编程日记 2024/8/10 13:09:25

LeetCode 算法：最小栈 c++

原题链接&#x1f517;&#xff1a;最小栈 难度&#xff1a;中等⭐️⭐️ 题目 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推…...

编程日记 2024/8/10 13:07:24

【解压既玩】PS3模拟器v0.0.32+战神3+战神升天+各存档 整合包 ，完美不死机，没有BUG，旷世神作，强力推荐

战神3是圣莫尼卡公司的大作&#xff0c;PS3 上必玩的游戏之一。 本文收集了战神3和升天两作&#xff0c;附存档&#xff0c;完美不死机&#xff0c;没有BUG&#xff0c;强烈推荐。 解压即玩。 立即下载&#xff1a;【chumenx.com】【解压既玩】PS3模拟器v0.0.32战神3战神升天…...

编程日记 2024/8/10 13:06:22

bootstrap- X-editable 行内编辑

前面不要忘记引入editable {field: weigh, title: __(Weigh),editable: {type: text,url: "api/cat/editWeigh",validate: function (v) {if($.trim(v) ) return 值不能为空;if(!$.isNumeric(v)) return 值只能为数字;if(v<0 || v%1!0) return 值必需为正整数;}…...

编程日记 2024/8/10 13:03:20

【LabVIEW学习篇 - 12】：通知器

文章目录 通知器案例一案例二案例三&#xff08;在不同VI中用同一个通知器&#xff09; 通知器 同步技术&#xff1a;同步技术用来解决多个并行任务之间的同步或通信问题。 通知器比较适合一对多的操作&#xff0c;类似于广播&#xff0c;一点发出的通知消息&#xff0c; 其它…...

编程日记 2024/8/10 13:00:17

Oracle一对多(一主多备)的DG环境如何进行switchover切换？

本文主要分享Oracle一对多(一主多备)的DG环境的switchover切换&#xff0c;如何进行主从切换&#xff0c;切换后怎么恢复正常同步&#xff1f; 1、环境说明 本文的环境为一主两备&#xff0c;数据库版本为11.2.0.4&#xff0c;主要信息如下&#xff1a; 数据库IPdb_unique_n…...

编程日记 2024/8/10 12:58:14

【浏览器插件】Chrome扩展V3版本

前言&#xff1a;Chrome从2022年6月开始&#xff0c;新发布插件只接受V3版。2024年V2版已从应用商店下架。 浏览器扩展插件开发API文档 chrome官网&#xff08;要翻墙&#xff09;&#xff1a; https://developer.chrome.com/docs/extensions/mv3 MDN中文&#xff1a;https:/…...

编程日记 2024/8/10 12:57:12

编码器信号干扰问题、编码器选型

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录 前言一、屏蔽技术1.静电屏蔽:2.低频磁屏蔽:3.电磁屏蔽:4.减少“天线” 二、增量编码器的信号选择三、信号电缆选择四、…...

编程日记 2024/8/10 12:56:10

Unity入门5——材质

创建材质 点击Assets → Create → Material&#xff0c;得到一个默认材质球的副本。 使用材质 直接把材质球拖拽到物体上&#xff0c;或设置mesh renderer组件下的Materials 数组中第一个元素...

编程日记 2024/8/10 12:55:08

C的温故而知新：存储类别、链接和内存管理（C Primer Plus第十二章）

存储类别、链接和内存管理 这一章主要涉及到的是一些偏概念的东西&#xff0c;基本上偏向于自己去理解这部分内容。很好地理解这一章可以更好地控制程序&#xff0c;合理的利用内存存储数据。 C语言提供了多种不同的模型或存储类别在内存中存储数据。作用域有块作用域、函数作…...

编程日记 2024/8/10 12:54:07

SpringBoot统一功能处理——统一数据返回格式

目录 一、简单使用 二、存在的问题描述 三、优点 一、简单使用 统一的数据返回格式使用 ControllerAdvice 和 ResponseBodyAdvice 的方式实现 ControllerAdvice 表示控制器通知类。 添加类 ResponseAdvice , 实现 ResponseBodyAdvice 接口&#xff0c;并在类上添加 …...

编程日记 2024/8/10 12:53:06

Milvus 实践(2) --- 2.4.x 安装，脚本分析，数据存储解析

目录 背景 Milvus2.4.x安装脚本分析 etcd组件 container_name image 参数 注意问题 environment volumes 实体化 command 参数 注意事项 healthcheck 参数 作用 下载 minio组件 container_name image 参数 注意事项 environment 参数 ports 参数 注…...

编程日记 2024/8/10 12:52:04

【蛋疼c++】千万别用std::wifstream读取Unicode UTF16文件

上当了。 最近程序要和 Jscript / activex 脚本通信。 ActiveX这玩意&#xff0c;导出文件&#xff0c;如果是UTF8导出&#xff0c;会出现莫名异常&#xff1a;写一半直接退出。或许是系统语言设置的问题。 但是切换为utf16&#xff08;unicode&#xff09;导出就没有问题&a…...

编程日记 2024/8/10 12:51:03

[算法] 第二集 二叉树中的深度搜索

深度优先遍历&#xff08;DFS&#xff0c;全称为 Depth First Traversal&#xff09;&#xff0c;是我们树或者图这样的数据结构中常⽤的 ⼀种遍历算法。这个算法会尽可能深的搜索树或者图的分支&#xff0c;直到⼀条路径上的所有节点都被遍历 完毕&#xff0c;然后再回溯到上…...

编程日记 2024/8/10 12:50:02

放弃使用外键时，sequelize 应该怎么使用？

在使用 Sequelize 时&#xff0c;如果想放弃使用外键&#xff0c;但仍然希望在模型之间建立关联&#xff0c;可以通过设置 constraints 选项为 false 来实现。这允许你定义模型之间的关系&#xff0c;而不在数据库中创建外键约束。以下是具体的实现步骤&#xff1a; 定义没有外…...

编程日记 2024/8/10 12:45:59

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/7/13 9:04:22

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/7/14 20:00:29

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/13 15:21:14

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/7/14 18:30:56

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/7/8 20:58:51

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/7/10 22:40:22

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/7/14 1:29:37

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/7/13 14:53:06

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/6/15 15:47:35