Vue学习笔记----事件修饰符

Vue事件修饰符

  • stop停止冒泡，不触发父元素
  • self只支持本身触发，子元素触发无效
  • once只触发一次
  • prevent阻止默认事件
  • capture捕获事件触发机制,由外到内触发 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
		<style type="text/css">
			*{
				padding:0px;
				margin:0px;
			}
			.red{
				width:150px;
				height:150px;
				background-color:red;
			}
			.green{
				width:100px;
				height:100px;
				background-color:green;
			}
			.blue{
				width:50px;
				height:50px;
				background-color:blue;
			}
		</style>
		<script type="text/javascript"  src="lib/vue.js"></script>
		<script type="text/javascript">
			window.οnlοad=function(){
				var vm=new Vue({
					el:"#container",
					data:{},
					methods:{
						redClick(){
							console.log("red");
						},
						greenClick(){
							console.log("green");
						},
						blueClick(){
							console.log("blue");
						},
						go(){
							console.log("触发a事件")
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="container">
			<!-- self只支持本身触发，子元素触发无效 -->
			<div class="red" @click.self="redClick">
				<!-- once只触发一次 -->
				<div class="green" @click.once="greenClick">
					<!-- stop停止冒泡，不触发父元素 -->
					<div class="blue" @click.stop="blueClick">	
					</div>
				</div>
			</div>
			
			<br />
			
			<!-- capture捕获事件触发机制,由外到内触发 -->
			<div class="red" @click.capture="redClick">
				<div class="green" @click="greenClick">
					<div class="blue" @click="blueClick">	
					</div>
				</div>
			</div>
			<!-- prevent阻止默认事件，不会跳转 -->
			<a class="baidu" @click.prevent="go" href="www.baidu.com">百度</a>
		</div>
	</body>
</html>

     

posted @ 2019-10-27 23:43  aeipyuan  阅读(161)  评论(0)  编辑  收藏  举报