<vue 基础知识 5、事件监听>
代码结构
一、 v-on基本使用
1、效果
按钮点击一下数字增加1
2、代码
01-v-on基本使用.html
<!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
<!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
<!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>