事件修饰符

在事件处理程序中调用 ​​event.preventDefault()​​​ 或 ​​event.stopPropagation()​​​ 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 ​​v-on​​ 提供了 事件修饰符。修饰符是由 点开头的指令后缀来表示的。

 ​​.stop​​ ：阻止事件冒泡到父元素

 ​​.prevent​​：阻止默认事件发生

 ​​.capture​​：使用事件捕获模式

 ​​.self​​：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

 ​​.once​​：只执行一次

@click.stop阻止冒泡

<body>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <style>
        #app div{border: 1px solid red;padding: 20px;}
    </style>
    <div id="app">
        <div @click="alert">
            大div
            <div @click.stop="alert">
                小div
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            methods: {
                alert() {
                    alert("点击了");
                }
            }
        })
    </script>
</body>

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 ​​v-on​​ 在监听键盘事件时添加按键修饰符：

全部的按键别名：

 ​​.enter​​

 ​​.tab​​

 ​​.delete​​ (捕获“删除”和“退格”键)

 ​​.esc​​

 ​​.space​​

 ​​.up​​

 ​​.down​​

 ​​.left​​

 ​​.right​​

<body>
    <div id="app">
        <input  @keyup.enter="alert" value="按enter键">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            methods: {
                alert() {
                    alert("点击了");
                }
            }
        })
    </script>
</body>

组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

 ​​.ctrl​​

 ​​.alt​​

 ​​.shift​​

<input  @click.ctrl="alert" value="组合按钮ctrl+鼠标点击">