Vue-事件修饰符(.stop、.prepent、.capture、.self、.once)

<div id="app">
			
			<!-- .stop阻止冒泡行为 -->
			<!-- <div class="innerDiv" @click="innerClick">
				<input type="button" value="按钮" @click.stop="btnClick" />
			</div> -->
			
			<!-- .prevent 阻止默认事件 -->
			<!-- <a href="http://www.baidu.com" @click.prevent="aClick">这是一个百度</a> -->
			
			<!-- .capture 实现捕获触发事件的机制 -->
			<!-- <div class="innerDiv" @click.capture="innerClick">
				<input type="button" value="按钮" @click="btnClick" />
			</div> -->
			
			<!-- .stop 和 .self 的区别：.self 只会阻止自己身上的冒泡行为不会阻止别人；.stop 阻止所有的冒泡行为 -->
			
			<!-- .self 阻止自身的冒泡行为 -->
			<!-- <div class="outer" @click="outerClick">
				<div class="innerDiv" @click.self="innerClick">
					<input type="button" value="按钮" @click="btnClick" />
				</div>
			</div> -->
			
			<!-- .once 只阻止一次 -->
			<a href="http://www.baidu.com" @click.prevent.once="aClick">这是一个百度</a>
			
		</div>

var vm = new Vue({
	el: '#app',
	data: {
		
	},
	methods: {
		innerClick(){
			console.log('这是innerDiv的点击事件');
		},
		btnClick(){
			console.log('这是btn input点击事件');
		},
		aClick(){
			console.log('这是一个a标签');
		},
		outerClick(){
			console.log('这是outer div 的点击事件');
		}
	}
})