v-on事件绑定

v-on 指令用于监听 DOM 事件并触发组件中的方法。

基本用法

方法引用

<button v-on:click="handleClick">点击</button>

<!-- 简写 -->
<button @click="handleClick">点击</button>

methods: {
  handleClick() {
    console.log('按钮被点击了')
  }
}

内联处理器

<button @click="count++">增加</button>
<button @click="say('hello')">打招呼</button>

事件对象

<button @click="handleEvent">获取事件</button>

methods: {
  handleEvent(event) {
    console.log(event.target)
    event.preventDefault()
  }
}

多事件监听

<!-- 同时监听多个事件 -->
<button @click="onClick" @mouseenter="onHover">按钮</button>

要点总结

• v-on 简写为 @，用于绑定事件监听器
• 支持方法引用和内联处理器两种形式
• 事件对象自动作为第一个参数传入
• 可监听任意 DOM 事件