vue event modifier

1. Types of modifiers

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

2, self modifier description

<!-- The handler is triggered only when event.target is the current element itself --> 
<!-- The event is not triggered from the inner element --> 
< div v-on:click.self ="doThat" > ... </ div >

When using modifiers, the order is important; the corresponding code will be generated in the same order. Therefore, using  v-on:click.prevent.self will prevent all clicks, but  v-on:click.self.prevent only clicks on the element itself.

3, passive modifier description

<!-- The default behavior of scroll events (i.e. scrolling behavior) will fire immediately --> 
<!-- without waiting for `onScroll` to complete   --> 
<!-- This contains `event.preventDefault()` The case --> 
< div v-on:scroll.passive ="onScroll" > ... </ div >

This  .passive modifier can especially improve performance on mobile.

Do not use  .passive and  .prevent together, as it  .prevent will be ignored and the browser may show you a warning. Remember, .passive the default behavior that tells the browser you don't want to prevent events.

 Why use the pssive modifier, please refer to: https://blog.csdn.net/shenlei19911210/article/details/70198771