事件处理基础

Vue 提供简洁的方式来监听和处理 DOM 事件。

监听事件

<button v-on:click="counter++">增加 1</button>
<p>点击了 {{ counter }} 次</p>

方法事件处理器

<button @click="greet">打招呼</button>

methods: {
  greet() {
    alert('Hello!')
  }
}

内联处理器中的方法

<!-- 传递参数 -->
<button @click="say('hi')">say hi</button>

<!-- 访问原始事件 -->
<button @click="warn('form cannot be submitted', $event)">
  提交
</button>

methods: {
  say(msg) {
    alert(msg)
  },
  warn(msg, event) {
    if (event) event.preventDefault()
    alert(msg)
  }
}

多点触控手势

<div @touchstart="onTouchStart" @touchmove="onTouchMove">
  触摸区域
</div>

要点总结

• v-on（简写 @）用于监听 DOM 事件
• 处理器可以是方法引用或内联表达式
• 使用 $event 访问原始 DOM 事件
• 支持传递自定义参数给处理器