Vue学习v-on

Vue学习v-on


一、前言

v-on 是 Vue.js 中用于监听 DOM 事件的指令。它可以在触发特定事件时执行指定的 JavaScript 代码或者调用 Vue 实例中的方法。下面我来详细介绍一下 v-on 的用法和示例:

1、基本用法

你可以将 v-on 指令添加到 DOM 元素上,并指定要监听的事件和要执行的事件处理程序。

html 复制代码
<button v-on:click="handleClick">点击我</button>

在这个例子中,v-on:click 指令告诉 Vue.js 监听按钮的点击事件,当按钮被点击时,会执行 Vue 实例中名为 handleClick 的方法。

2、事件修饰符

Vue.js 提供了一些事件修饰符,用于处理特定的事件行为。例如,.stop 用于阻止事件冒泡,.prevent 用于阻止默认事件行为,.capture 将事件侦听器添加到捕获阶段等。

html 复制代码
<form v-on:submit.prevent="handleSubmit">
  <!-- 阻止表单默认提交行为 -->
  <button type="submit">提交</button>
</form>

3、事件对象

在事件处理程序中,你可以通过特殊变量 $event 访问原生 DOM 事件对象。

html 复制代码
<button v-on:click="handleClick($event)">点击我</button>
javascript 复制代码
methods: {
  handleClick(event) {
    console.log(event); // 输出原生 DOM 事件对象
  }
}

4、动态事件名

你也可以使用动态事件名来监听事件。

html 复制代码
<button v-on:[eventName]="handleClick">点击我</button>
javascript 复制代码
data() {
  return {
    eventName: 'click'
  };
},
methods: {
  handleClick() {
    console.log('按钮被点击了');
  }
}

5、事件修饰符和按键修饰符

除了一般的事件修饰符外,Vue.js 还提供了按键修饰符,用于监听键盘事件。

html 复制代码
<input v-on:keyup.enter="submit">

在这个例子中,keyup.enter 表示监听键盘的回车键,并在按下回车键时执行 submit 方法。

6、自定义事件

除了原生 DOM 事件外,Vue.js 还支持自定义事件。你可以使用 $emit 方法在子组件中触发自定义事件,并在父组件中使用 v-on 监听这些事件。

二、总结

v-on 指令是 Vue.js 中用于监听 DOM 事件的主要方式,它可以监听原生 DOM 事件和自定义事件,并支持事件修饰符和按键修饰符,以及动态事件名的绑定。

相关推荐
大雷神26 分钟前
【成长纪实】Flutter中Dart 与Harmony中 ArkTS 异步编程对比:从 Future 到 Promise
flutter·harmonyos
菜鸟una1 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
_李小白2 小时前
【OPENGL ES 3.0 学习笔记】第九天:缓存、顶点和顶点数组
笔记·学习·elasticsearch
我的div丢了肿么办3 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
QuantumLeap丶3 小时前
《Flutter全栈开发实战指南:从零到高级》- 05 - 基础组件实战:构建登录界面
flutter·ios
武天3 小时前
一个项目有多个后端地址,每个后端地址的请求拦截器和响应拦截器都不一样,该怎么封装
vue.js
洛白白3 小时前
Word文档中打勾和打叉的三种方法
经验分享·学习·word·生活·学习方法
黄毛火烧雪下3 小时前
(四)Flutter插件之IOS插件开发
flutter·ios
潜心编码3 小时前
基于vue的停车场管理系统
前端·javascript·vue.js