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

Vue实战必会的几个技巧

时间:2022-10-03 16:00:28浏览次数:50  
标签:实战 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/16750626.html

相关文章

  • Vue响应式依赖收集原理分析-vue高级必备
    背景在Vue的初始化阶段,_init方法执行的时候,会执行initState(vm),它的定义在src/core/instance/state.js中。在初始化data和propsoption时我们注意initProps......
  • 深度学习Vue源码-模板编译原理
    前言此篇主要手写Vue2.0源码-模板编译原理上一篇咱们主要介绍了Vue数据的响应式原理对于中高级前端来说响应式原理基本是面试Vue必考的源码基础类如果不是很清......
  • SSM+Vue房屋出租出售系统 个人房屋出租管理系统 房屋出售管理系统Java
    ......
  • Vue2 组件间通讯
    概述在Vue中一个项目中往往需要被拆分成多个组件,但是每个组件之间都会有相互访问数据的需求。这时就涉及到组件之间的通讯了。使用props进行组件间的通讯父向子通......
  • Vue2 路由
    Vue路由基本使用安装npmivue-router@3配置在src目录下生成router/index.js用于存放router的配置。router/index.js//引入vue-routerimportVueRoute......
  • vue-ant design示例大全——按钮本地css/js资源
    vue-antdesign示例大全——本地css/js资源示例资源来自官网:​​https://www.antdv.com/components/button-cn​​在AntDesignVue中我们提供了五种按钮。主按钮:用于主行......
  • Vue2 ref
    ref概述我们在使用Vue时,有时会需要拿到DOM元素进行操作。这时Vue不推荐我们进行使用原生JS获取DOM元素。而是为我们提供了ref方便我们去获取组件中的DOM......
  • Vue2 自定义属性
    概述vue中不不仅仅有官方提供的指令,用户还可以根据自己的需要进行自定义指令。比如当我们需要一个常用的操作将文字改为蓝色,如果我们需要修改大量标签时,就可以使用自定......
  • Vue2 组件
    非单文件组件(过渡)非单文件组件就是指并非一个组件占用一个文件,而是一个人间中有多个组件。我们只将其作为学习的过度,实际开发中不适用这种方式。demo:<body> <divid="a......
  • Vue2 生命周期
    Vue生命周期概述在使用Vue时,我们需要执行一些JS代码。比如我们需要在页面中添加一个定时器来固定间隔更新时间。这时我们可能会想到直接在,Vue实例外书写JS代码......