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

已于 2023-11-26 22:53:11 修改
阅读量971 收藏 22
点赞数 26
分类专栏： # VUE框架 前端 文章标签： vue.js 前端 javascript html5 ecmascript 前端框架 vue
于 2023-11-26 16:53:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134629822
版权 
<!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风格进行命名即可 -->
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello"
            },
            methods : {
                getInfo : function(event)
                {
                    // 识别到键入的值是13代表用户按下了回车键
                    // if(event.keyCode === 13)
                    // {
                        // event是当前发生的事件,我们通过target可以获取事件对象
                        // 再通过事件对象的value获取用户文本框内的信息
                        console.log(event.target.value);
                    // }
                }
            }
        });
    </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风格进行命名即可 -->

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello"

            },

            methods : {

                getInfo : function(event)

                {

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

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

                    // {

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

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

                        console.log(event.target.value);

                    // }

                }

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 26
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中v-model的多种使用方式-妙用小技巧
JackieDYH的博客
01-17 1724
v-model <div id="app"> <input type="text" v-model="num"> <input type="text" :value="num" v-on:input="num=$event.target.value"> <h2>{{num}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/v
vue中el-input绑定键盘按键(按键修饰符)
10-15
主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni-app加持下的Vue开发：效率与功能的双赢
程序边界
06-11 5188
Vue.js是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有项目整合。Vue.js采用自底向上增量开发的设计，提供了响应式数据绑定和组合的视图组件。通过简单的API实现响应的数据绑定和组合的视图组件，可以快速构建出功能丰富、界面美观的应用。uni-app是一个使用Vue.js开发所有前端应用的框架，它可以编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
Vue.js按键修饰符及v-model修饰符
m0_61961937的博客
04-29 1335
Vue.js按键修饰符及v-model修饰符示例
v-on详解(可绑定事件+修饰符+keyCode+vue按键别名)
weixin_44220680的博客
11-06 1199
v-on详解 事件句柄（可绑定事件） 属性 监听事件 onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击对象 ondblclick 鼠标双击对象 onerror 当加载文档或图片时出现错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress ...
vue3【实用教程】v-model（原生标签和组件上使用 v-model ，v-model 参数，绑定多个 v-model ，v-model 内置修饰符，自定义 v-model 修饰符等）
朝阳39的博客
04-18 3481
以为例：自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop，用于获取自定义的修饰符 modelModifiers : {
详解VUE自定义组件中用.sync修饰符与v-model的区别
08-27
Vue 自定义组件中用 .sync ....sync 修饰符与 v-model 都是 Vue 中非常有用的特性，它们可以帮助我们实现父组件与子组件之间的数据同步。但是，它们之间也存在一些关键的区别，我们需要根据实际情况选择合适的方法。
web前端VUE框架-基础知识及核心原理
01-27
Vue 中的事件处理通过 `v-on` 或简写 `@` 来实现，可以结合事件修饰符，如 `.stop`、`.prevent` 和按键修饰符，如 `.enter`，以实现更精细的控制。对于表单元素，Vue 提供了与原生元素相似的交互方式，如 `v-model` ...
Vue.js中 v-model 指令的修饰符详解
10-17
v-model 指令默认会在 input 事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。这篇文章通过实例代码给大家介绍Vue.js中 v-model 指令的修饰，感兴趣的朋友跟随小编一起看看吧
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 594
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 663
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 378
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1135
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
最新发布
epitomizelu的专栏
07-20 646
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1100
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 1086
nodejs、vue、SSH服务、SSH免密登录
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 435
【代码】博客前端项目学习day03——框架页。
【Vue】`v-on` 指令详解：事件绑定与处理的全面指南
lph159的博客
07-19 254
v-on是 Vue.js 用于事件监听的指令，可以绑定原生 DOM 事件或自定义事件。其基本语法如下：
vue、js截取视频任意一帧图片
weixin_43728978的博客
07-17 869
vue、js对video视频中的某一帧截取，截取视频封面
请简述Vue.js v-model修饰符的作用
05-05
Vue.js的v-model指令是用于实现双向数据绑定的，但有时候我们需要在输入框中对数据进行一些格式化或者过滤操作，这时候就需要使用v-model修饰符来改变v-model的默认行为。 v-model修饰符可以有以下几种： 1. .lazy...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值