首页 > 其他分享 >Vue实战必会的几个技巧

Vue实战必会的几个技巧

时间:2022-11-10 10:26:25浏览次数:54  
标签:实战 vue console log Vue 必会 import true

键盘事件

  • js 中我们通常通过绑定一个事件,去获取按键的编码,再通过 event 中的 keyCode 属性去获得编码
  • 如果我们需要实现固定的键才能触发事件时就需要不断的判断,其实很麻烦
let button = document.querySelector('button')

button.onkeyup = function (e) {
    console.log(e.key)
    if (e.keyCode == 13) {
        console.log('我是回车键')
    }
}
  • vue 中给一些常用的按键提供了别名,我们只要在事件后加上响应的别名即可
  • vue 中常见别名有:up/向上箭头down/向下箭头left/左箭头right/右箭头space/空格tab/换行esc/退出enter/回车delete/删除
// 只有按下回车键时才会执行 send 方法
<input v-on:keyup.enter="send" type="text">
  • 对于 Vue 中未提供别名的键,可以使用原始的 key 值去绑定,所谓 key 值就是 event.key 所获得的值
  • 如果 key 值是单个字母的话直接使用即可,如果是由多个单词组成的驼峰命名,就需要将其拆开,用 - 连接
// 只有按下q键时才会执行send方法
<input v-on:keyup.Q="send" type="text">

// 只有按下capslock键时才会执行send方法
<input v-on:keyup.caps-lock="send" type="text">
  • 对于系统修饰符 ctrlaltshift 这些比较复杂的键使用而言,分两种情况
  • 因为这些键可以在按住的同时,去按其他键,形成组合快捷键
  • 当触发事件为 keydown 时,我们可以直接按下修饰符即可触发
  • 当触发事件为 keyup 时,按下修饰键的同时要按下其他键,再释放其他键,事件才能被触发。
// keydown事件时按下alt键时就会执行send方法
<input v-on:keydown.Alt="send" type="text">

// keyup事件时需要同时按下组合键才会执行send方法
<input v-on:keyup.Alt.y="send" type="text">
  • 当然我们也可以自定义按键别名
  • 通过 Vue.config.keyCodes.自定义键名=键码 的方式去进行定义
// 只有按下回车键时才会执行send方法
<input v-on:keydown.autofelix="send" type="text">

// 13是回车键的键码,将他的别名定义为autofelix
Vue.config.keyCodes.autofelix=13

标签:实战,vue,console,log,Vue,必会,import,true
From: https://www.cnblogs.com/yyds2026/p/16876169.html

相关文章

  • vue3中使用vue3-seamless-scroll(最新版本滚动插件)
    npm安装npminstallvue3-seamless-scroll--saveyarn安装yarnaddvue3-seamless-scrollbrowser安装<scriptsrc="https://unpkg.com/browse/vue3-seamless-scr......
  • vue中配置接口返回不带域名的图片地址显示问题
    前端上传图片,通过接口传给后端,需要前端渲染时,接口返回的图片路径如下图其中的path就是图片地址,而我们想渲染图片到前端页面,正常的思路是需要在前面加上服务器的域名1.......
  • Vue组件是怎样挂载的
    我们先来关注一下$mount是实现什么功能的吧:我们打开源码路径core/instance/init.js:exportfunctioninitMixin(Vue:Class<Component>){......initLifec......
  • Vue模板是怎样编译的
    这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成renderFunction形式的字符串compiler/index.jsimport{parse}from'./parser/index'imp......
  • MATLAB实战|基于14种不同的聚类分析方法
    聚类分析算法聚类分析又称群分析,它是研究(样品或指标)分类问题的一种统计分析方法,同时也是数据挖掘的一个重要算法。聚类分析是由若干模式组成的,通常,模式是一个度量的向量,聚......
  • Python实战—修改环境变量
    环境管理环境管理是Python使用中的一大好习惯,如果你不想在一遍遍重装Python和系统中折腾循,那么环境管理是学习Python的过程中非常必要的一环。手动创建虚拟环境软件安装完毕......
  • Python实战—巴尔的摩公务员的待遇怎么样?
    本节以美国城市巴尔的摩2016年公务员的工资数据集为例,数据来源于网络,通过数据分组统计,并且可视化,分析其工资情况。数据来源importnumpyasnpimportpandasaspdimportma......
  • Vue解决页面刷新后,用户信息丢失的问题
    解决方法:若存储的信息量较小的情况下可以使用如下方法。在App.vue中添加如下代码://在页面加载时读取sessionStorage里的状态信息if(sessionStorage.getItem('sto......
  • vue3 递归菜单组件
    有一个需求,就是不知道菜单到底有多少级,需要按照层级一层层地遍历出来递归实现的三个流程:写函数写遍历条件设置终止条件实现逻辑父请求子组件,并且把列表值转给子组......
  • 太全面了!RF接口自动化框架项目实战
    每天进步一点点,关注我们哦,每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号:自动化软件测试,领取资料可加:magetest码同学抖音号:小码哥聊软件测试以码同学V......