1、先创建项目，如果不会，请移步 从零开始 Vue.js
2、修改 App.vue 代码，如下：
<template>
<button @click="count++">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<style scoped>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>这样我们就得到了一个 点击会增长数字的按钮。
代码讲解：
📦 整体结构
Vue 单文件组件（.vue 文件）由三部分组成：模板、逻辑、样式。
🎨 第一部分：模板（Template）
<template>
<button @click="count++">{{ count }}</button>
</template>详细解释：
-
<button>：HTML 按钮元素 -
@click="count++"：Vue 的事件监听-
@click是v-on:click的简写 -
当按钮被点击时，执行
count++表达式 -
count++意思是count = count + 1
-
-
{``{ count }}：Vue 的插值语法（双花括号）-
显示变量
count的当前值 -
当
count变化时，这里会自动更新
-
效果：按钮上显示数字，每次点击数字增加 1
🧠 第二部分：逻辑（Script）
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>详细解释：
import { ref } from 'vue'
-
从 Vue 框架中导入
ref函数 -
ref用于创建响应式数据（数据变化时，页面自动更新）
const count = ref(0)
-
创建响应式变量
count，初始值为0 -
ref(0)返回一个对象，需要通过.value访问/修改-
读取：
count.value -
修改：
count.value = 5
-
-
但在模板中 （
<template>）使用count时，不需要写.value，Vue 会自动解包
<script setup>
-
这是 Vue 3 的组合式 API 语法糖
-
让代码更简洁
-
声明的变量/函数可以直接在模板中使用
🎭 第三部分：样式（Style）
<style scoped>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>详细解释：
scoped 关键字
-
样式只作用于当前组件，不会影响其他组件
-
Vue 会给当前组件的元素添加特殊属性（如
data-v-xxxx），让样式只匹配它们
CSS 属性说明
| 属性 | 值 | 作用 |
|---|---|---|
padding |
10px 20px |
内边距：上下10px，左右20px |
font-size |
16px |
文字大小16像素 |
cursor |
pointer |
鼠标悬停时变成手型（👆），表示可点击 |
🔄 完整工作流程
1. 页面加载
↓
2. 执行 <script setup>
- 导入 ref
- 创建 count = 0
↓
3. 渲染 <template>
- 按钮显示 "0"
↓
4. 用户点击按钮
↓
5. 触发 @click="count++"
- 执行 count.value = count.value + 1
- count 变成 1
↓
6. Vue 检测到 count 变化
↓
7. 自动重新渲染按钮
- 按钮显示 "1"
↓
8. 重复步骤 4-7...📊 关键概念总结
| 概念 | 作用 | 示例 |
|---|---|---|
| 响应式数据 | 数据变化自动更新页面 | ref(0) |
| 事件监听 | 响应用户操作 | @click="..." |
| 插值语法 | 在模板中显示数据 | {``{ count }} |
| 作用域样式 | 样式隔离 | <style scoped> |
🎯 运行效果
当你保存这段代码后：
-
浏览器显示一个按钮
-
按钮上显示数字 0
-
每次点击按钮，数字 +1
-
按钮有内边距、合适字体、鼠标手型效果