6.Vue事件修饰符

最新推荐文章于 2024-04-12 11:01:11 发布

高新园养鸡场

最新推荐文章于 2024-04-12 11:01:11 发布

阅读量176

点赞数

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

本文链接：https://blog.csdn.net/zyc3545/article/details/108172149

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

事件修饰符

stop 阻止冒泡（从里到外）。
capture 事件监听器由冒泡模式变为捕获模式（从外到里）。
self 只有点击当前元素才触发。
once 事件只触发一次。
prevent 阻止默认事件。

实例

基础程序

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.outer{
				width: 200px;
				height: 200px;
				background-color: brown;
			}
			
			.inner{
				width: 100px;
				height: 100px;
				background-color: darkcyan
			}
		</style>
	</head>
	<body>
		<div class="outer" v-on:click="outerHandler">
			<div class="inner" v-on:click="innerHandler">
				<button class="btn" v-on:click="btnHandler">点击</button>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:".outer",
			methods:{
				outerHandler :function(){
					console.log("outerHandler执行");
				},
				innerHandler :function(){
					console.log("innerHandler执行");
				},
				btnHandler :function(){
					console.log("btnHandler执行");
				}	
			}
		});
	</script>
</html>

运行，点击按钮会从btn冒泡依次触发inner，outer的点击事件：

stop修饰符

当给inner添加stop修饰符后：

<div class="inner" v-on:click.stop="innerHandler">

点击inner只会打印：

innerHandler执行

点击btn打印：

btnHandler执行

innerHandler执行

capture修饰符

当给inner添加capture修饰符后：

<div class="inner" v-on:click.capture="innerHandler">

点击inner后依旧是正常的冒泡：

innerHandler执行

outerHandler执行

点击inner中的btn后会先捕获（inner->btn）再冒泡(inner,btn->outer)：

innerHandler执行

btnHandler执行

outerHandler执行

self修饰符

当给inner添加self修饰符后：

<div class="inner" v-on:click.self="innerHandler">

点击inner，正常冒泡：

innerHandler执行

outerHandler执行

点击btn，冒泡会略过inner：

btnHandler执行

outerHandler执行

once修饰符

btn的click添加once后：

<button class="btn" v-on:click.once="btnHandler">按 钮</button>

第一次点击btn：

outerHandler执行

innerHandler执行

btnHandler执行

点击第二次：

outerHandler执行

innerHandler执行

prevent修饰符

<form v-on:submit="onSubmit"> 
    <input type="submit" value="提交"> 
</form>

点击提交后控制台并不会打印“submitted”，原因是submit会触发浏览器刷新导致无法看到控制台打印。

onSubmit:function() {
    console.log("submitted");
}

避免刷新的方法有两种：

1.传递参数$event

//html
<form v-on:submit="onSubmit($event)">

//vue
onSubmit:function(e) {
    e.preventDefault();
    console.log("submitted");
}

2.使用“.prevent”，这时onSubmit函数无需改动：

<form v-on:submit.prevent="onSubmit">

同理可以用“.stop”停止事件冒泡。

高新园养鸡场

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.Vue事件修饰符

目录事件修饰符实例基础程序stop修饰符capture修饰符self修饰符once修饰符prevent修饰符事件修饰符stop 阻止冒泡（从里到外）。 capture 事件监听器由冒泡模式变为捕获模式（从外到里）。 self 只有点击当前元素才触发。 once 事件只触发一次。 prevent 阻止默认事件。实例基础程序<html> <head> <meta charset="utf-8"> <t
复制链接

扫一扫

专栏目录