【Vue.js 牛刀小试】：第六章 - 按键修饰符的使用

系列目录地址

• 1、基础知识概览
  • 第一章 - 一些基础概念（posted at 2018-10-31）
  • 第二章 - 常见的指令的使用（posted at 2018-11-01）
  • 第三章 - 事件修饰符的使用（posted at 2018-11-02）
  • 第四章 - 页面元素样式的设定（posted at 2018-11-05）
  • 第五章 - 计算属性与监听器（posted at 2018-11-08）
  • 第六章 - 按键修饰符的使用（posted at 2018-11-15）

前言

        上周末的时候，准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上，结果在一个接一个坑里面跳，最后 Supervisor 守护程序仍是有问题，因而，采用重装系统大招，结果，碰巧遇上 aspnetcore 的一个 bug（Missing package dotnet-runtime 2.1.6 for CentOS），嗯，最后 dotnet core 环境装不上了，本来打算更新的 .NET Core 文章以及平常的 Vue 学习计划也暂时搁浅了。

        在以前的 Vue 的学习中，咱们学习了如何使用事件修饰符去处理 DOM 事件，而在某些实际场景中，咱们也须要去设定各类按键事件去优化页面的交互，本章，咱们来学习下在 Vue 中如何去监听键盘事件。

        仓储地址：Chapter01-Rookie Keyboard Modifiers

干货合集

        1、 按键修饰符

        在平常的页面交互中，咱们常常会遇到这种需求：用户输入帐号密码后点击 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>
复制代码

        固然，对于标准的104键盘，Vue 不可能帮咱们把全部的按键键值都定义好，这也不现实。因而，Vue 给咱们提供了一种经过定义全局 config.keyCodes 来自定义按键修饰符的别名的方式。例如，在上面的例子中，咱们是经过 Enter 按键获取到输入的文本框的值，如今，咱们的需求变了，须要咱们经过 F2 按键来得到文本框的值，这时咱们就能够经过自定义按键修饰符来实现操做。

<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>
复制代码

         2、 系统修饰符

        在 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 按键时，控制台不会输出任何信息，因此说，咱们自定义的方法其实并无执行。仔细看看，官方文档中的示例，系统修饰符的使用示例中，都是绑定了两个的修饰符，难道，系统修饰符必须和其它的按键修饰符一块儿使用才能够生效吗？咱们来继续尝试。

        在下面的示例中，咱们将 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>
复制代码

        可能 gif 图表达的不是很清楚，当我点击 ctrl 按键时，没有执行咱们的 log 方法，当我点击 c 按键时也并无执行咱们的自定义方法，但是当我按下 ctrl 按键时，又点击 c 按键时（这里的操做等同于你在编辑文档时使用 ctrl+c 组合按键），却执行了咱们自定义的 log 方法。经过屡次尝试，能够发现当咱们写以下代码的时候,咱们会发现若是仅仅使用系统修饰键是没法触发 keyup 事件的。

<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>
复制代码

总结

        一、对于 keyup 事件，按键修饰符能够直接使用，而系统修饰符则是以一种组合按键的形式使用。

        二、咱们能够经过全局 config.keyCodes 对象自定义按键修饰符别名，也能够直接使用 keyCode 为按键设定按键修饰符。

参考

        一、vue修饰符--多是东半球最详细的文档（滑稽）

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712