Vue的鼠标键盘事件

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对象生命中的操作

pinia和vuex的区别 Vuex 和 Pinia 的优缺点

pinia和vuex的区别 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex_pinia和vuex区别_more名奇妙的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/72512.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过TightVNC远程访问MacOS

目录 一、下载 TightVNC 下载链接:https://www.tightvnc.com/ 下载后按步骤进行安装,安装完成后安装目录如下: 运行 tvnviewer.exe,输入远程 IP,点击【connect】: 输入密码,点击【OK】后即可远…

01 小样本学习 概述

一、前言 小样本学习(Few-Shot Learning)是近几年兴起的一个研究领域,小样本学习旨在解决在数据有限的机器学习任务[参考]。 1.1 小样本学习存在的意义? 近些年,以深度卷积神经网络为代表的深度学习方法在各类机器学…

Spring中的IOC与DI-细胞内物质与传递

对IOC的认识 Spring Inversion of Control简称Spring IOC,是一种设计原则,通过它可以实现对象之间的解耦。通过Spring DI(Dependency Injection)依赖注入实现对象生命周期管理,为开发者提供对象创建、使用方式。 Spring中的Bean 在Spring框…

GaussDB数据库SQL系列-子查询

目录 一、前言 二、GaussDB SQL子查询表达式 1、EXISTS/NOT EXISTS 2、IN/NOT IN 3、ANY/SOME 4、ALL 三、GaussDB SQL子查询实验示例 1、创建实验表 2、EXISTS/NOT EXISTS示例 3、IN/NOT IN 示例 4、ANY/SOME 示例 5、ALL示例 四、注意事项及建议 五、小结 一、…

mysql in mac学习记录

鉴于有一段时间没有访问mysql了,最近打算在mac 系统上下载mysql 练习一下sql的使用,于是 First, the mysql download https://dev.mysql.com/downloads/mysql/ Second, Mysql install steps Install the software by normally install one software …

1.物联网LWIP网络,TCP/IP协议簇

一。TCP/IP协议簇 1.应用层:FTP,HTTP,Telent,DNS,RIP 2.传输层:TCP,UDP 3.网络层:IPV4,IPV6,OSPF,EIGRP 4.数据链路层:Ethernet&#…

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点

使用Element的组件Table表格,当使用树形数据再配合上多选框,如下: 会出现一种问题,点击左上方全选,只能够选中一级树节点,子节点无法被选中,如图所示: 想要实现点击全选就选中所有的…

MFC第三十天 通过CToolBar类开发文字工具栏和工具箱、GDI+边框填充以及基本图形的绘制方法、图形绘制过程的反色线模型和实色模型

文章目录 CControlBar通过CToolBar类开发文字工具栏和工具箱CMainFrame.hCAppCMainFrm.cppCMainView.hCMainView.cppCEllipse.hCEllipse.cppCLine.hCLine.cppCRRect .hCRRect .cpp CControlBar class AFX_NOVTABLE CControlBar : public CWnd{DECLARE_DYNAMIC(CControlBar)pro…

【云原生,k8s】Helm应用包管理器介绍

目录 一、为什么需要Helm? (一)Helm介绍 (二)Helm有3个重要概念: (三)Helm特点 二、Helm V3变化 (一)架构变化 (二)自动创建名…

算法笔记:A*算法

A*算法是一种很常用的路径查找和图形遍历算法。它有较好的性能和准确度 1 中心思路 A*算法通过下面这个函数来计算每个节点n的优先级 f(n)g(n)h(n) f(n)是节点n的综合优先级。当选择下一个要遍历的节点时,总会选取综合优先级最高(f(n)值最小&#xff0…

酷开系统 | 酷开科技大数据,更好的与目标消费人群建立联系

众所周知,OTT的一大优势在于强曝光,能够给消费者带来强烈的视觉冲击,强化品牌认知。但是,要想达到提升品牌认知,首先要保证OTT的流量规模,实现对目标人群的有效覆盖。得年轻消费者得“天下”,年…