1) .stop的使用

.stop的主要作用是阻止冒泡，也就是阻止事件继续向上级传递，意同传统JS事件当中的stopPropagation()。

当没有阻止冒泡时，点击父盒子

点击子盒子

当添加了阻止冒泡时，点击父盒子与子盒子

很明显在添加了.stop修饰符后，点击子盒子只会触发其自身的事件，不会发生事件穿透。

2) .prevent的使用

.prevent的主要作用是阻止默认行为，意同传统JS事件当中的preventDefault()。
使用前

使用后

3) .capture的使用

通俗来讲在事件嵌套时添加了.capture的事件会优先执行。请看实例：

可以看到在未添加.capture时，点击孙盒子时的执行顺序，下面请看添加了.capture的情况

可以看到，添加了.capture的事件优先执行了

4) .self的使用

只有在点击添加了.self的元素时才会执行，不会被事件穿透，请看实例：

在点击孙盒子时，可以看到三个事件都被触发了，下面给父子盒子加上self

在点击孙盒子时只会触发自己的事件，不会触发父子的事件

同样在点击子盒子时也只会触发自己的事件不会触发父组件的事件

5) .once的使用

添加了该属性的事件只会触发一次 添加once前会多次触发，添加后只会触发一次

6) .passive的使用

官网中对该修饰符的介绍大意为对dom的原生事件做优化，例如当发生滚动事件时，滚动行为会立即触发，在wheel事件（鼠标滚轮滚动以及笔记本电脑的触摸板滑动）时更为明显，vue会优先触发事件，再处理事件进行时的副作用，例如回调、滚动后请求数据渲染等等，尤其在做移动端开发时能够大大提升性能。并且不要把 .passive 和 .prevent 一起使用，.prevent 将会被忽略，同时浏览器可能会向你展示一个警告，.passive 会告诉浏览器你不想阻止事件的默认行为

7) 一些键盘修饰符的使用

例： 删除键：delete

回车键：enter

tab键：tab

esc键 ：esc

上下左右键

ctrl shift alt 键

两个键同时按下时才触发

或者三个键同时按下

亦可以设定当按下某个键时点击事件才可以触发

.exact 修饰符 可以精准控制系统修饰符组合而成的事件的触发

意为有且只有ctrl被按下时才会被触发

8) 一些鼠标修饰符的使用

正常情况下只有单击鼠标左键才会触发该事件
只能鼠标左键也可以这样

如此这般，就会只有鼠标右键点击时才会生效

当然还有单击鼠标滚轮时才会触发的修饰符

最后奉上vue官网中关于修饰符的链接地址cn.vuejs.org/v2/guide/ev…
最后，希望该文章对您能用些许的帮助。

罗翔老师说，人最大的痛苦就是难以跨越知道和做到这个巨大的鸿沟。 2022，更加努力。