Vue2 修饰符

right

middle

.ctrl .alt .shfit

.stop .capture .self .prevent .once

<div id="app">
    <!-- 事件修饰符 -->
    <!-- 1、鼠标按键修饰 -->
    <!-- right 鼠标右击触发事件 -->
    <input type="button" name="" value="点击" @click.right="show">
    <!-- middle 鼠标滚轮触发 -->
    <input type="button" name="" value="点击" @click.middle="show">
    <!-- 2、系统修饰符 -->
    <!-- 常用系统修饰符 .ctrl  .alt .shift 按住修饰符才能触发事件 -->
    <input type="button" name="" value="点击" @click.ctrl="show">
    <!-- 3、事件修饰符 -->
    <!-- 常用事件修饰符 .stop .capture .self .prevent .once -->
    <!-- .stop 阻止事件冒泡 -->
    <div class="content" @click="sayhi">
    <!-- 只会触发show方法 -->
    <div class="main" @click.stop="show">点击</div>
    </div>
    <!-- .self 单击元素本身触发事件 -->
    <div class="content" @click.self="sayhi">
    <div class="main" @click="show">
    点击
    </div>
    </div>
    <!-- .capture捕获模式，触发外侧div事件,在触发内部div事件 -->
    <!-- 先触发sayhi 方法 在触发show方法 -->
    <div class="content" @click.capture="sayhi">
    <div class="main" @click="show">capture</div>
    </div>
    <!-- .prevent 阻止默认事件 -->
    <a href="http://www.baidu.com" @click.prevent="show">prevent</a>
    <!-- .once 只生效一次 -->
    <a href="http://www.baidu.com" @click.prevent.once="show">once</a>
</div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
                data:{
                msg:"hello,world"
            },
            methods:{
                show(){
                alert('vue')
            },
            sayhi(){
                alert('hi')
                }
            }
        })
    </script>