v-on 是 Vue.js 中用于绑定事件监听器的指令,它可以在 DOM 元素上监听各种事件,并在事件触发时执行相应的方法。
在 Vue 模板中,可以使用 v-on 指令来监听 DOM 事件,语法为 v-on:事件名 或者简写为 @事件名。当事件触发时,Vue 会调用指定的方法或者表达式。
下面是一个简单的示例,演示了如何在 Vue 模板中使用 v-on 指令监听按钮的点击事件:
<template> <button @click="handleClick">点击我</button> </template> <script> export default { methods: { handleClick() { alert('按钮被点击了!'); } } } </script> 在按钮元素上使用了 `@click="handleClick"`,这意味着当按钮被点击时,将会调用组件实例中的 `handleClick` 方法。在 `handleClick` 方法中,我们使用 `alert` 函数弹出一个提示框,显示按钮被点击了。 这样,当用户点击按钮时,就会触发 `handleClick` 方法,弹出提示框。