v-on指令用于监听dom事件，执行处理函数。使用步骤：1. 在元素上添加"v-on:event-name"；2. 指定javascript函数作为"handler"，该函数会在事件触发时执行。
Vue 中 v-on 指令：事件监听
v-on 指令用途：
v-on 指令用于在 Vue 组件上监听 DOM 事件，并执行相应的 JavaScript 处理函数。它本质上是一个缩写形式，代表 "v-on:event-name"。
语法：
立即学习“前端免费学习笔记（深入）”；
<code class="vue"><element v-on:event-name="handler"></element></code>
- element：要监听事件的 HTML 元素。
- event-name：要监听的 DOM 事件，例如 "click"、"input" 或 "keydown"。
- handler：当事件触发时要执行的 JavaScript 函数。
使用步骤：
- 为 HTML 元素添加 v-on 指令：在需要监听事件的元素上添加 "v-on:event-name"。
- 指定处理函数：在 v-on 指令中，指定一个 JavaScript 函数作为 "handler"，该函数将在事件触发时执行。
- 编写处理函数：在 Vue 实例中定义处理函数，并在其中包含所需的逻辑。
示例：
<code class="vue"><template>
<button v-on:click="greetUser">点击我</button>
</template>
<script>
export default {
methods: {
greetUser() {
alert("你好，用户！");
}
}
}
</script></code>当用户点击按钮时，"greetUser" 方法将被调用，从而显示一个警报框。
高级用法：
v-on 指令还支持以下高级功能：
- 传递参数：可以使用 "v-on:event-name.modifier" 语法传递参数，例如 "v-on:click.prevent"。
- 使用修饰符：修饰符可以修改事件处理的行为，例如 "stop"、"prevent" 或 "once"。
- 处理键盘事件：v-on 指令可以处理键盘事件，例如 "keydown"、"keyup" 和 "keypress"。
通过使用 v-on 指令，可以在 Vue 组件中轻松地监听 DOM 事件，并执行相应的处理逻辑。
