Vue的事件修饰符：

.prevent为阻止元素的默认事件，一般有<a>、<submit>这些标签原生带有自己的默认事件，在其中的自定义事件中 @click.prevent="fun" ，会阻止原生的默认事件触发；

.once 带有此修饰符的事件只会触发一次

下面我们关键来讲其他三个.stop \.capture\.self

1.事件的冒泡顺序，在容器中，事件的触发顺序是从内向外触发的

2.当使用修饰符.stop后，会在当前元素执行完事件后阻止事件向上冒泡（中断事件链）

3.修饰符 .capture 捕获当前元素，并改变默认的冒泡顺序，顺序从外向内（由上至下）

4.修饰符.self 只在当前元素及其父元素上传播，.self当前元素和子元素的传播链断开，.self一般用在父级元素中。

div3触发时，由于div2为其父元素且为.self，因此两个元素不在一个传播链之内，因此会绕过div2触发div1; 

div2触发时，默认传播链为由下至上，因此，div1会被触发

5.事件修饰符的混合分析

div3触发时  .capture会先行执行，先执行div1，然后再执行div3，div2断开了子元素因此不会执行

 div3触发时，.capture先行执行且由上至下，div1>div2   div2有.stop因此会阻止事件传播

  div3触发时，div2 .capture会先行执行，div3  .stop执行后阻止事件继续传播，事件终止

总结：

.stop主要是阻止事件的继续传播（冒泡）；

.capture会改变事件的传播（冒泡）顺序，默认由内向外（由下至上），.cature改变为由外向内（由上至下）

.self 一般用在父元素中，断开与子元素的传播链，即：父事件不会向子事件传播，子事件也不会向父事件传播；但.self可以和它自身的父事件进行事件的传播