vue学习第一阶段扩展：关于原子化CSS，DevTools插件以及小练习

步十人2026-06-18 9:15

目录

    • [一、CSS 变量 + v-bind() 在 `<style>` 中的用法](#一、CSS 变量 + v-bind() 在 <style> 中的用法)
      • [1.1 是什么](#1.1 是什么)
    • [二、原子化 CSS（选一个了解）](#二、原子化 CSS（选一个了解）)
      • [2.1 什么是原子化 CSS](#2.1 什么是原子化 CSS)
      • [2.2 Tailwind CSS（最流行的方案）](#2.2 Tailwind CSS（最流行的方案）)
      • [2.3 UnoCSS（更轻量、更快）](#2.3 UnoCSS（更轻量、更快）)
      • [2.4 要不要学](#2.4 要不要学)
    • [三、Chrome Vue DevTools 插件](#三、Chrome Vue DevTools 插件)
      • [3.1 是什么](#3.1 是什么)
      • [3.2 安装](#3.2 安装)
      • [3.3 能做什么](#3.3 能做什么)
      • [3.4 什么时候用](#3.4 什么时候用)
    • [四、阶段实战：Todo List 项目指南](#四、阶段实战：Todo List 项目指南)
      • [4.1 项目目标](#4.1 项目目标)
      • [4.2 本阶段练什么](#4.2 本阶段练什么)
      • [4.3 推荐步骤](#4.3 推荐步骤)
      • [4.4 成果检验](#4.4 成果检验)
      • [4.5 完成后的目录结构](#4.5 完成后的目录结构)

一、CSS 变量 + v-bind() 在 <style> 中的用法

1.1 是什么

语法：

vue 复制代码 
<style scoped>
.元素 {
  属性: v-bind(JavaScript变量名);
}
</style>

Vue 3.3+ 允许在 <style> 中通过 v-bind() 直接引用 <script setup> 中的变量。CSS 的值可以和 JS 数据联动。

详细讲解：

传统方式要在 JS 中动态修改样式，需要用 :style 绑定：

vue 复制代码 
<script setup>
const themeColor = ref('#42b883');
const fontSize = ref(16);
</script>

<template>
  <p :style="{ color: themeColor, fontSize: fontSize + 'px' }">
    这段文字的颜色和字号由 JS 控制
  </p>
</template>

用 v-bind() 可以把样式逻辑放到 CSS 中，模板更干净：

vue 复制代码 
<script setup>
const themeColor = ref('#42b883');
const fontSize = ref(16);
const spacing = ref(12);
</script>

<template>
  <div class="card">
    <p>卡片内容</p>
  </div>
</template>

<style scoped>
.card {
  background: v-bind(themeColor);
  font-size: v-bind(fontSize + 'px');
  padding: v-bind(spacing + 'px');
}

.card:hover {
  /* 也支持表达式 */
  background: v-bind(themeColor + '88');
}
</style>

什么时候用？

复制代码 
:style 绑定  →  针对单个元素、少量样式动态变化
v-bind()    →  多个 CSS 属性都依赖同一个 JS 变量，希望集中管理

二、原子化 CSS（选一个了解）

2.1 什么是原子化 CSS

传统写 CSS 的方式：

css 复制代码 
/* 每个组件写自己的样式文件 */
.card { background: white; border-radius: 8px; padding: 16px; }
.card-title { font-size: 18px; font-weight: bold; }

原子化 CSS 的方式：直接用预定义的 class 名组合，不写自定义 CSS。

html 复制代码 
<!-- 不用写 CSS，直接用 class 名表达样式 -->
<div class="bg-white rounded-lg p-4">
  <h1 class="text-lg font-bold">标题</h1>
</div>

每个 class 只做一件事：bg-white = 白色背景，rounded-lg = 大圆角，p-4 = 四周间距为 4 个单位。

2.2 Tailwind CSS（最流行的方案）

html 复制代码 
<!-- 用 class 组合直接写样式 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  提交
</button>

这行 class 的意思：

复制代码 
bg-blue-500       → 蓝色背景（500 是色号深浅）
hover:bg-blue-700 → 鼠标悬停时变深蓝
text-white        → 白色文字
font-bold         → 粗体
py-2              → 上下内边距（y轴）
px-4              → 左右内边距（x轴）
rounded           → 圆角

优点：

  • 不用写 CSS 文件，不用想 class 命名
  • 样式和 HTML 在一起，修改时不用翻文件
  • 一致的间距/颜色/字号体系（不会出现"这个 16px 那个 18px"的混乱）

缺点：

  • HTML 中 class 很长，看着乱
  • 需要记住 Tailwind 的缩写规则（p=padding, m=margin, bg=background）

2.3 UnoCSS（更轻量、更快）

UnoCSS 是 Tailwind 的"平替"，用法几乎一样但性能更好、打包体积更小。Vue 官方文档中的示例就用 UnoCSS。

html 复制代码 
<button class="bg-green text-white px-4 py-2 rounded hover:bg-green-600">
  确定
</button>

2.4 要不要学

了解即可，不需要深入。路线图后面做"后台管理系统"实战时，会用到组件库（Element Plus / Ant Design Vue），那时候再看要不要引入原子化 CSS。

三、Chrome Vue DevTools 插件

3.1 是什么

Vue DevTools 是一个浏览器插件（Chrome 扩展），用来调试 Vue 应用。安装后，按 F12 打开 DevTools，会多一个 Vue 面板。

3.2 安装

复制代码 
打开 Chrome
→ 搜索 "Vue DevTools"
→ 找到 Vue.js DevTools（Vue 官方）
→ 点击安装

3.3 能做什么

组件面板： 查看当前页面上有哪些组件、组件的层级关系。

复制代码 
Vue 面板
├── App
│   ├── Header
│   │   └── NavMenu
│   ├── TodoList
│   │   ├── TodoItem    ← 点它，右侧显示
│   │   ├── TodoItem         props: { id: 1, text: "学习 Vue", done: false }
│   │   └── TodoItem         refs: 没有
│   └── Footer

数据面板： 查看组件的响应式数据，实时修改测试。

复制代码 
选中一个组件 → 右侧 Components 面板
  ref / reactive 的数据都会列在这里
  可以直接双击修改值 → 页面立即更新（方便调试）

时间线（Timeline）： 记录组件更新、事件触发、路由导航的时间线，帮助排查性能问题。

3.4 什么时候用

复制代码 
遇到 bug 时 → 打开 Vue DevTools
  → 看组件的数据对不对？
  → props 传对了没有？
  → 事件触发了没有？
  → 直接改数据看页面怎么变？

四、阶段实战：Todo List 项目指南

4.1 项目目标

做一个待办事项列表，覆盖本阶段所有核心知识点：

复制代码 
功能清单：
□ 展示待办列表
□ 新增待办（输入框 + 添加按钮）
□ 标记完成/未完成（勾选框）
□ 删除待办
□ 显示统计信息（完成数/总数/百分比）
□ 数据保存到 localStorage（页面刷新不丢失）
□ 全部用 TypeScript 类型标注

4.2 本阶段练什么

知识点 在 Todo List 中怎么练
ref 声明 newTodo、todos、filter 等响应式数据
computed 计算 stats（完成数/总数）、filteredTodos（过滤后的列表）
v-for + :key 遍历 todos 渲染列表，:key 绑定 todo.id
v-if / v-show 列表为空时显示"暂无待办"提示
:class 已完成的待办添加删除线样式
@click / @keyup.enter 点击添加、按回车添加、点击删除
:style / v-bind() （扩展）主题色切换
<style scoped> 组件样式隔离
TS 类型 interface TodoItem、ref<TodoItem[]>、函数参数类型
<script setup> 全部用组合式 API

4.3 推荐步骤

复制代码 
第 1 步：显示静态列表
  创建一个 .vue 文件，写一个硬编码的 todos 数组
  用 v-for 渲染到页面上

第 2 步：添加待办
  加输入框 + 添加按钮
  用 ref 声明 newTodo
  @keyup.enter 和 @click 触发 addTodo 函数

第 3 步：标记完成
  给每项加 checkbox
  @change 触发 toggleTodo(id)
  用 :class 切换完成样式

第 4 步：删除待办
  每项加删除按钮
  @click 触发 removeTodo(id)

第 5 步：统计信息
  用 computed 计算 stats
  v-if/v-else 显示不同状态

第 6 步：localStorage 持久化
  用 watch 监听 todos 变化，存到 localStorage
  组件加载时从 localStorage 读取

第 7 步：加 TypeScript
  定义 interface TodoItem
  给 ref 加类型参数
  给函数参数加类型

第 8 步：加样式（可选）
  让 Todo List 好看一点
  尝试 v-bind() 在 CSS 中绑定主题色

4.4 成果检验

完成 Todo List 后，你应当能回答这些问题：

复制代码 
□ 什么是 ref？ref 和普通变量的区别？
□ 为什么模板中不用写 .value？
□ computed 和普通函数的区别？
□ v-if 和 v-show 的区别和选择？
□ 为什么 v-for 需要 :key？
□ how to 用 interface 定义 TodoItem 的类型？
□ ref<TodoItem[]> 中的 <TodoItem[]> 是什么意思？

4.5 完成后的目录结构

复制代码 
src/
├── App.vue              ← 根组件，放 Todo List 主逻辑
├── components/          ← 组件目录（进阶：拆分子组件时用）
│   ├── TodoInput.vue    ← 输入框组件
│   ├── TodoList.vue     ← 列表组件
│   └── TodoItem.vue     ← 单项组件
├── types/               ← 类型定义（TS 进阶用法）
│   └── todo.ts          ← interface TodoItem 定义
└── main.ts              ← 入口
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03【AI】2026 年具身智能模型和世界模型总结04GitHub 镜像站点052026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？062026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？07Codex 下载安装指南：Windows 和 macOS 官方版下载08上线仅72小时被强制下架：Claude Fable 5 的短命09AI科技热点日报 | 2026年6月1日10HTTP 与 HTTPS 的区别：从原理到实战详解