Vue2 基础知识点二：事件绑定 (Event Binding)

Vue2 基础知识点二：事件绑定 (Event Binding)

事件绑定就是把页面上的用户操作（点击、输入、提交等）和 Vue 里的方法联系起来。Vue2 通过v-on或简写 @ 来实现。

---

1. 基本用法

<div id="app">
  <button v-on:click="sayHello">点我</button>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    name: "桃子小姐"
  },
  methods: {
    sayHello() {
      alert("你好，" + this.name)
    }
  }
})
</script>

• 点击按钮会执行 sayHello 方法。
• 注意：方法要写在 methods 里。

---

2. 简写

@

<button @click="sayHello">点我</button>

等价于 v-on:click。

---

3. 事件对象

默认会传入event对象：

<div id="app">
  <button @click="showEvent">点我看看 event</button>
</div>

<script>
new Vue({
  el: "#app",
  methods: {
    showEvent(e) {
      console.log(e)  // e 就是浏览器事件对象
    }
  }
})
</script>

---

4. 事件修饰符

Vue2 提供了很多修饰符，帮你处理常见逻辑：

• .prevent 阻止默认事件
• .stop 阻止冒泡
• .once 只触发一次

<!-- 阻止表单默认提交 -->
<form @submit.prevent="submitForm">
  <button type="submit">提交</button>
</form>

---

5. 按键修饰符

处理键盘事件很常见，Vue2 提供了简写：

<input @keyup.enter="submitMsg" placeholder="按回车提交">

只有按下回车时才会触发 submitMsg。

---

👉 总结：事件绑定用 v-on（或 @），可以直接调用方法，也能传参，还能用修饰符简化逻辑。

---