Vue之事件修饰符

最新推荐文章于 2024-04-04 11:02:50 发布

小陌白

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量278

点赞数

分类专栏：前端学习文章标签： vue.js javascript 前端前端框架 vue

本文链接：https://blog.csdn.net/weixin_48842132/article/details/122489755

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件修饰符

Vue中的事件修饰符：
1. prevent：阻止默认事件(常用)
2. stop：阻止事件冒泡(常用)
3. once：事件只触发一次(常用)
4. capture：使用事件的捕获模式
5. self：只有evnet.target是当前操作的元素时才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
使用：在@绑定的事件后加小圆点“.”，再跟一个后缀来使用修饰符。

例子：

阻止默认事件：

		<div id="app">
			<h2>欢迎来到{{name}}</h2>
			<!-- 阻止默认事件 -->
			<a href="http://www.baidu.com" @click.prevent="handleClick">点我提示信息</a>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					name:'河南大学'
				},
				methods:{
					handleClick(e){
						// e.preventDefault();在vue当中不需要用这个，用事件修饰符prevent，阻止a标签的默认行为(跳转)
						alert("欢迎到来!")
					}
				}
			})
		</script>

阻止事件冒泡：

事件冒泡举例：点击一个按钮时，由于它的外部容器div也有点击回调，浏览器执行了两次点击回调。
阻止事件冒泡的目的：在点击按钮的时候，我们只触发该按钮的点击回调，而不触发其外部容器div的点击回调。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
		<style type="text/css">
			*{
				margin-top: 20px;
			}
			.demo1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>欢迎来到{{name}}</h2>
			<!-- 阻止冒泡事件 -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					name:'河南大学'
				},
				methods:{
					showInfo(e){
						// e.stopPropagation();// 使用原生js阻止事件冒泡
						alert("你好!")
					}
				}
			})
		</script>
	</body>
</html>

事件只触发一次：

<div id="app">
			<h2>欢迎来到{{name}}</h2>
			<button @click.once="showInfo">事件只触发一次</button>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					name:'河南大学'
				},
				methods:{
					showInfo(e){
						alert("你好!")
					}
				}
			})
		</script>

使用事件的捕获模式：

捕获跟冒泡是相反的两个过程
何为捕获？

答：当你点击一个按钮时，其外部容器div也有点击回调，默认按照冒泡的顺序去执行这两个回调，即先执行按钮的点击回调，再执行外部div的点击回调，捕获就是与冒泡相反的过程，先执行外部div的点击回调，再执行按钮的点击回调。

<div id="app">
			<h2>欢迎来到{{name}}</h2>
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					name:'河南大学'
				},
				methods:{
					showMsg(num){
						window.alert("你好!"+num);
					}
				}
			})
		</script>

self的使用：

还是以点击一个按钮为例，当点击该按钮时，由于冒泡，其外部的div点击也被触发，但获取的event.target都是该按钮，这时，给外部div的点击事件添加self修饰符(当event.target不是本元素时，不会执行事件回调)，可以起到与阻止冒泡一样的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
		<style type="text/css">
			*{
				margin-top: 20px;
			}
			.demo1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>欢迎来到{{name}}</h2>
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					name:'河南大学'
				},
				methods:{
					showInfo(event){
						//console.log(event.target);
						alert("你好!")
					}
				}
			})
		</script>
	</body>
</html>

事件的默认行为立即执行：

无需等待事件回调完毕(浏览器默认是将事件回调执行完毕后才执行事件的默认行为)
并不是所有事件都需要，常用在移动端设备

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
		<style type="text/css">
			*{
				margin-top: 20px;
			}
			.list{
				width: 300px;
				height: 300px;
				background-color: bisque;
				overflow: auto;
			}
			li{
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>欢迎来到{{name}}</h2>
			<!-- 立即执行事件的默认行为，不用等待事件复杂计算完毕再执行默认行为，但并不是所有事件都需要，scroll滚动条滚动就不需要 -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					name:'河南大学'
				},
				methods:{
					demo(){
						for(let i = 0; i < 100000; ++i){
							console.log("#");
						}
						console.log("好累啊!");
					}
				}
			})
		</script>
	</body>
</html>