本篇文章给大家分享了关于对vue中事件处理的分析，有需要的朋友可以参考一下。
目标：
熟练掌握事件监听的方式，熟悉事件处理方式以及各类事件修饰符
理解在html中监听事件的意义
类似普通的on,例如v-on:click或@click就相当于普通的onclick, v-on调用的是vue实例methods里面的方法.
立即学习“前端免费学习笔记（深入）”；
v-on不只可以调用methods的方法, 也可以执行一些js表达式
传入特殊变量$event就可以访问到元素的DOM事件
修饰符
.stop // 阻止事件传播
.prevent // 阻止默认行为
.capture // 使用事件捕获模式(先自身处理,再次交由内部元素处理)
.self // 当event.target是当前元素自身时触发(其他元素引起的不会生效)
.once // 只能触发一次
.passive // 让默认行为立即触发
修饰符加在事件名称后面,而且可以串联,也可以只有修饰符
例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>
1.键盘事件
@keydown // 键盘按下事件
@keyup // 键盘松开事件
2.修饰符(按键别名)
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
PHP5学习对象教程由美国人古曼兹、贝肯、瑞桑斯编著，简张桂翻译，电子工业出版社于2007年12月1日出版的关于PHP5应用程序的技术类图书。该书全面介绍了PHP 5中的新功能、编程方法及设计模式，还分析阐述了PHP 5中新的数据库连接处理、错误处理和XML处理等机制，帮助读者系统了解、熟练掌握和高效应用PHP。
291
除此之外,可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
3.系统控制组合修饰
.ctrl
.alt
.shift
.meta
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <p @click.ctrl="doSomething">Do something</p>
实质上所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上
而使用v-on有以下好处:
方便查看模版绑定的事件以及能轻松定位js代码里面对应的方法
无需js手动绑定事件,和dom解耦,易于测试
当一个ViewModel被销毁时, 所有的事件处理器都会自动被删除,不用清除.
相关推荐：
以上就是对Vue中事件处理的分析的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
873
收藏
