【Vue.js 入门与实战】--自定义按键修饰符

简介: 一、键值修饰符二、自定义全局键值修饰符

自定义按键修饰符

 

目录

一、键值修饰符

二、自定义全局键值修饰符

 

一、键值修饰符

实现需求:在系统的网站里,希望能够通过回车键添加内容。

image.png

例如:想要通过在name框中输入:奥迪,可以完成对其的添加,这就属于文本框的回车事件。


在网页中为文本框绑定一个keyup键,用来进行敲击键盘即可进行添加内容。

<input type="text" class="form-control" v-model="name" @keyup="add">


此时,执行结果为:

image.png

此时会发现,有一些问题,事件被触发,但是有空间的合格。所以需要监听enter键。需要将代码修改成:

<input type="text" class="form-control" v-model="name" @keyup.enter="add">设置键盘抬起即可触发。此时即可正常添加。


系统提供了以下按键别名:

.enter

.tab

.delete(捕获删除退格)

.esc

.up

.space

.down

.left

.right

如果是以上没有提供的按键名,可以用以下方法:由于每个按键都对应一个键盘码,例如 F2 对应的是113,那么就可以写成:

<input type="text" class="form-control" v-model="name" @keyup.113 ="add">

这样敲击按键 F2 也可触发相应的执行。

 

二、自定义全局按键值修饰符


如果没有提供的按键修饰符,可以通过全局 config.keycodes 对象自定义键值修饰符别名,例如:

Vue.config.keycodes.f2=113

这样敲击按键 F2 也可触发相应的执行。

 

相关文章
|
9天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
189 90
|
1月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
1月前
|
缓存 监控 JavaScript
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
该文章是《vue从安装到熟练 2022流畅无痛版》系列的第一季入门篇,介绍了Vue的基本概念、环境配置、项目创建与运行,并通过修改HelloWorld.vue和App.vue文件内容展示了如何在页面上显示"Hello World",最后还提供了Vue官方文档链接和介绍了Vue的常用内置指令和模板语法等基础知识。
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
|
1月前
|
JavaScript 前端开发
vue入门
vue入门
19 2
vue入门
|
1月前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
283 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
1月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
45 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
1月前
|
JavaScript
Vue学习之--------Vue中自定义插件(2022/8/1)
这篇文章介绍了Vue中自定义插件的基本概念和实际应用,包括插件的定义、在`main.js`中使用`Vue.use()`引入插件,并通过代码实例展示了如何创建包含全局过滤器、指令和混入的插件,以及如何在Vue组件中使用这些自定义功能。同时,文章还解释了什么是mixin(混入)以及它的使用方式。
Vue学习之--------Vue中自定义插件(2022/8/1)
|
1月前
|
JavaScript 前端开发 NoSQL
使用Node.js进行后端开发入门
【8月更文挑战第10天】恭喜你完成了Node.js后端开发的入门之旅!这只是个开始,Node.js的世界远比这广阔。随着你对Node.js的深入学习和实践,你将能够构建更复杂、更强大的后端应用。不断探索、学习和实践,你将在Node.js的道路上越走越远。
|
28天前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
44 0
|
1月前
|
JavaScript PHP 开发者
PHP中的异常处理与自定义错误处理器构建高效Web应用:Node.js与Express框架实战指南
【8月更文挑战第27天】在PHP编程世界中,异常处理和错误管理是代码健壮性的关键。本文将深入探讨PHP的异常处理机制,并指导你如何创建自定义错误处理器,以便优雅地管理运行时错误。我们将一起学习如何使用try-catch块捕获异常,以及如何通过set_error_handler函数定制错误响应。准备好让你的代码变得更加可靠,同时提供更友好的错误信息给最终用户。