vue事件监听

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的


1.回车事件(点击回车触发)

@confirm 适用uni-app

@keyup.enter 适用vue3

运用场景:通常在文本框输入的时候使用


2.点击事件(鼠标左键点击指定区域触发)

@click

运用场景:用户登陆,按钮点击


3.更改事件 (值更改触发)

@change

运用场景:通常用于文本框的值被修改的时候进行验证


4.失去焦点事件(鼠标点击之后视为聚焦,鼠标点击另一块区域视为失去焦点)

@blur

运用场景:通常用于文本框失去焦点后验证


5.获得焦点事件

@focus

运用场景:通常用于选中某些区域之后进行高亮提示


5.输入框内容变化事件

@input

运用场景:可以实现输入框输入后,下面动态生成相关内容


6.提交事件 (表单提交的时候触发)

@submit

运用场景


7.滚动事件 (滚动条滚动触发)

@scroll

运用场景


8.下拉刷新事件 (uni-app独有)

@pullingDown

运用场景:数据刷新,加载更多


9.触底事件 (uni-app独有)

@reachingBottom

运用场景:可以加载更多的数据,触底提示是否回到顶部


补充:

为什么使用v-for要定义 :key=""

javascript 复制代码
<view class="forBody" v-for="(item,index) in arrs" :key="item.id">
			
</view>

解释:

1.提高性能:

Vue 使用 key 来追踪每个节点的身份,这样就可以在更新列表时更高效地复用和重新排序现有元素,而不是每次都重新渲染整个列表。这有助于减少不必要的DOM操作,从而提高性能。

2.避免警告:

如果不为每个项指定唯一的 key,Vue 会发出警告,提示你添加 key。这是因为没有 key 会导致渲染问题,尤其是在涉及到状态管理或者动画效果时。

3.确保状态:

当列表中的数据发生变化时,Vue 会根据 key 的唯一性来判断哪些元素需要更新或移动。如果没有提供 key 或者提供的 key 不唯一,则可能导致组件状态混乱,例如计数器或其他动态数据可能不会按预期工作

因此,在使用 v-for 时,推荐为每个项提供一个唯一的 key 值,以确保正确的渲染行为和最佳性能。

相关推荐
摇滚侠3 分钟前
Java 零基础全套教程,File 类与 IO 流,笔记 177-178
java·开发语言·笔记
ytttr87320 分钟前
OPC UA 协议栈 C 语言实现
c语言·开发语言·mfc
Lkstar21 分钟前
Vue keep-alive 原理全解:LRU 缓存策略、源码级理解
前端·vue.js·面试
song50121 分钟前
Ascend C 算子开发:从入门到上手
c语言·开发语言·图像处理·人工智能·分布式·flutter·交互
会联营的陆逊22 分钟前
html2canvas 1.4.1 在 iOS Safari 中生成图片卡住的问题排查与修复
前端
小a杰.42 分钟前
Ascend C编程语言进阶:高性能算子开发技巧
android·c语言·开发语言
全糖可乐气泡水44 分钟前
Codex适配国产信创环境安装部署与技术适配全解析
开发语言·git·python·算法·百度
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_13 :(深入理解CSS中的元素尺寸调整)
前端·javascript·css·ui·html·tensorflow
雨落在了我的手上1 小时前
初始java(十):类和对象(⼆)
java·开发语言
LeocenaY1 小时前
搜集的一些测开面试题
开发语言·python