5. 事件与方法

这是什么：Vue 事件 = 用 v-on 指令（缩写 @）把用户动作绑到方法上，比如 @click="add"。

为什么用：上一章的数据会变，但没人点它页面也不会动。事件就是「用户做了什么」的信号，Vue 用它把人、数据和页面接起来。

如何用：本章从基础绑定、带参数事件讲到修饰符，先做一个计数器按钮，再把阻止冒泡写成 @click.stop。

5.1 基础绑定

完整页面（可直接跑）：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <title>事件绑定</title>
  <script src='https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js'></script>
</head>
<body>
  <div id='app'>
    <button @click='plusOne'>+1（现在是 {{ n }}）</button>
    <button @click='n += 10'>内联 +10（无需方法）</button>
  </div>

  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const n = ref(0)
        function plusOne() {
          n.value++
        }
        return { n, plusOne }
      }
    }).mount('#app')
  </script>
</body>
</html>

• @click='plusOne' 指定方法名，复杂逻辑放在方法里
• @click='n += 10' 一行逻辑可直接内联

5.2 带参数的事件

<button @click="say('你好')">打招呼</button>
<button @click="say('再见')">道别</button>

<script>
function say(text) {
  console.log(text)
}
</script>

需要事件对象又带参数时用 $event：

<input @keydown.enter='onEnter($event)' />

5.3 事件修饰符（大杀器）

把 jQuery 里手写的 .preventDefault() / stopPropagation() 变成小后缀：

<!-- 阻止表单提交跳转 -->
<form @submit.prevent='submit'>
  <input v-model='name' />
  <button>提交</button>
</form>

<!-- 回车提交 -->
<input v-model='name' @keyup.enter='submit' />

还记得 jQuery 练习里 e.stopPropagation() 吗？Vue 里两字符搞定：@click.stop。

5.4 方法组织建议

<script>
const { ref } = Vue
const items = ref([])

// ① 表单提交类
function submit() {
  if (!items.value.length) return
  save()
}
// ② 纯工具函数
function save() {
  console.log('保存', items.value)
}
</script>

方法只写「业务动作」，不要在函数里直接操作 DOM——那是 jQuery 的思路，Vue 里请改数据。

5.5 动手改

1. 做一个计数器：+1、-1、@click 上同时挂 .once（提示：Vue 有 .once）
2. 表单回车提交，用 .enter
3. 给按钮点加 .right 修饰符试试右键

5.6 小结

• @事件名 绑定；短逻辑内联、长逻辑进方法
• 修饰符 = 行为后缀：.prevent / .stop / .enter
• 方法操作数据，不碰 DOM

下一章：组件基础 🐸