在上面的学习中我们了解到，事件捕获模式与事件冒泡模式是一对相反的事件处理流程，当我们想要将页面元素的事件流改为事件捕获模式时，只需要在父级元素的事件上使用 capture 修饰符即可，还是上面的例子的代码，当我们在 div 绑定的点击事件上使用 capture 修饰符后，我们点击按钮首先触发的就是最外侧的 div 的事件。
<div> <div @click.capure="divHandlerClick"> <input type="button" value="点击" @click="btnHandlerClick" /> </div> </div>
d）.self：只当在 event.target 是当前元素自身时触发处理函数（比如不是子元素冒泡引起的事件触发）
在上面的例子中，我们为 div 绑定了一个点击事件，而我们的本意可能是只有当我们点击 div 后触发这个事件，而实际情况是事件冒泡还是事件捕获都会触发这个事件，这与我们的本意是不符的。在 Vue 中，我们就可以使用 self 修饰符去修饰事件，让这个事件只在我们想要触发时触发。
<div> <div @click.self="divHandlerClick"> <input type="button" value="点击" @click="btnHandlerClick" /> </div> </div>
e）.once：事件只触发一次
当我们仅仅想对绑定的事件只在第一次的时候触发，这时我们就可以使用 once 修饰符去修饰绑定的事件。例如在下面的代码中，只有第一次点击时才会触发绑定的事件，之后点击都不会触发。
<input type="button" value="点击" @click.once="btnHandlerClick" />
f）.passive：滚动事件的默认行为 (即滚动行为) 将会立即触发
在页面滚动的时候，浏览器会在整个事件处理完毕之后再触发滚动，因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault()，而 passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消，即 使用 passive 修饰符后表示绑定的事件永远不会调用 event.preventDefault()。
三、总结
1、事件修饰符的使用顺序很重要
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2、.passive 和 .prevent不能一起使用
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
以上所述是小编给大家介绍的Vue.js 事件修饰符的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: