DAY 03 · 课程开始

前端三件套 + Vue 3

看懂网页是怎么"长"出来的，并写出第一个会动的页面

5

章节

3

件套

4

小测

CHAPTER 01

前端是什么？跑在哪里？

前端 = 你在浏览器里能看到、能点的一切

https://example.com

浏览器把 HTML / CSS / JS 渲染成你看到的页面

🌐 → 📄 → 🎨 → ⚡ → 看到的网页

💡

要点：前端代码运行在用户的浏览器里（你的电脑/手机）；后端代码运行在服务器上。这两者是不同环境，要搞清楚。

CHAPTER 02

前端三件套

把网页比作一栋房子：HTML 是骨架，CSS 是皮肤，JS 是大脑

🏗️

HTML

HyperText Markup Language

网页的骨架。决定有哪些标题、段落、图片、按钮。

🎨

CSS

Cascading Style Sheets

网页的皮肤。决定颜色、字体、布局、动画。

⚡

JavaScript

编程语言

网页的大脑。让按钮能点、数据能变、能和后端通信。

<!DOCTYPE html>
<html>
  <style>
    h1 { color: #4FC3F7; }      /* CSS：标题改颜色 */
  </style>
  <body>
    <h1 id="title">Hello</h1>          <!-- HTML：内容 -->
    <button onclick="change()">变身</button>
    <script>
      function change() {                       // JS：行为
        document.getElementById('title').innerText = '我变了！'
      }
    </script>
  </body>
</html>

CHAPTER 03

为什么需要 Vue 这种框架？

只用 HTML + CSS + JS 也能做网站，但当页面复杂起来麻烦就来了

🚧 痛点

改一个数据，要手动找所有用到它的地方更新
不同页面有重复部分（导航栏、底部），要复制粘贴 N 份
代码越写越长，10000 行后没人看得懂

⚡

响应式数据

数据一变，页面自动跟着变。不用手动操作 DOM。

🧩

组件化

把页面拆成"积木块"，每块独立维护，能复用。

📚

生态丰富

路由、状态管理、UI 库样样齐全，AI 写起来也熟悉。

🇨🇳

为什么选 Vue 3？中文文档完善，国内公司用得多，AI 也对它非常熟悉，是新手最友好的现代前端框架。

CHAPTER 04

Vue 3 的核心：响应式 + 组件化

🔁 响应式（Reactive）

数据 = 页面。改数据，页面自动刷新。

当前计数：0

点按钮看数字变化——这就是响应式

🧩 组件化（Components）

🧱 一堆组件（积木）

🏠 拼成完整页面

Card

CHAPTER 05 · 实战

第一个 Vue 3 小程序

不需要装任何工具，存为 hello.html 用浏览器打开就能跑

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
    <h2>{{ msg }}</h2>
    <p>计数：{{ count }}</p>
    <button @click="count++">点我 +1</button>
    <input v-model="msg">
  </div>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const msg = ref('Hello Vue 3!')
        const count = ref(0)
        return { msg, count }
      }
    }).mount('#app')
  </script>
</body>
</html>

🎯

动手 5 分钟挑战：新建 hello.html → 复制上面代码 → 浏览器打开 → 试着点按钮、改输入框，看数字和文字怎么联动。

FINAL CHECK

课后小测

答对 3 题以上才能解锁完成

🎨

恭喜完成 Day 3！

前端三件套和 Vue 3 的核心概念都掌握了，明天用 AI 写一个完整的 Todo 应用。