以下是常用的 Vue 监听事件及其作用,包括指令和组件事件:

指令:
@click: 监听元素的点击事件,并执行相关的代码。
@input: 监听输入框的输入事件,在输入框的值发生改变时执行相关的代码。
@submit: 监听表单的提交事件,并执行相关的代码。
@focus: 监听元素获取焦点事件,并执行相关的代码。
@blur: 监听元素失去焦点事件,并执行相关的代码。
@keyup: 监听键盘按键抬起事件,并执行相关的代码。
@keydown: 监听键盘按键按下事件,并执行相关的代码。
@scroll: 监听元素滚动事件,并执行相关的代码。
@load: 监听元素加载完成事件,并执行相关的代码。
@change: 监听元素值的改变事件,并执行相关的代码。
v-on:mouseover: 监听鼠标移入事件,并执行相关的代码。
v-on:mouseout: 监听鼠标移出事件,并执行相关的代码。
v-on:mouseenter: 监听鼠标进入事件,并执行相关的代码。
v-on:mouseleave: 监听鼠标离开事件,并执行相关的代码。
v-on:touchstart: 监听触摸屏幕事件的开始,并执行相关的代码。
v-on:touchmove: 监听触摸屏幕事件的移动,并执行相关的代码。
v-on:touchend: 监听触摸屏幕事件的结束,并执行相关的代码。
组件事件:
@click: 监听组件的点击事件,并执行相关的代码。
@input: 监听组件的输入事件,在组件的值发生改变时执行相关的代码。
@submit: 监听组件的提交事件,并执行相关的代码。
@focus: 监听组件获取焦点事件,并执行相关的代码。
@blur: 监听组件失去焦点事件,并执行相关的代码。
@keyup: 监听组件的键盘按键抬起事件,并执行相关的代码。
@keydown: 监听组件的键盘按键按下事件,并执行相关的代码。
@scroll: 监听组件的滚动事件,并执行相关的代码。
@load: 监听组件的加载完成事件,并执行相关的代码。
@change: 监听组件的值的改变事件,并执行相关的代码。
在 Vue 中,可以通过监听事件实现动态的数据绑定、用户交互操作以及组件之间的通信等功能。通过监听事件,可以实现对用户操作的响应,让页面更加动态、生动。同时,Vue 的监听事件也是其响应式编程的重要组成部分,可以让开发者更加方便地实现业务逻辑。

Logo

前往低代码交流专区

更多推荐