事件——事件修饰符.stop，.prevent，.self，.capture，.once，.passive

修饰符	作用
.stop	e.stopPropagation()
.prevent	e.preventDefault
.self	在F节点的任意事件上加该后缀，则F的所有子节点 (是子，"孙"可不归我管) 相当于都加上了.stop，不要再手动加（感觉是个比.stop更厉害的）
.capture	顾名思义是在捕获阶段就触发事件
.once	顾名思义就是只许点一次
.passive	这个是用来告诉浏览器：执行默认动作，如果与.prevent一起用会被.prevent覆盖掉

说既然是默认动作，为什么还要.passive来告诉浏览器？
浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。
通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

看看.self效果

<div @click.self="log('father')">
  <div @click="log('son')">  xxx  </div>  //不会冒泡
  <div @click="log('garnd son')">  xxx  </div>  //不会冒泡
</div>
上面等同于：
<div @click="log('father')">
  <div @click.stop="log('son')">  xxx  </div>  //不会冒泡
  <div @click.stop="log('garnd son')">  xxx  </div>  //不会冒泡
</div>

***但还不止于此，.self还要更强的功能：（此处如果是.stop，子节点mousedown还是会触发父节点的click事件）***

<div @click.self="log('father')">    //我是click事件
  <div @mousedown="log('son')">  xxx  </div>  //我是mousedown事件，但仍然不会冒泡
  <div @mouseover="log('garnd son')">  xxx  </div>  //我是mouseover事件，但仍然不会冒泡
</div>