版权声明：本文为博主原创文章，未经博主允许。 /a250758092/article/details/78354319
<!-- 阻止单击事件冒泡 --><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><!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 --><div v-on:click.self="doThat">...</div>
关于.stop和.self的区别，前者是防止事件冒泡，后者则是忽略了事件冒泡和事件捕获的影响。只有直接作用在 该元素上的事件才会被调用，因为它看起来 与.stop好像有一点像，但其实他们作用的对象不同。一下举个简单例子。
<div id="_Red" v-on:click="doThat1(event)" style="width: 500px;height: 500px;background: red;"><div v-on:click="doThat(event)" id="_Blue" style="width: 200px;height: 200px;background: blue;"></div></div>
vue 实例方法
doThat:function(e){alert('doThat'+$(e.target).attr('id'));},doThat1:function(e){alert('doThat1'+$(e.target).attr('id'));}
我们把两个DIV分为blue和red，blue是red的子元素，在我没有加任何修饰符的时候，当我点击blue的时候，输出的结果是
doThat_BluedoThat1_Blue//这里要说明一下，事件冒泡除了事件触发以外传入的事件对象也是事件源的对象，并非是事件绑定的元素，因此两次输出的都是Blue而不是一次Blue一次Red
1）当给Blue加上.stop修饰符的时候，阻止了子元素的冒泡事件，所以Red并不会触发事件。
2）而如果我给Red加上.self修饰符，去掉Blue的stop修饰符的时候，点击子元素（Blue）会发现，输出doThat_Blue就不会再输出，这个结果看上去跟1）中的阻止冒泡事件是一致的，是因为.self只执行直接作用在该元素身上的事件，所以它相当于忽略了 其他元素的冒泡或者捕获事件。但是这种忽略只局限于自身。
所以，为了避免一些会被冒泡事件影响，加上修饰符.self是很有用的
