前言
上周末的时候，准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上，结果在一个接一个坑里面跳，最后 Supervisor 守护程序还是有问题，于是，采用重装系统大招，结果，碰巧赶上 aspnetcore 的一个 bug（Missing package dotnet-runtime 2.1.6 for CentOS），嗯，最后 dotnet core 环境装不上了，原本打算更新的 .NET Core 文章以及日常的 Vue 学习计划也暂时搁浅了。
在之前的 Vue 的学习中，我们学习了如何使用事件修饰符去处理 DOM 事件，而在某些实际场景中，我们也需要去设定各种按键事件去优化页面的交互，本章，我们来学习下在 Vue 中如何去监听键盘事件。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter01-Rookie Keyboard Modifiers
干货合集
一、 按键修饰符
在日常的页面交互中，我们经常会遇到这种需求：用户输入账号密码后点击 Enter 键、一个多选筛选条件通过点击多选框后自动加载符合选中条件的数据等等。在传统的前端开发中，当我们碰到这种类似的需求时，我们往往需要知道 js 中需要监听的按键所对应的 keyCode，然后通过判断 keyCode 得知用户是按下了那个按键，继而执行后续的操作。例如，在下面的示例中，当我们松开 Enter 按键后控制台就会打印出姓名输入框内的值。
<label>姓名：</label>
<input id="name" type="text">
$('#name').on('keyup',function(event){
event.preventDefault();//阻止浏览器默认动作
if(event.Code == 13){
console.log($(this).val());
}
});
复制代码而在 Vue 中，给我们提供了一种便利的方式去实现监听我们的按键事件。在监听键盘事件时，我们经常需要查找常见的按键所对应的 keyCode，而 Vue 为最常用的按键提供了别名。
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
复制代码在下面的代码中，我们同样监听了 input 框的 Enter 事件，而我们只需要在绑定的 input 标签的 keyup 事件上添加 .enter 修饰符即可。
<div id="app">
<label>姓名：</label>
<input id="name" type="text" v-model:value="name" @keyup.enter="log">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
log() {
console.log(`name:${this.name}`);
}
}
})
</script>
复制代码<div id="app">
<label>姓名：</label>
<input id="name" type="text" v-model:value="name" @keyup.prevent.f2="logF2">
</div>
<script>
//通过 keyCode 自定义按键修饰符
Vue.config.keyCodes.f2 = 113
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
logF2() {
console.log(`name:${this.name} --- 通过 F2 按键获得`);
}
}
})
</script>
复制代码在 Vue 的2.1.0版本中，开发者又为我们提供了系统修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器事件。
//键盘按键修饰符
.ctrl
.alt
.shift
.meta
//鼠标键盘修饰符
.left
.right
.middle
复制代码在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
可能你会觉得，这和按键修饰符也没什么差别啊，都是按下按键然后执行操作啊，看了看官方文档的解释，em，好像更晕了。既然如此我们来使用试试。
在下面的案例中，我们为 input 输入框绑定 ctrl 按键事件，我们来看看与按键修饰符的使用有什么区别。
<div id="app">
<label>姓名：</label>
<input id="name" type="text" v-model:value="name" @keyup.ctrl="log">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
log() {
console.log(`name:${this.name}`);
}
}
})
</script>
复制代码在下面的示例中，我们将 ctrl 系统修饰符与 keyCode 为67（C）的按键修饰符一起使用看看。
<div id="app">
<label>姓名：</label>
<input id="name" type="text" v-model:value="name" @keyup.ctrl.67="log">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
log() {
console.log(`name:${this.name}`);
}
}
})
</script>
复制代码<div id="app">
<label>姓名：</label>
<input id="name" type="text" v-model:value="name" @keyup.ctrl="log">
</div>
复制代码还是之前的代码，在测试的过程中，不知你是否发现，当我们绑定一个 ctrl 系统修饰符时，当我们同时使用多个系统修饰符也会触发我们的自定义事件，这肯定与我们所需要的不同。于是 Vue 在2.5.0版本中新增了 .exact 修饰符允许我们控制由精确的系统修饰符组合触发的事件。例如在下面的代码中，我们限制只能使用 ctrl+按键修饰符，却不能使用多个系统修饰符+按键修饰符一起使用。你可以亲身尝试下，你会发现，当我们使用 ctrl+c、ctrl+s 时会触发我们的自定义 log 事件，可是当你使用 ctrl+alt+c 时就不会触发我们的自定义 log 事件。
<div id="app">
<label>姓名：</label>
<input id="name" type="text" v-model:value="name" @keyup.ctrl.exact="log">
</div>
复制代码类似的在 Vue 的2.2.0版本中，开发者又为我们提供了鼠标按钮修饰符去触发鼠标事件监听器。例如下面的代码所示，当我们鼠标右键点击我们的按钮时才会触发我们的自定义 log 事件。
<div id="app">
<input id="name" type="text" v-model:value="name">
<button @click.right="log">log</button>
</div>
复制代码总结
1、对于 keyup 事件，按键修饰符可以直接使用，而系统修饰符则是以一种组合按键的形式使用。
2、我们可以通过全局 config.keyCodes 对象自定义按键修饰符别名，也可以直接使用 keyCode 为按键设定按键修饰符。
参考
占坑
作者：墨墨墨墨小宇
个人简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚定坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
个人博客：yuiter.com
博客园博客：www.cnblogs.com/danvic712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
