vue中v-on的用法

Vue 中 v-on 指令：事件监听

v-on 指令用途：

v-on 指令用于在 Vue 组件上监听 DOM 事件，并执行相应的 JavaScript 处理函数。它本质上是一个缩写形式，代表 "v-on:event-name"。

语法：

立即学习“前端免费学习笔记（深入）”；

<element v-on:event-name="handler"></element>

使用步骤：

1. 为 HTML 元素添加 v-on 指令：在需要监听事件的元素上添加 "v-on:event-name"。
2. 指定处理函数：在 v-on 指令中，指定一个 JavaScript 函数作为 "handler"，该函数将在事件触发时执行。
3. 编写处理函数：在 Vue 实例中定义处理函数，并在其中包含所需的逻辑。

示例：

<template><button v-on:click="greetUser">点击我</button></template><script>export default {  methods: {    greetUser() {      alert("你好，用户！");    }  }}</script>

当用户点击按钮时，"greetUser" 方法将被调用，从而显示一个警报框。

高级用法：

v-on 指令还支持以下高级功能：

通过使用 v-on 指令，可以在 Vue 组件中轻松地监听 DOM 事件，并执行相应的处理逻辑。