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

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

news 2026/2/11 4:47:11

目录

  • 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

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41

基于单片机的宠物屋智能系统设计与实现（论文+源码）

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...

编程新知 2026/1/26 12:38:34