Vue修饰符

@click

直接点击会触发冒泡事件，会触发父元素绑定事件

@click.stop

阻止冒泡事件，event.stopPropagation()。

子元素添加stop修饰符后，会阻止事件冒泡，不会触发父元素事件

@click.prevent

阻止默认事件，event.preventDefault()。比如点击a标签元素会立即跳转页面，如果在a标签元素点击事件加上prevent修饰符就不会跳转，而是执行绑定的那个事件函数，比如截图中的clickA事件，控制台输出：a标签dianji

@click.self

只有点击绑定self修饰符元素本身才会触发事件。

• 点击子元素会产生冒泡事件，触发父元素，但是父元素事件添加self修饰符后，不会出发事件，控制台只输出：点击子元素
  
• 点击父元素，也就点击页面上“click parents“时，才会触发父元素点击事件
  

@click.capture

为绑定事件添加捕获事件，点击子元素时才会触发捕获，会先执行添加了capture修饰符的事件

@click.once

事件只执行一次，之后再触发事件就没有效果了

@click.passive

不拦截默认事件。

浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，
所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。

简单点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault()阻止该次事件的默认动作。
我们加上.passive就是为了告诉浏览器，不用查询了，我们没用preventDefault()阻止默认动作。
鉴于这个作用，.passive 修饰符尤其能够提升移动端的性能。在滚动监听，@scoll，@touchmove 时，每次都使用内核线程查询prevent会使滑动卡顿,使用.passive 修饰符跳过内核线程查询，可以大大提高流畅度。

参考： https://www.jianshu.com/p/72c5f29c8c02