Vue学习之旅Part4：Vue的按键修饰符和自定义按键修饰符

v-on除了有事件修饰符之外 还有按键修饰符
Vue内部提供了一些按键修饰符
按键修饰符即代替了键盘触发的事件

举个栗子：@keyup.enter="add"
代表了只有回车键进入keyup事件才会触发add方法

Vue自带的按键修饰符：

Vue自带的按键修饰符 直接使用即可

• .enter (回车键)
• .tab (跳格键)
• .delete (删除和退格键)
• .esc (退出键)
• .space (空格键)
• .up (方向键 - 上)
• .down (方向键 - 下)
• .left (方向键 - 左)
• .right (方向键 - 右)

自定义按键修饰符

1、直接绑定

键盘上的每个键都有一个对应的键盘码值
可直接用码值来绑定
例如：

<input type="text" @keyup.113="add">

这样绑定时是比较方便 但也有其弊端：键盘码是一串数字 不好记

2、还可进行配置：

1.x版本语法：Vue.directive("on").keyCodes.自定义的键盘码=码值

2.x版本语法：Vue.config.keyCodes.自定义的键盘码=码值

例：

<script>
	// 自定义全局的按键修饰符
	Vue.config.keyCodes.f2=113;
</script>

这样 即可使用自定义的按键修饰符了：

<input type="text" @keyup.f2="add">

---