Vue中的事件修饰符

1）prevent 阻止默认事件（常用）
2）stop 阻止事件冒泡（常用）
3）once 事件只触发一次（常用）
4）capture 使用事件的捕获模式
5）self 只有event.target 是当前操作的元素才触发事件
6）passive 事件的默认行为立即执行，无需等待事件回调执行完毕

以下例子我们发现点击之后，会提示alert，但是仍然会跳转到baidu

        <div id="app">
            <a href="https://www.baidu.com" v-on:click="tishi">点我</a>
        </div>
        <script >
            var vm = new Vue ({
                data : {
                    money: 10000,
                },
                methods: {
                    tishi(){
                        alert("你好，世界")
                    }
                }
            });
            vm.$mount("#app")
        </script>

这个时候我们就可以使用Vue中的事件修饰符 prevent 来阻止默认行为

 <div id="app">
            <a href="https://www.baidu.com" v-on:click.prevent="tishi">点我</a>
        </div>

我们再来看一个其他例子

<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- 准备好了容器 -->
        <div id="app" @click="tishi">
            <button type="button" @click="tishi">点我</button>
        </div>



        <script >
            var vm = new Vue ({
                data : {
                    money: 10000,
                },
                methods: {
                    tishi(){
                        alert("你好，世界")
                    }
                }
            });
            vm.$mount("#app")
        </script

我们会看到两次弹窗，这就是我们说的事件冒泡
那么怎么阻止这个事情呢？我们需要在内层使用一个stop修饰符

<div id="app" @click="tishi">
            <button type="button" @click.stop="tishi">点我</button>
        </div>

另外如果想让这个事件只被触发一次，那么可以使用once

<div id="app">
            <button type="button" @click.once="tishi">点我</button>
        </div><div id="app">
            <button type="button" @click.once="tishi">点我</button>
        </div>