事件修饰符

<div style="margin-top:100px">

    <!--事件的监听-->
    <!--事件修饰符-->
    <div id="app">

        <!--prevent  阻止默认事件的触发，这里地方会阻止跳转链接-->
        <a href="http://www.baidu.com" v-on:click.prevent>我是百度</a>
        <!--prevent  这个地方点击提交按钮之后，会阻止页面的刷新-->
        <form v-on:submit.prevent="OnSubmit">
            <div>sasa</div>
            <button type="submit">提交</button>
        </form>

        <!--stop 阻止单击事件冒泡     点击按钮1后，先触发按钮1的事件，再触发div的事件，stop可以阻止事件的冒泡-->
        <div v-on:click="OnSubmit1()">
            div
            <button type="button" v-on:click.stop="OnSubmit()">按钮1</button>
        </div>

        <!--self  只有点击当前元素的时候，事件才会触发，如果点击按钮2  此时事件不会触发两次-->
        <div v-on:click.self="OnSubmit()">
            div2
            <button type="button" v-on:click.self="OnSubmit()">按钮2</button>
        </div>

        <!--once  不刷新页面的前提下，事件只能点击一次-->
        <button type="button" v-on:click.once="OnSubmit()">只能点一次</button>

        <!--capture   事件冒泡时，捕获事件  当点击Caputure1 按钮时，先触发Caputure1按钮的事件，再触发div id为ss的事件（带有capture的事件），最后执行div aa 的事件 -->
        <div id="sss" v-on:click.capture="OnSubmit()">
            <div id="aa" v-on:click="OnSubmit()">
                <button type="button" v-on:click="OnSubmit()">Caputure1</button>
            </div>
        </div>
    </div>

</div>

实现：

<script>

    new Vue({
        el: ‘#app‘,
        methods: {
            OnSubmit: function () {
                alert("OnSubmit")
            },

            OnSubmit1: function () {
                alert("OnSubmit1")
            },

        }

    })
</script>

原文地址：https://www.cnblogs.com/hnzheng/p/9144207.html