脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue之v-on指令和事件监听使用

Vue之v-on指令和事件监听使用方式

 更新时间：2025年06月17日 15:47:12   投稿：jingxian  
这篇文章主要介绍了Vue之v-on指令和事件监听使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、v-on 指令是什么？

  • 作用：在 Vue 模板中监听 DOM 事件（如点击、输入、提交），触发对应方法。
  • 缩写：@ 是 v-on: 的简写，推荐用 @（更简洁）。

二、基本语法：监听单个事件

1. 最简写法（无参数）

<button @click="greet">点我</button>
<!-- 完全等价于 -->
<button v-on:click="greet">点我</button>

2. 带参数写法

<button @click="say('Hello')">传参</button>
methods: {
  say(message) {
    console.log(message); // 输出：Hello
  }
}

三、获取事件对象的两种方式

1. 自动接收（无额外参数时）

<button @click="handle">点我</button>
handle(event) {
  // event 是事件对象，参数名可自定义（如 e、evt）
  console.log(event.target.tagName); // 输出：BUTTON
}

2. 手动传递（带额外参数时）

<button @click="handle('自定义参数', $event)">点我</button>
handle(msg, event) {
  console.log(msg);       // 输出：自定义参数
  console.log(event.type); // 输出：click
}

四、常用事件名（固定写法，直接用）

事件名触发场景示例
click鼠标点击<button @click="submit">
input输入框内容变化<input @input="liveSearch">
change表单元素值改变（如 select）<select @change="update">
submit表单提交<form @submit="handleSubmit">
keydown键盘按下<input @keydown.enter="search">

五、事件修饰符：简化事件处理

修饰符作用示例
.stop阻止事件冒泡（相当于 event.stopPropagation()）<button @click.stop="handle">
.prevent阻止默认行为（相当于 event.preventDefault()）<form @submit.prevent="submit">
.once事件只触发一次<button @click.once="pay">
.self只当事件在该元素本身触发时执行<div @click.self="handle">

组合修饰符示例：

<!-- 点击按钮提交表单，阻止冒泡且只触发一次 -->
<button @click.stop.once="submitForm">提交</button>

六、按键修饰符：监听键盘事件

修饰符对应按键示例
.enter回车键<input @keyup.enter="search">
.escESC 键<input @keydown.esc="cancel">
.space空格键<input @keydown.space="handle">

示例：按下回车键触发搜索

<input @keyup.enter="search" placeholder="搜索...">

七、动态事件名（Vue 3 支持）

用方括号包裹变量，动态决定监听哪个事件：

<!-- eventType 是组件内变量，值可能是 'click' 或 'mouseover' -->
<button @[eventType]="handle">动态事件</button>

八、绑定多个事件

用对象语法同时监听多个事件：

<button v-on="{ 
  click: handleClick,
  mouseover: handleHover 
}">多功能按钮</button>

九、总结：核心用法速查表

需求Vue 写法
监听点击事件<button @click="handle">
带参数触发方法<button @click="handle('参数')">
获取事件对象<button @click="handle($event)">
阻止事件冒泡<div @click.stop="handle">
表单提交不刷新页面<form @submit.prevent="submit">
按回车键触发事件<input @keyup.enter="search">
事件只触发一次<button @click.once="pay">

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue2.0结合webuploader实现文件分片上传功能

    Vue2.0结合webuploader实现文件分片上传功能

    这篇文章主要介绍了Vue2.0结合webuploader实现文件分片上传功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • vue+echarts封装气泡图的方法

    vue+echarts封装气泡图的方法

    这篇文章主要为大家详细介绍了vue+echarts封装气泡图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 详解基于vue-cli配置移动端自适应

    详解基于vue-cli配置移动端自适应

    本篇文章主要介绍了详解基于vue-cli配置移动端自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue关于页面刷新的几个方式解读

    vue关于页面刷新的几个方式解读

    这篇文章主要介绍了vue关于页面刷新的几个方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • Vue获取HTMLCollection列表的children时结果为undefined问题

    Vue获取HTMLCollection列表的children时结果为undefined问题

    这篇文章主要介绍了Vue获取HTMLCollection列表的children时结果为undefined问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue项目如何安装引入使用Vant

    Vue项目如何安装引入使用Vant

    Vant是一个专为移动端设计的轻量级组件库,自2017年开源以来,提供了Vue2、Vue3及多平台版本支持,安装Vant时需要注意版本兼容问题,Vue3项目应安装最新版Vant3,而Vue2项目则需安装Vant2,安装错误时,需卸载后重新安装正确版本
    2024-10-10
  • vue3父子同信的双向数据的项目实现

    vue3父子同信的双向数据的项目实现

    我们知道的是，父传子的通信，和子传父的通信，那如何实现父子相互通信的呢，本文就来详细的介绍一下，感兴趣的可以了解一下
    2023-08-08
  • 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    这篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 解决VUE的对话框el-dialog点击外部消失问题

    解决VUE的对话框el-dialog点击外部消失问题

    这篇文章主要介绍了解决VUE的对话框el-dialog点击外部消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue全局挂载实现APP全局弹窗的示例代码

    vue全局挂载实现APP全局弹窗的示例代码

    本文主要介绍了vue全局挂载实现APP全局弹窗的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05

最新评论