vuejs基础-事件修饰符

Posted 2022-05-05 eadela

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs基础-事件修饰符相关的知识，希望对你有一定的参考价值。

stop阻止冒泡

prevent阻止默认事件

capture添加事件侦听器时使用时间捕获模式

self只当事件在元素本身触发时回调

once事件只出发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
		<style>
			.inner
				height: 150px;
				width: 500px;
				background-color: darkcyan;
			
			.outter
				height: 200px;
				width: 550px;
				background-color: darkblue;
			
		</style>
	</head>
	<body>
		<div id="app">
			<!--<div class="inner" @click="divclick">
				<input type="button" value="戳他" @click.stop="btnclick"/>
			</div>-->
			
			<!--<a href="http://www.baidu.com" @click.prevent="aclick">这是百度链接</a>-->
			<!--<div class="inner" @click.self="divclick">
				<input type="button" value="戳他" @click="btnclick"/>
			</div>-->
			
			<!--<div class="inner" @click.capture="divclick">
				<input type="button" value="戳他" @click="btnclick"/>
			</div>-->
			
			<!--<a href="http://www.baidu.com" @click.prevent.once="aclick">这是百度链接</a>-->
			<div class="outter" @click="outter">
				<div class="inner" @click.self="divclick">
					<input type="button" value="戳他" @click="btnclick"/>
				</div>
			</div>
			<div class="outter" @click="outter">
				<div class="inner" @click="divclick">
					<input type="button" value="戳他" @click.stop="btnclick"/>
				</div>
			</div>
			
		</div>
	</body>
	
	<script>
		new Vue(
			el:"#app",
			data:,
			methods:
				divclick()
					console.log("这是div点击事件");
				,
				btnclick()
					console.log("这是button点击事件");
				,
				aclick()
					console.log("这是a标签点击事件！")
				,
				outter()
					console.log("这是外层div点击事件！")
				
			
		);
	</script>
</html>

　　技术图片

以上是关于vuejs基础-事件修饰符的主要内容，如果未能解决你的问题，请参考以下文章

VueJS 事件修饰符

Dcloud教程----vuejs基础

vuejs从入门到精通

Keep Learning Vuejs 2.0 - 基本事件处理

使用 Vuejs 嵌套 v-for 循环

Vue.js 鼠标事件处理程序修饰符