前端技术分享
0%

【005】Vue基础学习：v-on的使用

发表于 更新于 分类于

前言

Vue使用v-on指令监听DOM事件，在开发过程中，可以将其绑定在DOM节点上，以此监听DOM事件来触发一些javascript代码。

点击事件

模版写法：

1
2
3
<button v-on:click="onClick">点击</button>
或简写：
<button @click="onClick">点击</button>

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<button @click="onClick">点击</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					onClick() {
						alert('我被点击了');
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件后，点击里面的按钮可以看到成功弹出我被点击了

回车事件

模版写法：

1
2
3
<input v-on:keyup.enter="onEnter" />
或简写：
<input @keyup.enter="onEnter" />

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<input @keyup.enter="onEnter" />
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					onEnter() {
						alert('我被回车了');
					}
				}
			})
		</script>
	</body>
</html>

在浏览器运行此文件后，点击文本框，然后回车可以看到成功弹出我被点击了

常见修饰符

在日常开发中，经常会使用event.preventDefault（阻止节点默认行为）和event.stopPropagation（阻止事件冒泡），Vue将其封装成简短易用的事件修饰符，可以写在事件名称的后面。

名称 说明
.stop 阻止事件冒泡
.prevent 阻止元素默认行为
.capture 阻止事件捕获
.self 限制事件仅作用于节点自身
.once 事件被触发一次后即解除监听
.passive 可用在移动端滚动事件中，限制事件永不调用preventDefault()方法

模版写法：

1
2
3
<form @submit.prevent="onSubmit">
	<button type="submit">提交</button>
</form>

完整代码：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<form @submit.prevent="onSubmit">
				<button type="submit">提交</button>
			</form>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				methods: {
					onSubmit() {
						alert('我被提交了');
					}
				}
			})
		</script>
	</body>
</html>

代码说明：当未指定form表单的action时，表单会被提交到当前的URL，所以可以使用.prevent阻止元素默认行为。

按键修饰符

别名修饰符 | 键值修饰符 | 对应按键
————|——— |———–
.delete | .8/.46 | 回车/删除
.tab | .9 | 制表
.enter | .13 | 回车
.esc | .27 | 退出
.space | .32 | 空格
.left | .37 | 左
.up | .38 | 上
.right | .39 | 右
.down | .40 | 下

总结

v-on 在平时开发中是很常用的，触发事件也有很多，在这里就不一一列举了，如果有兴趣，可以上网搜索下。