Vue_按键修饰符
常用的按键码的别名
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
##自定义按键修饰符 - 你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系统修饰键
- .ctrl
- .alt
- .shift
- .meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。
.exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
鼠标按钮修饰符
- .left
- .right
- .middle
总结
- 通过代码 @keyup.enter 之类的代码可以完成对键盘事件的事件处理。
- 通过代码 config.keyCodes自定义按键修饰符别名（注意自定义的是按键修饰符的别名而不是键码，键码是固定不变的例如enter对应13，f2对应113，但是可以对键码添加名称用于调用）
Vue.config.keyCodes.f2=113;
//对113键码（对应f2按键）添加别名f2，这样就可以直接调用f2而不是通过键码才能调用
//@keyup.f2在不设置之前是无效的。
@keyup.f2="doSomething";
//在按下f2时触发对应的事件处理函数
- 通过代码 @keyup.alt.113 可以为键盘事件"同时按下'alt'+'f2'键"添加事件处理程序
- 通过代码 @click.ctrl可以为事件"鼠标左键+ctrl"添加事件处理程序（此时如果ctrl和其它按键一同按下也会触发，因此并不严谨）
