{{ }}和v-on:click
好的，我们来对 Vue 中这两个最常用语法的“可接受内容”进行一个清晰的总结。
它们的核心区别在于职责不同：一个是为了显示，另一个是为了行动。
总结对比表
| 特性 | 插值表达式 {{ }} | v-on 事件处理器 (@) |
|---|---|---|
| 核心职责 | 计算并显示一个值 (Display a Value) | 当事件发生时执行一个动作 (Execute an Action) |
| 性质 | 只读的 (Read-only) | 可写的 (Writable) |
| 允许的内容 | 无副作用的 JavaScript 表达式 | JavaScript 语句 (包括有副作用的表达式语句) |
| 是否允许副作用 | 禁止 ❌ (会收到警告或报错) | 允许 ✅ (其主要目的就是处理副作用) |
| 典型合法示例 | - name <br> - count + 1 <br> - isActive ? '是' : '否' <br> - items.slice(0, 5) <br> - formatDate(date) | - count++ <br> - awesome = !awesome <br> - items.push('new') <br> - myMethod() <br> - myMethodWithArg(item) |
| 典型非法/不推荐示例 | - count++ (有副作用) <br> - awesome = !awesome (有副作用) <br> - let a = 1; (语句) <br> - if (x) { ... } (语句) | - 过于复杂的逻辑，如：validate(); api.call(); (不推荐，应封装到方法中) <br> - 任何返回值的复杂计算 (无意义，返回值会被忽略) |
一个简单的记忆法则：餐厅的比喻
你可以把 Vue 模板想象成一家餐厅：
-
{{ }}是餐厅的菜单 (Menu)- 菜单的职责是描述和展示菜品（显示你的数据状态）。
- 你只能阅读菜单上的内容 (
{{ user.name }})，或者做一些简单的计算来决定看什么 ({{ price * 1.1 }})。 - 你不能在菜单上直接写字来修改你的订单 (
{{ orderStatus = '已下单' }}是绝对禁止的)，这是不合规矩的。
-
@click是餐厅的服务员 (Waiter)- 服务员的职责是接收你的指令并执行动作。
- 你可以对他下达各种指令（执行语句），比如：
- “我的订单状态改成‘已下单’” (
@click="orderStatus = '已下单'")。 - “再给我加个菜” (
@click="cart.push('新菜品')")。 - 或者叫他去执行一套复杂的流程（调用方法）：“结账” (
@click="checkout()")。
- “我的订单状态改成‘已下单’” (
最终结论
总而言之，请记住这个简单的规则：
花括号 {{ }} 只看不做，@ 符号主要负责做。
在模板中保持这种清晰的职责分离，是编写高质量、可维护的 Vue 代码的关键。