一、前言

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

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

  学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html

  仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/Chapter01-Rookie/modifiers/keyboard.html

二、干货合集

  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>

三、总结

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

  2、我们可以通过全局 config.keyCodes 对象自定义按键修饰符别名,也可以直接使用 keyCode 为按键设定按键修饰符。

四、参考

  1、vue修饰符--可能是东半球最详细的文档(滑稽)

Vue.js-06:第六章 - 按键修饰符的使用的更多相关文章

  1. Vue.js-03:第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  2. Vue.js学习笔记(三) - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  3. VueJS事件处理器v-on:事件修饰符&amp;按键修饰符

    事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通 ...

  4. 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. vue.js(13)--按键修饰符

    v-on监听事件时可添加按键修饰符 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter=&q ...

  7. vue 自定义全局按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...

  8. Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

    1.绑定监听@click: (以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click ...

  9. Vue学习笔记十一:按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

随机推荐

  1. 好久没上cnblogs了

    以为登录不上了,原来还是可以登录上的,不错~~~上来标记一下

  2. Django 学习笔记之一 环境搭建

    以后的文章都是在windows系统进行的 首先下载安装Django包 方式1:使用 pip或easy_insatll来进行安装 同时按住win+R键,弹出命令行运行框输入,pip install Dj ...

  3. js 去除字符串左右两端的空格

    <script type="text/javascript"> function trim(str){ //删除左右两端的空格      return str.repl ...

  4. docker之tomcat简单部署

    将apache-tomcat-8.0.36.tar.gz及jdk-7u79-linux-x64.gz拷贝到创建的tomcat8目录下 在tomcat8目录下创建Dockerfile文件 在Docker ...

  5. 如何计算Java对象所占内存的大小

    [ 简单总结: 随便一个java项目,引入jar包: lucene-core-4.0.0.jar 如果是 maven项目,直接用如下依赖: <dependency> <groupId ...

  6. SPI中的极性CPOL和相位CPHA

    详解SPI中的极性CPOL和相位CPHA SPI由于接口相对简单(只需要4根线),用途算是比较广泛,主要应用在 EEPROM,FLASH, 实时时钟,AD转换器,还有数字信号处理器和数字信号解码器之间 ...

  7. 面向对象设计模式纵横谈:Factory Method 工厂方法模式(笔记记录)

    从耦合关系谈起 耦合关系直接决定着软件面对变化时的行为 -模块与模块之间的紧耦合使得软件面对变化时,相关模块都要随之更改 -模块与模块之间的松耦合使得软件面对变化时,一些模块更容易被替换或者更改,但其 ...

  8. jdbc动态切换数据库

    http://www.oschina.net/code/snippet_140474_50797

  9. iOS - OC 与 C 互相操作

    前言 在 Objective-C 语言中,我们可以使用 C.Swift 语言编写代码,我们可以导入任意用 C.Swift 写的 Cocoa 平台框架.C 框架或 Swift 类库. 1.在 C 中使用 ...

  10. 几张图轻松理解String.intern()

    https://blog.csdn.net/soonfly/article/details/70147205 在翻<深入理解Java虚拟机>的书时,又看到了2-7的 String.inte ...