100字概括

本次 FIT5032 讲授 Vue 入门：梳理 DOM 与渲染（SSR/CSR/混合、Hydration、懒加载），阐释虚拟 DOM 与 SPA；强调 Composition API、props/emits、ref/reactive、数据绑定与常用指令；介绍 JSON 用途、lambda/箭头函数在事件与 computed 中的应用，并明确作业与时间点。

主要内容（整合讲解）

1) DOM 与渲染模型

• DOM 为树状结构，浏览器据此渲染页面。渲染可在服务端或客户端完成，也可混合，并引入 Hydration 与懒加载以优化首屏与后续加载。
• 课堂强调：CSR 初次会拿到较重的 JS 包，之后交互更轻；现代实践常取两者折中。
• Hydration：客户端接管服务器返回的静态 HTML，使其成为可响应的动态 DOM；懒加载按需加载页面部分资源。

2) Vue 工作方式与架构

• 课程定位：从 MVC/MVVM 认识到 .vue 的 Template/Script/Style 组织。
• Vue 关键：Reactivity、Component、Virtual DOM、Props、Composition API、Data Binding、生命周期、路由、状态管理与 API。
• 课堂要求：本单元使用 Composition API 而非 Options API。

3) 组件通信与响应式

• 父→子用 props，子→父用 emits；<script setup> 下使用 ref（单值）与 reactive（对象/数组）。
• 课堂演示了在 Composition API 中通过 props 传值与类型约束、并提示后续会用 emits 回传事件。

4) 数据绑定与指令

• 单向绑定：Mustache（{{ }}）；双向绑定：v-model。
• 常用指令：v-if、v-show、v-for、v-model、v-bind、v-on（含 @click 速记）。
• 课堂以按钮点击为例，演示 v-on 事件与处理函数。

5) 数据格式：JSON

• 为什么用 JSON：轻量、JS 友好、可作为 props 赋值以实现动态渲染，多数 API 返回 JSON。
• 课堂讨论了在 MV* 模型与虚拟 DOM 背景下，如何以 API（JSON）与前端交互。

6) Lambda/箭头函数

• 定义与用途：箭头函数常用于事件处理器与 computed 计算逻辑。
• 课堂举例以数组运算（如 map/filter）构造 computed 结果，串联响应式数据。

7) 课程安排与评估提醒

• eFolio 任务用于形成性反馈，不计总评；作业将于当天晚些时候发布，第一部分在第3周末截止（人物画像与选题结构）。
• 下周聚焦 CSS/样式，随后涉及安全主题。