v-on事件绑定
v-on 指令用于监听 DOM 事件并触发组件中的方法。
基本用法
方法引用
HTML
<button v-on:click="handleClick">点击</button>
<!-- 简写 -->
<button @click="handleClick">点击</button>
JavaScript
methods: {
handleClick() {
console.log('按钮被点击了')
}
}
内联处理器
HTML
<button @click="count++">增加</button>
<button @click="say('hello')">打招呼</button>
事件对象
HTML
<button @click="handleEvent">获取事件</button>
JavaScript
methods: {
handleEvent(event) {
console.log(event.target)
event.preventDefault()
}
}
多事件监听
HTML
<!-- 同时监听多个事件 -->
<button @click="onClick" @mouseenter="onHover">按钮</button>
要点总结
v-on简写为@，用于绑定事件监听器- 支持方法引用和内联处理器两种形式
- 事件对象自动作为第一个参数传入
- 可监听任意 DOM 事件
