VUE框架自定义按键修饰符和系统修饰符在实际开发中的作用解析与效果实现------VUE框架

最新推荐文章于 2024-07-23 21:45:00 发布
最新推荐文章于 2024-07-23 21:45:00 发布
阅读量875 收藏 18
点赞数 21
分类专栏： 前端 # VUE框架 文章标签： vue.js javascript ecmascript 前端 前端框架 vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134654499
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 9个比较常见的案件修饰符 -->
        <!-- enter -->
        <!-- 也可以直接用按键的事件修饰符来实现,直接加上一个enter就可以实现取值效果了 -->
        回车键<input type="password" v-on:keyup.enter="getInfo" placeholder="密码1">
        <br>
        回车键<input type="password" v-on:keyup.13="getInfo" placeholder="密码2">
        <br>
        <!-- tab(没法触发keyup) -->
        <!-- tab没法触发keyup事件,只能触发keydown事件 -->
        tab键<input type="password" v-on:keydown.tab="getInfo">
        <br>
        <!-- delete -->
        delete<input type="password" v-on:keyup.delete="getInfo">
        <br>
        <!-- esc -->
        esc<input type="password" v-on:keyup.esc="getInfo">
        <br>
        <!-- space -->
        space<input type="password" v-on:keyup.space="getInfo">
        <br>
        <!-- up -->
        上<input type="password" v-on:keyup.up="getInfo">
        <br>
        <!-- down -->
        下<input type="password" v-on:keyup.down="getInfo">
        <br>
        <!-- left -->
        左<input type="password" v-on:keyup.left="getInfo">
        <br>
        <!-- right -->
        右<input type="password" v-on:keyup.right="getInfo">
        <br>
        <!-- 怎么获取按键修饰符 -->
        <!-- 第一步通过event.key获取该按键真实名字 -->
        <!-- 第二步将真实名字以kebab-case风格进行命名即可 -->
        <!-- 如pageDown是真实名字的话,命名就为page_down -->
        ctrl的keydown<input type="password" v-on:keydown.ctrl="getInfo">
        <br>
        ctrl的keyup<input type="password" v-on:keyup.ctrl="getInfo">
        <br>
        <!-- 只有按下ctrl和i一起才会触发 -->
        ctrl的keyup控制效果版本<input type="password" v-on:keyup.ctrl.i="getInfo">
        <br>
    </div>
    <script>
        // 通过我们的VUE.config.keyCodes就可以自定义按键修饰符
        // Vue.config.keyCodes.按一下 = 13;
        // 系统修饰键
        // ctrl alt shift meta
        // 对于keydown来说,只要按下ctrl键就会触发
        // 对于keyup来说,需要按下ctrl和组合键才能触发

        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello"
            },
            methods : {
                getInfo : function(event)
                {
                    // 识别到键入的值是13代表用户按下了回车键
                    // if(event.keyCode === 13)
                    // {
                        // event是当前发生的事件,我们通过target可以获取事件对象
                        // 再通过事件对象的value获取用户文本框内的信息
                        console.log(event.key);
                    // }
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <!-- 9个比较常见的案件修饰符 -->

        <!-- enter -->

        <!-- 也可以直接用按键的事件修饰符来实现,直接加上一个enter就可以实现取值效果了 -->

        回车键<input type="password" v-on:keyup.enter="getInfo" placeholder="密码1">

        <br>

        回车键<input type="password" v-on:keyup.13="getInfo" placeholder="密码2">

        <br>

        <!-- tab(没法触发keyup) -->

        <!-- tab没法触发keyup事件,只能触发keydown事件 -->

        tab键<input type="password" v-on:keydown.tab="getInfo">

        <br>

        <!-- delete -->

        delete<input type="password" v-on:keyup.delete="getInfo">

        <br>

        <!-- esc -->

        esc<input type="password" v-on:keyup.esc="getInfo">

        <br>

        <!-- space -->

        space<input type="password" v-on:keyup.space="getInfo">

        <br>

        <!-- up -->

        上<input type="password" v-on:keyup.up="getInfo">

        <br>

        <!-- down -->

        下<input type="password" v-on:keyup.down="getInfo">

        <br>

        <!-- left -->

        左<input type="password" v-on:keyup.left="getInfo">

        <br>

        <!-- right -->

        右<input type="password" v-on:keyup.right="getInfo">

        <br>

        <!-- 怎么获取按键修饰符 -->

        <!-- 第一步通过event.key获取该按键真实名字 -->

        <!-- 第二步将真实名字以kebab-case风格进行命名即可 -->

        <!-- 如pageDown是真实名字的话,命名就为page_down -->

        ctrl的keydown<input type="password" v-on:keydown.ctrl="getInfo">

        <br>

        ctrl的keyup<input type="password" v-on:keyup.ctrl="getInfo">

        <br>

        <!-- 只有按下ctrl和i一起才会触发 -->

        ctrl的keyup控制效果版本<input type="password" v-on:keyup.ctrl.i="getInfo">

        <br>

    </div>

    <script>

        // 通过我们的VUE.config.keyCodes就可以自定义按键修饰符

        // Vue.config.keyCodes.按一下 = 13;

        // 系统修饰键

        // ctrl alt shift meta

        // 对于keydown来说,只要按下ctrl键就会触发

        // 对于keyup来说,需要按下ctrl和组合键才能触发

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello"

            },

            methods : {

                getInfo : function(event)

                {

                    // 识别到键入的值是13代表用户按下了回车键

                    // if(event.keyCode === 13)

                    // {

                        // event是当前发生的事件,我们通过target可以获取事件对象

                        // 再通过事件对象的value获取用户文本框内的信息

                        console.log(event.key);

                    // }

                }

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 21
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue接口keyCodes、extend、nextTick、directive
w96098的博客
04-15 225
keyCodes 加在main中 Vue.config.keyCodes = { ssss: 86, asd: [37,38,39], // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case 且用双引号括起来 "media-play-pause": 179 } //用法：唯有按键码的数字是不变的；名字随便起； <div @keyup.sss=fun ></div> <div @keyup.me
keyCodes
BLOG域名:programb.blog.csdn.net
04-18 271
keyCodes Type: { [key: string]: number | Array<number> } Default: {} Usage: Vue.config.keyCodes = { v: 86, f1: 112, // camelCase won`t work mediaPlayPause: 179, // instead you can u...
vue全局相关extend、compoment、keyCodes、extends以及mixins
zzqz的博客
06-12 552
说明 整理笔记，希望帮到大家，主要包括extend、compoment、extends以及mixins的功能用法以及他们之间的执行关系 1、全局给keyCodes设置自定义键名 Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case ...
VUE笔记学习(1)---Vue核心
weixin_45028519的博客
11-26 767
ps:本文章结合个人与官方文档整理的学习笔记，更多详细学习请参照vue.js官方文档使用！ 1.1Vue.js 是什么 Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 1.2Vue的特点 采用组件化模式，提高代码复用率...
[vue] Vue键盘事件
qq_14993591的博客
11-02 1188
1.Vue中常用的按键别名： @keydown 键盘按下时触发 @keypress 键盘按住时触发 @keyup 键盘弹起 @keyup.13 按回车键 @keyup.enter 回车 @keyup.up 上键 @keyup.down 下键 @keyup.left 左键 @keyup.right 右键 @keyup.delete 删除键 获取按键的键码 e.keyCode <div id="root"> <h2>欢迎来到{
详解VUE自定义组件中用.sync修饰符与v-model的区别
08-27
Vue 自定义组件中用 .sync 修饰符与 v-model 的区别 在 Vue 中，自定义组件是非常常见的需求，特别是在大型项目中。今天，我们将讨论 Vue 自定义组件中用 .sync 修饰符与 v-model 的区别。 一、什么是 .sync 修饰...
vue中el-input绑定键盘按键(按键修饰符)
10-15
主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
10-15
本文将深入探讨`v-model`的三种修饰符：`.lazy`, `.number` 和 `.trim`，以及它们在实际应用中的用法。 1. **.lazy** 修饰符： 默认情况下，`v-model`会在每次输入时（即`input`事件触发时）更新数据。但使用`....
vue事件修饰符
zhouyuqin01的博客
12-01 131
<!-- 阻止事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <f.
vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
勿忘初心的博客
05-23 3968
一、事件冒泡 方法一、使用event.cancelBubble = true来组织冒泡 methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelBubble=true; /*阻止冒
Vue按键修饰符常用按键对应keyCode
weixin_46407419的博客
04-05 1508
keyCode值及对应按键 keyCode按键48-570-965-90a-z/A-Z112-135F1-F248BackSpace(退格)9Tab13Enter(回车)20Caps_Lock(大写锁定)32Space(空格键)37Left(左箭头)38Up(上箭头)39Right(...
vue 获取 键盘值 keyCode 写法
Young_Gao的博客
04-27 1万+
原文链接：http://www.jb51.net/article/111485.htm&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;  &lt;meta charset="utf-8"&gt;  &lt;title&gt;&lt;/title&gt;  &lt;script src="../js/Vue.js" chars
Vue中监听键盘事件
热门推荐
Leayh
05-22 13万+
背景 在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值 48到57 0到9 65到90 a到z（...
【记录】keyCode值以及VUE中按键别名
心有山海静而无边
03-22 1677
keyCode值以及VUE中为常用按键设置的别名
22. Vue keycodes按键修饰符
DevOps海洋的渔夫@专栏
03-18 2344
需求 在业务开发中，例如：用户登录添加用户名和密码之后，按下回车键完成登录，这个操作就需要绑定按键的keyup事件，并且还要使用按键修饰符来指定按下的键盘按钮。 下面来看看另一个需求来逐步认识一下按钮修饰符。 按键修饰符 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `...
Vue.js要点记录（二）
ZHIYUANfL的博客
01-19 1755
从 1.x 到 2.x 重要变化 (1) 在每个组件模板，不在支持片段代码 组件中模板: 之前: template> h3>我是组件h3>strong>我是加粗标签strong> template> 现在: 必须有根元素，包裹住所有的代码
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 242
前提条件：组件创建完成。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 338
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 296
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
vue的v-on作用和事件对象以及修饰符使用
02-17
Vue提供了多种修饰符，例如.stop、.prevent、.capture、.self、.once等。 常用的修饰符包括： - .stop：阻止事件继续传播 - .prevent：阻止事件的默认行为 - .capture：使用事件捕获模式，即从父元素向子元素传播...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值