vue学习(11)键盘事件

简介: vue学习(11)键盘事件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
</head>

<body>
    <div id="root">
        <h2>欢迎来学习{
   {
   name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <input type="text" placeholder="按下ctrl+y提示" @keyup.ctrl.y="showInfo">
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        Vue.config.keyCodes.huiche = 13;
        new Vue({
   
            el: '#root',
            data: {
   
                name: 'vue'
            },
            methods: {
   
                showInfo(e) {
   
                    // if(e.keyCode === 13){
   
                    //     console.log(e.target.value);
                    // }
                    console.log(e.target.value);
                }
            }
        });
    </script>
</body>

</html>

知识点:
1:keydown和keyup:keydown按下键盘就会执行,keyup按下然后松手执行。
2:vue中常用的按键别名
回车 =》enter
删除 =》delete(捕获删除和退格)
退出 =》esc
空格 =》space
换行 =》tab (特殊,多配合keydown去使用)
上 =》up
下 =》down
左 =》left
右 =》right
3:vue未提供别名的按键,可以使用按键原始的key名去绑定。但注意要转换为kebab-case(短横线命名)
4:系统修饰符(用法特殊)ctrl,alt,shift,meta
(1)配合keydown使用,正常触发事件。
(2)配合keyup使用,按下修饰键的同时,按下其他键,随后释放其他键,事件才会被触发。
5:也可以使用keyCode去指定具体的按键。(不推荐)
6:Vue.config.keyCodes.自定义别名 =键码,可以去定制按键别名。

目录
相关文章
|
1天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
10 1
|
3天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
11 1
|
2天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
10 0
|
2天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
9 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1040 0
|
3天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
22 1
|
3天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
12 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
9 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
4天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
20 1