<vue 基础知识 5、事件监听>
代码结构
一、 v-on基本使用
1、效果
按钮点击一下数字增加1
2、代码
01-v-on基本使用.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>01-v-on基本使用</title> </head> <body> <div id= "app" > <h2>{{counter}}</h2> <button v-on:click= "counter++" >按钮1</button> <button v-on:click= "btnClick()" >按钮2</button> <!--简写--> <button @click= "counter++" >按钮3</button> <button @click= "btnClick()" >按钮4</button> </div> <script src= "vue.js" ></script> <script> let app = new Vue({ el: '#app' , data: { counter: 0 }, methods: { btnClick() { this .counter++ } } }) </script> </body> </html> |
二、 v-on参数使用
1、 效果
函数不传入参数、传入参数和event事件以及双击事件展示
2、代码
02-v-on参数问题.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>02-v-on参数问题</title> </head> <body> <div id= "app" > <h2>点击次数: {{counter}}</h2> <!-- 如果方法有参数--> <!--调用时不传入参数,那么参数为undefined--> <button @click= "btnClick1()" >按钮1</button> <!--如果方法有参数,并且希望传入event--> <button @click= "btnClick2(10, $event)" >按钮2</button> <!--双击事件--> <button v-on:dblclick= "btnClick3()" >按钮3</button></br> </div> <script src= "vue.js" ></script> <script> let app = new Vue({ el: '#app' , data: { counter: 0 }, methods: { btnClick1(payload) { this .counter++ console.log( '按钮1被点击' , payload); }, btnClick2(num, event) { this .counter++ console.log( '按钮2被点击' , num, event); } , btnClick3() { this .counter++ console.log( '按钮3被双击' ); } } }) </script> </body> </html> |
三、03-v-on修饰符
1、效果
(1)带了stop修饰符将阻止向上调用触发事件
(2)prevent修饰符阻止了跳转到百度网站的默认行为,而回掉了添加的函数
(3)once修饰符只调用一次回调函数,再次点击就触发回调函数
(4)点击回车后触发回调函数
2、 代码
03-v-on修饰符.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>03-v-on修饰符</title> </head> <body> <div id= "app" > ----------修饰符stop 停止冒泡------------ <div @click= "divClick" > <button @click= "btnClick" >不带stop修饰符按钮</button> </div> <div @click= "divClick" > <button @click.stop= "btnClick" >带stop修饰符按钮</button> </div> ----------修饰符prevent 组织默认行为------ <div> <a href= "http://www.baidu.com" @click= "aClick" >百度一下</a> </div> <div> <a href= "http://www.baidu.com" @click.prevent= "aClick" >百度一下</a> </div> -----------修饰符once 只触发一次回调函数--- <div> <button @click.once= "btnClick" >once按钮</button> </div> -----------点击回车时才触发回调----------- <div> <input type= "text" @keyup.enter= "onEnter" > </div> <div> <input type= "text" @keyup.13= "onEnter" > </div> </div> <script src= "vue.js" ></script> <script> let app = new Vue({ el: '#app' , data: { }, methods: { divClick() { console.log( 'divClick' ); }, btnClick() { console.log( 'btnClick' ); }, aClick() { console.log( 'aClick' ); }, onEnter() { console.log( 'enter被点击' ); } } }) </script> </body> </html> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!