<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>

 

 

 

posted @ 2021-11-16 17:16  万笑佛  阅读(73)  评论(0)    收藏  举报