Vue的鼠标键盘事件
原生
鼠标事件(将v-on简写为@)
@click // 点击 @dblclick // 双击 @mousedown // 按下 @mousemove // 移动 @mouseleave // 离开 @mouseout // 移出 @mouseenter // 进入 @mouseover // 鼠标悬浮 @mousedown.left
键盘事件
@keydown //键盘按下时触发 @keypress //键盘按住时触发 @keyup //键盘弹起 @keyup.13 //回车 @keyup.enter //回车 @keyup.up //上键 @keyup.down //下键 @keyup.left //左键 @keyup.right //右键 @keyup.delete//删除键 自定义 组合键盘事件 .号来连接 exact 精确修饰符 @keydown.ctrl.y="showinfor @keyup.ctrl.enter.exact= "```"
输入框事件
@input // 适用于实时查询,每输入一个字符都会触发该事件 @blur // 失去焦点触发 @keyup.enter //该事件与v-on:input事件的区别在于:input事件是实时监控的,每次输入都会调用,而@keyup.enter事件则是在pc上需要点击回车键触发,而在手机上则是需要点击输入键盘上的确定键才可触发。 @change // 下拉框改变时触发
element-ui
blur //在 Input 失去焦点时触发 回调参数 (event: Event) focus //在 Input 获得焦点时触发 回调参数 (event: Event) change //仅在输入框失去焦点或用户按下回车时触发 回调参数 (value: string | number) input //在 Input 值改变时触发 回调参数 (value: string | number) clear //在点击由 clearable 属性生成的清空按钮时触发 无回调参数
但是element-ui在实际使用时,前四条触发方法全部都是input方式(在 Input 值改变时触发)触发,遂使用原生的@blur才完成效果
表单输入相关修饰符
.lazy input 输入完毕时
.number input只获取数字类型的输入
.trim 去除用户输入中首尾的空格
Proxy 对象代理 Vue3.0X 响应性是基于Proxy实现的 Es6 新特性
Proxy对象生命中的操作
文章来源:https://www.toymoban.com/news/detail-722465.html
pinia和vuex的区别 Vuex 和 Pinia 的优缺点
pinia和vuex的区别 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex_pinia和vuex区别_more名奇妙的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-722465.html
到了这里,关于Vue的鼠标键盘事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!