vue阻止事件冒泡

vue事件修饰

• .stop
• .prevent
• .capture
• .self
• .once

• <!-- 阻止单击事件继续传播 -->
  <a v-on:click.stop="doThis"></a>
  
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  
  <!-- 修饰符可以串联 -->
  <a v-on:click.stop.prevent="doThat"></a>
  
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  
  <!-- 添加事件监听器时使用事件捕获模式 -->
  <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
  <div v-on:click.capture="doThis">...</div>
  
  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  <!-- 即事件不是从内部元素触发的 -->
  <div v-on:click.self="doThat">...</div>

  
  

<div id="vue">
			<div style="width: 200px;height: 200px;background: red;" v-on:tap="tap0">
				<button type="button" class="mui-btn mui-btn-blue" v-on:tap.stop="tap1">按钮</button>
			</div>
			</div>

			var vue = new Vue({
				el:"#oop",
				data:{},
				methods:{
					tap0:function(){
						alert(666)
					},
					tap1:function(){
						alert(999)
					}
				}
			});    

点击tap1不加 .stop ：先弹出999  再弹出666

加 .stop后 就只弹出999；

事件后加修饰符后就会阻止影响默认事件