按键修饰符、系统修饰符、鼠标修饰符

按键修饰符:

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

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

在使用@keyup等键盘触发的事件时，vue给予了一些内置的按键修饰符:

.enter	.esc
.tab	.space
.delete	.up
.left	.down
.right

系统修饰符:

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

.ctrl	.alt
.shift	.meta

注意：新增的修饰符只作用于keydown上,在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

 例子：

<div id="app">
    弹起回车触发：
    <input type="text" @keyup.enter="down"><br/>
    按下alt+ctrl触发：
    <input type="text" @keydown.alt.ctrl="down"><br/>
    弹起f2触发：
    <input type="text" @keyup.113="down"><br/>
    弹起f4触发：
    <input type="text" @keyup.f4="down"><br/>
</div>
<script>
    // 全局定义未被定义的键盘码
    Vue.config.keyCodes.f4=115;
    var vm=new Vue({
        el:'#app',
        methods:{
            down:function () {
                console.log(1);
            }
        }
    })
</script>

.exact修饰符：

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标修饰符:

.left	.right
.middle

注意:这些修饰符会限制处理函数仅响应特定的鼠标按钮。

例子

<div style="background: red;width: 240px;height: 240px" @click.left="log('left')">
    Do something
</div>