VUE的事件修饰符，once,prevent,stop，capture,self,passive

1. once，只执行一次

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

只有在第一次点击时会执行，再次点击不会起作用
2. prevent
阻止默认程序，比如form表单中的summit提交按钮，会自己提交，

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

现在的submit会进行数据提交，和跳转

<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，直接不让你提交了，也不跳转，只是执行自己命名的函数，个人觉得这个修饰符使用的并不多，完全可以不做submit，我自己写个click更方便啊！！
3. stop
阻止函数的传递

<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>

此时点击子级的div会，先弹出2，再弹出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>

点击子级的div，此时的执行结果是，先弹出1，再弹出2（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>

点击子级的div，此时的执行结果是只会弹出1（capture决定的执行顺序），不会执行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>

这样就只会弹出2，不会弹出1 了
总之，stop就是你自己执行你的就好了，别去打扰别人。
4. capture和self
因为在使用capture和self的时候有一些迷糊，有一篇单独介绍他俩个的文章
初步理解vue中的capture和self
5. passive与prevent相反，javascript中的preventDefault()
passive就是专门用来跟他们作对的，使他们不起作用，同时，passive不能和prevent同时使用，prevent会失效，而且会警告！！