Vue的事件处理、事件修饰符、键盘事件

目录

  • 1. 事件处理基本使用
  • 2. 事件修饰符
  • 3. 键盘事件

1. 事件处理基本使用

  • 使用v-on:xxx或@xxx绑定事件,其中xxx是事件名,比如click
  • methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><button @click="showInfo1">点我提示信息(不传参)</button><button @click="showInfo2($event,66)">点我提示信息(传参)</button>
</div><script type="text/javascript">const vm = new Vue({el:'#root',methods:{showInfo1(event){console.log(event.target.innerText)    // 点我提示信息(不传参)// console.log(this) //此处的this是vmalert('同学你好!')},showInfo2(event,number){console.log(number)     // 66alert('同学你好!!')}}})
</script></body>
</html>

2. 事件修饰符

注意: 多个事件修饰符可以连写,如@click.prevent.stop

  1. prevent:阻止默认事件(常用)。如点击<a/>标签不跳转
  2. stop:阻止事件冒泡(常用)。如div里面有一个button,都有click动作,只触发button的动作,而不进行冒泡触发div的动作
  3. once:事件只触发一次(常用)。如点击按钮函数只在第一次点击时触发
  4. capture:使用事件的捕获模式。如div里面有一个button,都有click动作。正常是先捕获到div,再捕获到button,然后执行button的动作,再执行div的动作。使用了capture会先执行div的动作,再执行button的动作
  5. self:只有event.target是当前操作的元素时才触发事件。如div里面有一个button,都有click动作。正常点击button两个动作都会被触发,现在点击button只触发button的动作。这个的效果和stop动作一样
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕。如@wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动,再执行触发的函数,否则执行顺序相反

使用示例如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script><style>.div1{height: 50px;background-color: skyblue;}.ul1{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style>
</head>
<body><div id="root"><h2>prevent: </h2><!-- 也可以通过调用: event.preventDefault()来实现 --><a href="http://www.baidu.com" @click.prevent="showInfo">点我不会跳转到百度</a><h2>stop: </h2><div class="div1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><h2>once: </h2><button @click.once="showInfo">点我提示信息</button><h2>capture: </h2><div class="div1" @click.capture="showMsg(1)"><button @click="showMsg(2)">我的消息后打印</button></div><h2>self: </h2><div class="div1" @click.self="showInfo"><button @click="showInfo">你点击的是按钮,而不是div哦</button></div><!-- @scroll是右边的滚动条的滚动监听, 不需要使用passive,滚动条先滚动,再执行触发的函数 --><!-- @wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动,再执行触发的函数,否则执行顺序相反 --><h2>passive: </h2><ul @wheel.passive="cal" class="ul1"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">new Vue({el:'#root',methods:{showInfo(event){alert('同学你好!')console.log(event.target)},showMsg(msg){console.log(msg)},cal(){for (let i = 0; i < 3000; i++) {console.log('i')}console.log('累坏了')}}})
</script></body>
</html>

页面显示效果如下:
页面显示效果

3. 键盘事件

  • @keydown当键盘按下触发函数,@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到

  • Vue中常用的按键别名:

    • 回车 => enter
    • 删除 => delete (捕获“删除”和“退格”键)
    • 退出 => esc
    • 空格 => space
    • 换行 => tab (特殊,必须配合keydown去使用)
    • 上 => up
    • 下 => down
    • 左 => left
    • 右 => right
  • Vue未提供别名的按键,可以使用按键原始的key值去绑定,但多个单词的注意要转为短横线命名。如Enter,caps-lock

  • 可以使用Vue.config.keyCodes.huiche = 13定义一个按键别名。但不推荐使用keyCode,因为不同浏览器的一个按键keyCode不一样,以后keyCode这种方式会被废弃

  • 系统修饰键(用法特殊):ctrl、alt、shift、meta(windows图标)

    • 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。如ctrl + s,key和keyCode是s和83,但是ctrl的key和keyCode是Control和17。也可以指定按键,如@keyup.ctrl.y="showInfo"
    • 配合keydown使用:正常触发事件

使用示例如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><input type="text" placeholder="按下一个指定键让弹框显示值" @keyup.enter="showInfo">
</div><script type="text/javascript">Vue.config.keyCodes.huiche = 13new Vue({el: '#root',methods: {showInfo(event) {console.log(event.key, event.keyCode)    // 获取按键的名称和codealert(event.target.value)       // 获取输入框的值}}})
</script></body>
</html>

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

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

相关文章

【路由器】RT-AC88U华硕配置DNS

公共dns ip 测试了下就119.29.29.29 为53毫秒,谷歌的8.8.8.8为55毫秒。阿里的竟然有112毫秒。阿里DNS:阿里巴巴集团提供的公共DNS服务器,其服务器分布广泛,响应速度较快。主要DNS地址:223.5.5.5、223.6.6.6。 百度DNS:百度提供的公共DNS服务器,也具有较快的响应速度。主…

【原创】springboot+mysql疫苗预约网设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

uni-app中如何使用日期选择器

uni-app中如何使用日期选择器&#xff0c;分别实现日&#xff0c;月&#xff0c;年 日 <picker mode"date" fields"day">是日的内容</picker> 月 <picker mode"date" fields"month">日期选择器</picker> 年…

C++快速理解之封装

c 成员访问限定符&#xff1a;private、protected、public 1.是什么&#xff1f; 一种权限标记&#xff0c;就是你能不能使用该类中的成员 2.为什么要用&#xff1f; 一个对象&#xff0c;由很多数据&#xff08;成员变量&#xff09;很多函数&#xff08;成员函数&#xf…

STM32常见的下载方式有三种

经过对比&#xff0c;推荐使用 SWD下载&#xff0c;只需要一个仿真器&#xff08;如jLINK、ST LINK、 CMSIS DAP 等&#xff09;&#xff0c;比较方便。 不推荐使用串口下载&#xff08;速度慢、无法仿真和调试&#xff09;和 JTAG 下载&#xff08;占用 IO 多&#xff09;。

WPF参考做的TextBox圆角,并且水印文字操作

1.首先进行 转换器操作&#xff08;获取当前Textbox Text是否为空或者空格&#xff09; / // <summary>/// 非空验证转换器/// </summary>#region String IsNullOrEmptypublic class IsNullOrEmptyConverter : IValueConverter{public object Convert(object valu…

C++——模板进阶

小伙伴们大家好啊&#xff0c;停更了两个月深表歉意&#xff0c;作者调整好了状态&#xff0c;今后将继续为大家分享C的相关知识。 在前面的模板初阶中&#xff0c;我们介绍了模板的基本类型以及用法&#xff0c;包括函数模板和类模板&#xff0c;本文我们讲对模板进行更深入的…

ffmpeg -- 常用口令

文章目录 1.视频格式转换2.设置比特率3.设置帧率4.强制让输入视频帧率为1&#xff0c;输出视频帧率为245.长视频截短6.自动分割视频的bash脚本7.每一帧都保存成图片 1.视频格式转换 ffmpeg -i input.avi output.mp42.设置比特率 ffmpeg -i input.avi -b:v 64k -bufsize 64k o…

甄选范文“论负载均衡技术在Web系统中的应用”软考高级论文系统架构设计师论文

论文真题 负载均衡技术是提升Web系统性能的重要方法。利用负载均衡技术, 可将负载(工作任务) 进行平衡、分摊到多个操作单元上执行, 从而协同完成工作任务, 达到提升Web系统性能的目的。 请围绕“负载均衡技术在Web系统中的应用”论题, 依次从以下三个方面进行论述。 1.…

【ARM】ULINK Pro如何和SWD接口进行连接调试

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决ULINK Pro和JTAR接口进行连接问题。 2、 问题场景 因为ULINK Pro本身自带的接口是Cortex-M ETM Interface 20-pin Connector。所以无法和JTAR接口直接进行连接。 图2-1 3、软硬件环境 1&#xff09;、软件版…

【微信小程序实战教程】之微信小程序中的 JavaScript

微信小程序中的 JavaScript 微信小程序的业务逻辑都是通过JavaScript语言来实现的&#xff0c;本章我们将详细的讲解JavaScript的基本概念&#xff0c;以及在小程序中如何使用JavaScript语言。JavaScript是一种轻量的、解释型的、面向对象的头等函数语言&#xff0c;是一种动态…

vue 开发工具 Hbuilder 简介及应用

一、简介 HBuilderX 是一款流行的前端开发工具&#xff0c;由DCloud公司开发。它支持多种编程语言&#xff0c;如HTML、CSS、JavaScript、Vue、UniApp等&#xff0c;非常适合用来开发Web应用、移动端应用和跨平台应用。 官网地址&#xff1a;https://www.dcloud.io/hbuilderx.…

UE基础 —— 工具和编辑器

目录 Level Editor Static Mesh Editor Material Editor Blueprint Editor Physics Asset Editor Behavior Tree Editor Niagara Editor UMG UI Editor Font Editor Sequencer Editor Animation Editor Control Rig Editor Sound Cue Editor Media Editor nDisp…

SB3045LFCT-ASEMI无人机专用SB3045LFCT

编辑&#xff1a;ll SB3045LFCT-ASEMI无人机专用SB3045LFCT 型号&#xff1a;SB3045LFCT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 批号&#xff1a;最新 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;30A 最大循环峰值反向电压&#xff08;VRRM&…

【IEEE独立出版】第四届计算机科学与区块链国际学术会议 (CCSB 2024)

第四届计算机科学与区块链国际学术会议 (CCSB 2024) 2024 4th International Conference on Computer Science and Blockchain 2024年9月6-8日 中国-深圳 老牌会议 | 涵盖计算机学科 | 往届均完成见刊、稳定检索 | 论文录用速度快 | 有ISBN号! *关于IEEE出版社 电气电子工…

Ubuntu23.10 安装kvm并使用nmtui创建桥接网络

1.实验准备 &#xff08;1&#xff09;使用Vmware安装Ubuntu23.10 2.实验步骤 &#xff08;1&#xff09;配置ssh &#xff08;2&#xff09;安装qemu &#xff08;3&#xff09;安装libvirt服务 &#xff08;4&#xff09;安装virtinst &#xff08;5&#xff09;启动libvir…

Android14音频进阶调试之命令播放mp3/aac非裸流音频(八十)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 新书发布:《Android系统多媒体进阶实战》🚀 优质专栏: Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏: 多媒体系统工程师系列【原创干货持续更…

糟糕界面集锦-控件篇03

非常感激 Gordon Allison 提供这个样本。 很高兴通知你们各位&#xff0c;微软的界面设计原来是由艺术家而不是界面设计师来完成的。 在 Word 97 的字体对话框中用户可以用一堆复选框来选择字体属性。这没什么问题。但是&#xff01;其中有4 对选项是互斥的&#xff1a;删除线…

web通用漏洞

web通用漏洞 文章目录 web通用漏洞1. SSRF1. gopher伪协议2. 常见绕过1. ip地址绕过2. DNS重绑定攻击 3. mysql未授权4. tomcat漏洞5. redis未授权写webshell6. redis 未授权写入ssh公钥7. redis 未授权计划任务shell反弹 2. XXE测试 3. XSS4. CSRF关于vmware的网络参考 1. SSR…

AI面试:未来招聘的新常态?

一、引言&#xff1a;招聘变革的序章 在数字化浪潮的推动下&#xff0c;各行各业正经历着前所未有的变革&#xff0c;而人力资源管理作为企业发展的核心驱动力之一&#xff0c;也迎来了其转型升级的关键时刻。传统招聘流程中&#xff0c;简历筛选、初步面试、复试乃至终面&…