我们可以使用 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
值,以确保正确的渲染行为和最佳性能。