vue修饰符测试

用了vue还没有整体测试下它提供的修饰符，现在整理下

***(1).stop测试，当不添加此修饰符是，a标签的父元素如存在点击事件也会被触发， ***注意此处在a标签添加prevent修饰符无法阻止冒泡，prevent修饰符只会阻止事件默认的效果，比如submit会刷新页面

<div id="box1">
	<div class="stopBox" style="width:200px;height:200px;" @click="clickB">
	    <a @click.stop="clickA">点击我</a><br/>
	</div>
</div>

***(2).self测试，给div添加此修饰符，那么只有在event.target是div本身时（可以理解为点击div本身时）才会触发函数clickB

<div id="box1">
	<div class="stopBox" style="width:200px;height:200px;" @click.self="clickB">
		<a @click.stop="clickA">点击我</a><br/>
	</div>
</div>

***(3).capture测试，在给div添加此修饰符，那么点击a标签时会先触发div绑定的点击事件

<div id="box1">
	<div class="stopBox" style="width:200px;height:200px;" @click.capture="clickB">
		<a @click="clickA">点击我</a><br/>
	</div>
</div>

***(4).once测试,a标签的点击事件只会响应第一次，但是被冒泡的div事件会每次响应(除非也添加once修饰符)，once修饰符还可以在自定义组件使用

<div id="box1">
	<div class="stopBox" style="width:200px;height:200px;" @click.once="clickB">
		<a @click.once="clickA">点击我</a><br/>
	</div>
</div>

JavaScript代码

var vm1 = new Vue({
	el: '#box1',
	methods: {
		clickA: function(){
			alert('a标签被点击了');
			
		},
		clickB: function(){
			alert('我是div因为子元素a被点击，我被冒泡点击了')
		}
	}
})

未完待续。。。以上自己理解，如有错误望指导~