vue中的事件修饰符

一、.prevent ：阻止默认事件

某些标签拥有自身的默认事件，如a[href="#"]， 比如a标签中写点击事件，则需要阻止默认事件，
否则，如果href中有超链接，点击会跳到该超链接，而不是对应的点击事件； 如果href中没有超链接，点击会跳到#/路径，空白页面

1、没有加事件修饰符来阻止默认事件：

href为空的情况：

点击之后跳转的页面：

href有值的情况：跳转到对应的超链接，不是我们想要的点击事件

2、加事件修饰符来阻止默认事件：

无论href有没有值，都会执行我们想要的点击事件：

二、.stop: 阻止单击事件继续传播(阻止事件冒泡，相关事件都要加修饰符.stop)

1、不加修饰符的情况：

如图，点击父元素区域，触发父的方法，但是点击子元素区域，父和子的方法都会触发，这不是想要的结果。

1、加修饰符的情况：(相关事件都要加.stop修饰符)

浏览器效果，点击父元素区域，执行父的方法，点击子元素区域，执行子的方法，不会互相影响

三、.capture，事件捕获

两个事件都不加捕获修饰符，点击子区域，会先执行子的方法，再执行父的方法。

.capture加在哪个事件上，那么该事件就会首先捕获到该元素区域中的其他事件，比如：

1、父元素事件添加捕获事件，那么位于父元素区域中的子的方法触发时父元素会首先捕捉到，也就是会首先执行一次父元素的事件

点击son区域，会先打印出father，再打印son

2、子元素事件添加捕获事件(和不添加一样)

点击子元素区域，先执行子事件，再执行父事件

四、.self ：只处理自己内部事件

添加了.self事件修饰符，只处理自己内部事件，事件冒泡和捕获都不会处理，在触发和(添加了.self事件修饰符)相关的事件时，该元素不会受影响，如图：

点击.son，父元素不受影响

五、.once 点击多次时只执行一次

1、不加.once修饰符，点击多少次执行多少次

2、加.once修饰符，点击多次只执行一次

六、.passive ： 执行默认方法

可能好奇，明明会执行，为什么还有加个这个事件修饰符，通俗点讲，每次事件产生，浏览器都会查询一下是否有preventDefault阻止该次事件的默认动作，加上这个修饰符就是告诉浏览器，不用查询了，没有阻止默认事件。   这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。