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.mzph.cn/news/44494.shtml

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

相关文章

Django实现音乐网站 ⑾

使用Python Django框架制作一个音乐网站, 本篇主要是前端开发前的一些必要配置和首页展示开发。 目录 配置应用路由 创建应用路由文件 应用路径加入项目路径 创建项目模板 创建项目及应用模板路径 设置模板路径 设置静态资源路径 创建静态资源路径 配置静态…

thinkphp6前后端验证码分离以及验证

1.验证码接口生成验证码: public function verify(){return captcha(); } 也可以自己写方法 2.验证方法和普通模式session验证有区别,需要改原文件: 修改后的代码: <?php // +---------------------------------------------------------------------- // | ThinkP…

Shell脚本基础( 四: sed编辑器)

目录 1 简介 1.1 sed编辑器的工作流程 2 sed 2.1 基本用法 2.2 sed基本格式 2.2.1 sed支持正则表达式 2.2.2 匹配正则表达式 2.2.3 奇数偶数表示 2.2.4 -d选项删除 2.2.5 -i修改文件内容 2.2.6 -a 追加 2.3 搜索替代 2.4 变量 1 简介 sed是一种流编辑器&#xff0c;…

最快的JS甘特图:Bryntum Gantt 5.5.1 Crack

最快的JS甘特图 Bryntum Gantt 是一个超快速且完全可定制的甘特图套件&#xff0c;适用于您的 React / Angular / Vue / JS 应用程序。 快如闪电 甘特图是用纯 JavaScript / ES6 构建的&#xff0c;并使用非常快速的渲染引擎。这意味着您可以加载大型数据集&#xff0c;并且仍然…

自动化测试用例设计实例

在编写用例之间&#xff0c;笔者再次强调几点编写自动化测试用例的原则&#xff1a; 1、一个脚本是一个完整的场景&#xff0c;从用户登陆操作到用户退出系统关闭浏览器。 2、一个脚本脚本只验证一个功能点&#xff0c;不要试图用户登陆系统后把所有的功能都进行验证再退出系统…

Windows如何部署Jenkins

一、简介 Jenkins 是国际上流行的免费开源软件项目&#xff0c;基于Java 开发持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;提供一个开放的易用的软件平台&#xff0c;使软件的持续集成自动化&#xff0c;大大节约人力和时效。 二、Java JDK 访问 OpenLogic…

Threejs学习05——球缓冲几何体背景贴图和环境贴图

实现随机多个三角形随机位置随机颜色展示效果 这是一个非常简单基础的threejs的学习应用&#xff01;本节主要学习的是球面缓冲几何体的贴图部分&#xff0c;这里有环境贴图以及背景贴图&#xff0c;这样可以有一种身临其境的效果&#xff01;这里环境贴图用的是一个.hdr的文件…

C语言入门_Day7 逻辑运算

目录&#xff1a; 前言 1.逻辑运算 2.优先级 3.易错点 4.思维导图 前言 算术运算用来进行数据的计算和处理&#xff1b;比较运算是用来比较不同的数据&#xff0c;进而来决定下一步怎么做&#xff1b;除此以外还有一种运算叫做逻辑运算&#xff0c;它的应用场景也是用来影…

C语言:字符函数和字符串函数

往期文章 C语言&#xff1a;初识C语言C语言&#xff1a;分支语句和循环语句C语言&#xff1a;函数C语言&#xff1a;数组C语言&#xff1a;操作符详解C语言&#xff1a;指针详解C语言&#xff1a;结构体C语言&#xff1a;数据的存储 目录 往期文章前言1. 函数介绍1.1 strlen1.…

WebStrom 前端项目Debug

1. 正常启动前端项目 2. 配置webStrom的JavaScript Debugger 点击Edit Configurations添加avaScript Debug填写URL 为项目启动路径配置要Debug的浏览器-remote-allow-origins* &#xff08;最重要&#xff0c;否则唤起的是一个about:blank空白页面&#xff09; 3. 启动Debug模…

于vue3+vite+element pro + pnpm开源项目

河码桌面是一个基于vue3viteelement pro pnpm 创建的monorepo项目&#xff0c;项目采用的是类操作系统的web界面&#xff0c;操作起来简单又方便&#xff0c;符合用户习惯&#xff0c;又没有操作系统的复杂&#xff01; 有两个两个分支&#xff0c;一个是web版本&#xff0c;…

二维码智慧门牌管理系统:打造社区管理新格局

文章目录 前言一、精准数据支持的实现二、便捷办事流程的提升三、多元化服务渠道的拓展四、高效管理和优质服务的提供 前言 在科技的推动下&#xff0c;社区管理正在迎来一场革命性的变革。其中&#xff0c;二维码智慧门牌管理系统崭露头角&#xff0c;成为了社区管理的得力助…

python高级基础

文章目录 python高级基础闭包修饰器单例模式跟工厂模式工厂模式单例模式 多线程多进程创建websocket服务端手写客户端 python高级基础 闭包 简单解释一下闭包就是可以在内部访问外部函数的变量&#xff0c;因为如果声明全局变量&#xff0c;那在后面就有可能会修改 在闭包中的…

物联网智慧安防实训综合实训基地建设方案

一、系统概述 物联网智慧安防实训综合实训基地是一个为学生提供综合实践、培养技能的场所&#xff0c;专注于物联网技术与智慧安防应用的培训和实训。通过物联网智慧安防实训综合实训基地的建设和运营&#xff0c;学生可以在真实的环境中进行实践训练&#xff0c;提高其物联网技…

嵌入式入门教学——C51(中)

嵌入式入门教学汇总&#xff1a; 嵌入式入门教学——C51&#xff08;上&#xff09;嵌入式入门教学——C51&#xff08;中&#xff09;嵌入式入门教学——C51&#xff08;下&#xff09; 目录 七、矩阵键盘 八、定时器和中断 九、串口通信 十、LED点阵屏 十一、DS1302实…

Spring 6.0官方文档示例(24): replace-method的用法

一、原始bean定义 package cn.edu.tju.study.service.anno.domain;public class MyValueCalculator {public String computeValue(String input) {return "you inputted: " input;}// some other methods... }二、replace bean定义 package cn.edu.tju.study.serv…

LED驱动型IC芯片的原理介绍

一、LED驱动器是什么 LED驱动器&#xff08;LED Driver&#xff09;&#xff0c;是指驱动LED发光或LED模块组件正常工作的电源调整电子器件。由于LED PN结的导通特性决定&#xff0c;它能适应的电源电压和电流变动范围十分狭窄&#xff0c;稍许偏离就可能无法点亮LED或者发光效…

设计模式十七:迭代器模式(Iterator Pattern)

迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供了一种访问聚合对象&#xff08;例如列表、集合、数组等&#xff09;中各个元素的方法&#xff0c;而无需暴露其内部表示。迭代器模式将遍历元素和访问元素的责任分离开来&#xff0…

04_Redis与mysql数据双写一致性案例

04——redis与mysql数据双写一致性 一、canal 是什么 canal[ka’nel,中文翻译为水道/管道/沟渠/运河&#xff0c;主要用途是用于MySQL数据库增量日志数据的订阅、消费和解析&#xff0c;是阿里巴巴开发并开源的,采用Java语言开发&#xff1b; 历史背景是早期阿里巴巴因为杭州和…

无涯教程-TensorFlow - XOR实现

在本章中&#xff0c;无涯教程将学习使用TensorFlow的XOR实现&#xff0c;在TensorFlow中开始XOR实施之前&#xff0c;看一下XOR表值。这将帮助了解加密和解密过程。 A B A XOR B 0 0 0 0 1 1 1 0 1 1 1 0 XOR密码加密方法基本上用于加密&#xff0c;即通过生成与适当密钥匹配…