第 3 课：v-on点击事件

日期：2026-09-02
课程序号：第 3 课
知识点：@click、methods 与响应式更新

用途

通过按钮修改页面显示的学习次数。

核心概念

v-on:click 可缩写为 @click。
methods 中普通方法的 this 指向组件实例；data 返回的字段支持响应式更新。

最小代码或操作示例

html

<!-- 在启用 Vue 模板编译器的工程中运行，与上一课同一入口 -->
<div id="app">
  <button @click="add">练习 {{ count }} 次</button>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
  data: () => ({ count: 0 }),
  methods: { add() { this.count += 1; } }
}).mount("#app");
</script>

3～5 分钟练习

增加一个重置按钮，把次数改回 0。

参考答案

html

<!-- 放在 #app 内 -->
<button @click="count = 0">重置</button>

与上一课的联系

上一课将数据绑定到属性；本课让用户事件改变同一份响应式数据。