1. Once, execute only once

<div v-on:click.once='alert("1")'></div>

Only when the first click is executed, clicking again won't work.
2. prevent
Prevent default programs, such as the summit submit button in the form, from submitting themselves.

<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

Now submit will submit data, and jump

<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

prevent, do not let you submit directly, do not jump, just execute their own named functions, I feel that this modifier is not used much, can not submit, I write a click more convenient!!
3. stop
Prevent the transfer of functions

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

At this point, click on the sub-div, pop-up 2, then pop-up 1

<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

Click on the sub-div, and the execution result is, first pop-up 1, then pop-up 2 (the role of capture)

<div v-on:click.capture.stop='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

Click on the sub-div, and the execution result will only pop up 1 (the execution order determined by the capture), not alert('2').

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click.stop="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

So it only pops up 2, it doesn't pop up 1.
In a word, stop is just to execute yourself. Don't disturb others.
4. capture and self
Because there was some confusion when using capture and self, there was an article that introduced them separately.
A Preliminary Understanding of capture and self in vue
5. passive, in contrast to prevent, preventDefault() in javascript
Passive is specifically designed to fight them, so that they do not work, at the same time, passive and prevent can not be used at the same time, prevent will fail, and will warn!!