003_Vue事件

自由与束缚JavaJavaScript

已于 2022-02-10 13:01:29 修改

阅读量224

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-02-10 13:00:30 首次发布

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122858501

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Vue中如何使用v-on指令绑定事件，包括简写形式，以及事件函数的调用方式、参数传递规则。同时涵盖了阻止冒泡和阻止默认行为的事件修饰符实例。通过实际代码演示，帮助开发者理解Vue事件处理的实战应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Vue如何处理事件?

1.1. v-on指令用法

<input type='button' v-on:click='num++' />

1.2. v-on简写形式

<input type='button' @click='num++' />

2. 事件函数的调用方式

2.1. 直接绑定函数名称

<input type='button' @:click='handle1' />

2.2. 调用函数

<input type='button' @:click='handle1()' />

3. 事件函数参数传递

3.1. 普通参数和事件对象

<input type='button' @:click='handle1($event)' />
<input type='button' @:click='handle2(500, $event)' />

3.2. 如果事件直接绑定函数名称, 那么默认会传递事件对象作为事件函数的第一个参数。

3.3. 如果事件绑定函数调用, 那么事件对象必须作为最后一个参数传递, 并且事件对象的名称必须是$event。

4. 点击事件案例

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>点击事件</title>
	</head>
	<body>
		<div id="app">
			<div>{{num}}</div>
			<div>
				<button v-on:click="++num">点击1</button>
				<button @click="++num">点击2</button>
				<!-- 1. 如果事件直接绑定函数名称, 那么默认会传递事件对象作为事件函数的第一个参数。 -->
				<!-- 2. 如果事件绑定函数调用, 那么事件对象必须作为最后一个参数传递, 并且事件对象的名称必须是$event。 -->
				<button @click="handle1">点击3</button>
				<button @click="handle1($event)">点击4</button>
				<button @click="handle2(500, $event)">点击5</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					num: 0,
				},
				methods: {
					handle1: function(event){
						++this.num;
						console.log(event.target.innerHTML);
					},
					handle2: function(p, event){
						++this.num;
						this.num += p;
						console.log(event.target.innerHTML);
					}
				}
			});
		</script>
	</body>
</html>

4.2. 运行效果

4.3. 点击1

4.4. 点击2

4.5. 点击3

4.6. 点击4

4.7. 点击5

9. 事件修饰符-阻止冒泡

9.1. .stop阻止冒泡。

9.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件-阻止冒泡.stop</title>
	</head>
	<body>
		<div id="app">
			<div>{{num}}</div>
			<div @click="handle1">
				<button @click.stop="handle2">点击1</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					num: 0,
				},
				methods: {
					handle1: function(event){
						++this.num;
						console.log('handle1: ' + event.target.innerHTML);
						
					},
					handle2: function(event){
						console.log('handle2: ' + event.target.innerHTML);
						// js默认的阻止冒泡函数
						// event.stopPropagation();
					}
				}
			});
		</script>
	</body>
</html>

9.3. 运行效果

10. 事件修饰符-阻止默认行为

10.1. .prevent阻止默认行为

10.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件-阻止默认行为.prevent</title>
	</head>
	<body>
		<div id="app">
			<a href="http://www.baidu.com" @click.prevent="handle1">百度</a>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
					handle1: function(event){
						// js默认的阻止默认行为函数
						// event.preventDefault();
					}
				}
			});
		</script>
	</body>
</html>

10.3. 运行效果, 点击超链接不跳转