第8天 | 14天搞定Vue3.0，事件处理(详细)
yuyutoo 2025-05-02 14:25 18 浏览 0 评论
在JavaScript语言中，当用户与UI组件交互时，UI组件能够激发一个相应事件。例如，用户按动按钮、滚动文本、移动鼠标或按下按键等，都将产生一个相应的事件。
Vue3.0使用v-on指令(缩写为@符号)来监听DOM事件，并在触发事件时执行一些 JavaScript函数。语法为 v-on:click="函数名" 或@click="函数名"。
8.1 事件处理
如果你有看过前面的章节，应该知道响应用户操作事件的函数是放在methods里面的。为了省点代码，绑定事件，我就不用v-on了，而用其缩写的@，不懂得偷懒的程序员，不是好工程师啊。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0计算属性</title>
<script src="vue.global.js"></script>
</head>
<body>
<span id="app">
<button @click="say">老陈说</button>
</span>
<script>
Vue.createApp({
data() {
},
methods: {
say() {
alert("老陈说，爱编程的人真酷!")
}
},
}).mount("#app")
</script>
</body>
</html>输出结果(按下按钮)
8.2 传递参数
Vue事件绑定，除了支持直接绑定到一个方法外，也可以在内联JavaScript语句中调用方法。说白了，就是可以直接在函数中传递参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0计算属性</title>
<script src="vue.global.js"></script>
</head>
<body>
<span id="app">
<button @click="say('老陈说')">老陈说</button>
<br/><br/>
<button @click="say('老头说')">老头说</button>
</span>
<script>
Vue.createApp({
data() {
},
methods: {
say(title) {
alert(title + "，爱编程的人真酷!")
}
},
}).mount("#app")
</script>
</body>
</html>输出结果(按下按钮)
8.3 事件来源
如果界面上有多个按钮或表单，你想根据用户的不同操作，响应不同的事件，这时你可以通过监听事件源的方式进行处理。在软件系统中，我们常常见到的打开、保存、导出、打印等多个按钮在同一个功能菜单时，就可以用这种方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0计算属性</title>
<script src="vue.global.js"></script>
<style>
.menu {
border: 1px solid darkgreen;
width: 100px;
height: 150px;
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="menu" id="app">
<button name="save" @click="opt">保存</button>
<br/> <br/>
<button name="open" @click="opt">打开</button>
<br/> <br/>
<button name="print" @click="opt">打印</button>
</div>
<script>
Vue.createApp({
data() {
},
methods: {
opt(event) {
let opt = event.target.name
let src = event.target.tagName
alert('知道你点了 ' + opt + ' '
+ src + ',我马上处理.')
}
},
}).mount("#app")
</script>
</body>
</html>输出结果
细心的人，可能会想到，如果想要监听事件源，又想要传递参数时，Vue又当如何处理，不要急，你想到的，我也想到了，Vue创始人也想到了。传递参数时，将$event参数也传过去就好了。
<div class="menu" id="app">
<button name="save" @click="opt('保存',$event)">保存</button>
<br/> <br/>
<button name="open" @click="opt('打开',$event)">打开</button>
<br/> <br/>
<button name="print" @click="opt('打印',$event)">打印</button>
</div>
<script>
Vue.createApp({
data() {
},
methods: {
opt(name, event) {
let opt = event.target.name
let src = event.target.tagName
alert('知道你点了 ' + opt + '(' + name + ') '
+ src + ',我马上处理.')
}
},
}).mount("#app")
</script>输出结果
8.4 多事件处理
一个操作，多个函数响应，这便是多事件也。在Vue3.0中，这些函数都放在@click里并用逗号分隔即可。这种处理方式，真的很赞，就像你转发分享这篇文章一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0计算属性</title>
<script src="vue.global.js"></script>
<style>
.menu {
border: 1px solid darkgreen;
width: 100px;
height: 150px;
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="menu" id="app">
<button @click="add(6),sub(3)">加减</button>
</div>
<script>
let result = 0
Vue.createApp({
data() {
},
methods: {
add(num) {
result += num
},
sub(num) {
result -= num
alert('一炮双响，结果是：' + result)
}
},
}).mount("#app")
</script>
</body>
</html>输出结果
8.5 按键修饰符
不知你在用键盘输入多项内容之后，是否有按下回车键的习惯，如果没有，那证明你打字很慢，如果有，那证明你不是程序员，而是打字员(哈哈~~,什么鬼逻辑)。
在较完善的系统中，当用户按下回车键(或其他键)时，都会有响应的。为了解决这个问题，Vue允许为v-on或者@在监听键盘事件时添加按键修饰符。
Vue为最常用的键提供了.enter(回车) 、.tab 、 .delete (捕获“删除”和“退格”键)、.esc(取消) 、.up(上)、.down(下)、.left(左)、.right(右)等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0计算属性</title>
<script src="vue.global.js"></script>
<style>
.menu {
border: 1px solid darkgreen;
width: 100px;
height: 150px;
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="menu" id="app">
<button @keyup.enter="submit" @click="submit" type="submit">确定</button>
</div>
<script>
let result = 0
Vue.createApp({
data() {
},
methods: {
submit() {
alert('你明明按下了回车键，别耍赖,赶紧分享文章')
}
},
}).mount("#app")
</script>
</body>
</html>输出结果
好了，有关Vue3.0事件处理的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。
相关推荐
- 《保卫萝卜2》安卓版大更新 壕礼助阵世界杯
-
《保卫萝卜2：极地冒险》本周不仅迎来了安卓版本的重大更新，同时将于7月4日本周五，带来“保卫萝卜2”安卓版本世界杯主题活动的火热开启，游戏更新与活动两不误。一定有玩家会问，激萌塔防到底进行了哪些更新？...
- 儿童手工折纸:胡萝卜，和孩子一起边玩边学carrot
-
1、准备两张正方形纸，一橙一绿，对折出折痕。2、橙色沿其中一条对角线如图折两三角形。3、把上面三角折平，如图。4、绿色纸折成三角形。5、再折成更小的三角形。6、再折三分之一如图。7、打开折纸，压平中间...
- 《饥荒》食物代码有哪些（饥荒最新版代码总汇食物篇）
-
饥荒游戏中，玩家们需要获取各种素材与食物，进行生存。玩家们在游戏中，进入游戏后按“～”键调出控制台使用代码，可以直接获得素材。比如胡萝卜的代码是carrot，玉米的代码是corn，南瓜的代码是pump...
- Skyscanner:帮你找到最便宜机票 订票不求人
-
你喜欢旅行吗？在合适的时间、合适的目的地，来一场说走就走的旅行？机票就是关键！Skyscanner这款免费的手机应用，在几秒钟内比较全球600多家航空公司的航班安排、价格和时刻表,帮你节省金钱和时间。...
- 小猪佩奇第二季50（小猪佩奇第二季英文版免费观看）
-
Sleepover过夜Itisnighttime.现在是晚上。...
- 我在民政局工作的那些事儿(二)（我在民政局上班）
-
时间到了1997年的秋天，经过一年多的学习和实践，我在处理结婚和离婚的事情更加的娴熟，也获得了领导的器重，所以我在处理平时的工作时也能得心应手。这一天我正在离婚处和同事闲聊，因为离婚处几天也遇不到人，...
- 夏天来了就你还没瘦?教你不节食13天瘦10斤的哥本哈根减肥法……
-
好看的人都关注江苏气象啦夏天很快就要来了你是否和苏苏一样身上的肉肉还没做好准备？真是一个悲伤的故事……下面这个哥本哈根减肥法苏苏的同事亲测有效不节食不运动不反弹大家快来一起试试看吧~DAY1...
- Pursuing global modernization for peaceful development, mutually beneficial cooperation, prosperity for all
-
AlocalworkeroperatesequipmentintheChina-EgyptTEDASuezEconomicandTradeCooperationZonei...
- Centuries-old tea road regains glory as Belt and Road cooperation deepens
-
FUZHOU/ST.PETERSBURG,Oct.2(Xinhua)--NestledinthepicturesqueWuyiMountainsinsoutheastChi...
- Ftrace function graph简介（flat function）
-
引言由于android开发的需要与systrace的普及，现在大家在进行性能与功耗分析时候，经常会用到systrace跟pefetto.而systrace就是基于内核的eventtracing来实...
- JAVA历史版本（java各版本）
-
JAVA发展1.1996年1月23日JDK1.0Java虚拟机SunClassicVM，Applet，AWT2.1997年2月19日JDK1.1JAR文件格式，JDBC，JavaBea...
- java 进化史1（java的进阶之路）
-
java从1996年1月第一个版本诞生，到2022年3月最新的java18，已经经历了27年，整整18个大的版本。很久之前有人就说java要被淘汰，但是java活到现在依然坚挺，不知道java还能活...
- 学习java第二天（java学完后能做什么）
-
#java知识#...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 《保卫萝卜2》安卓版大更新 壕礼助阵世界杯
- 儿童手工折纸:胡萝卜，和孩子一起边玩边学carrot
- 《饥荒》食物代码有哪些（饥荒最新版代码总汇食物篇）
- Skyscanner:帮你找到最便宜机票 订票不求人
- 小猪佩奇第二季50（小猪佩奇第二季英文版免费观看）
- 我在民政局工作的那些事儿(二)（我在民政局上班）
- 夏天来了就你还没瘦?教你不节食13天瘦10斤的哥本哈根减肥法……
- Pursuing global modernization for peaceful development, mutually beneficial cooperation, prosperity for all
- Centuries-old tea road regains glory as Belt and Road cooperation deepens
- 15 THE NUTCRACKERS OF NUTCRACKER LODGE (CONTINUED)胡桃夹子小屋里的胡桃夹子(续篇)
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)