9：Vue的学习

难度系数：简单

前面我们完成了 第一题 纯 HTML 静态展览馆、第三题 CSS 美化展示墙，页面全部是写死的固定内容。现在学习 Vue 基础框架，改造我们之前做的线上主题展览馆，实现页面数据动态更新，是 Vue 最基础的入门实战。

只需要掌握 Vue 基础语法即可完成本题，不需要复杂组件、接口、绘图逻辑，零基础入门友好。

你 第一题 完成的线上主题展览馆现在存在一个问题：所有文字、图片、展厅分类都是静态写死的，如果想要新增展品、修改介绍、切换展示内容，必须手动修改 HTML 代码，非常麻烦。

现在使用 Vue3 搭建简易页面，复用你 第一题、第三题 写好的展览馆素材与主题，做一个动态展览馆管理面板，通过 Vue 管理展厅所有数据。

可以重新选择展览馆主题及展览内容

基础任务

1. 搭建 Vue 页面

   • Vite 创建空白 Vue 项目（基础工程化）
   • 设置页面标题,即展览馆主题名称。
   • 拆分第一题页面为独立 Vue 组件：将展示墙、展品列表、输入面板（任务3）拆分为 .vue 子组件，实现简单组件复用

2. 复用旧项目资源，数据驱动渲染展厅内容

   • 将 第一题 展厅里的全部内容改造为 Vue 数据驱动模式，分两步完成：

     • Step 1：把数据搬到 JS 里（抽离）
     • Step 2：HTML 里用 Vue 语法渲染（数据驱动）

   • 注意： 如果图片无法显示，请检查 v-bind 绑定的图片路径是否正确（注意相对路径与绝对路径的区别）。

   • 要求： 修改 JS 数据中的任意内容，页面自动同步更新，无需改动 HTML 结构。

3. 双向绑定交互面板

   • 在页面顶部增加简易操作区，使用 v-model 实现双向绑定输入框，实现功能：
     • 输入框修改展厅名称，页面主标题实时同步变化；
     • 输入框新增展品名称，点击按钮添加到展品列表（push 数组）；
     • 每个展品右侧增加删除按钮，点击删除对应展品（splice 数组）。

4. 融合 第三题 展示墙样式

   • 复制你 第三题 写的 5×5 展示墙 CSS 样式到当前 Vue 页面，使用 v-for 动态生成展示格子，中心格子固定渲染你的工作室标识，不再手写 25 个固定 div。
   • 提示： 可直接将 第三题 中定义 .grid-container 等类名的样式复制到 <style> 中，保持 HTML 结构不变，将 v-for 渲染的 <div> 应用该类即可。

进阶任务（选做）

• 使用 v-show 控制展示墙显示 / 隐藏，增加切换按钮；
• 使用 computed 计算属性，统计当前展品总数量、热门展品数量并展示；

• Vue 插值语法 {{ }} 的使用场景与限制是什么？
• v-bind、v-model、v-for、v-if 四个核心指令分别有什么作用？
• 响应式数据 ref / reactive 有什么区别？修改数组数据页面为什么会自动更新？
• 如何在 Vue 中复用之前写好的 CSS 样式？
• Vue3 官方快速上手教程
• 菜鸟教程 Vue 教程
• B 站 Vue3 零基础入门视频教程

提交内容：完整 Vue 代码文件 / 项目压缩包，附带说明文字，标注你复用的 第一题 展览馆主题、第三题 展示墙样式。

提交点这里

出题人：  Xx

QQ：2191131478

邮箱：2191131478@qq.com