Vue事件修饰符的使用

        在vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。因为经常会用到事件修饰符，所以做一个大致的总结。

一、主要的事件修饰符

① .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

② .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

③ .capture：与事件冒泡的方向相反，事件捕获由外到内

④ .self：只会触发自己范围内的事件，不包含子元素

⑤ .once：只会触发一次

⑥ .passive：告诉浏览器不阻止事件的默认行为

二、键盘事件修饰符

• .enter：回车键

• .tab：制表键

• .delete：含delete和backspace键

• .esc：返回键

• .space: 空格键

• .up：向上键

• .down：向下键

• .left：向左键

• .right：向右键

三、鼠标事件修饰符

• .left：鼠标左键

• .middle：鼠标中间滚轮

• .right：鼠标右键

四、自定义按键修饰符别名

        在Vue中可以通过config.keyCodes自定义按键修饰符别名。这里举一个例子。

<div id="app">
    // 在文字输入框中按下F5，会触发prompt方法，出现alert
    <input type="text" v-on:keydown.f5="prompt()"> 
</div>

Vue.config.keyCodes.f5 = 116;  //预先定义keycode 116（即F5）的别名为f5

let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('我是 F5！');
        }
    }
});

“醉里不知天在水，满船清梦压星河。”
每日的勤奋耕耘，是为美好的未来奋斗！！！