《网页设计与 Web 前端开发》教案 第16周 Vue框架（8.3、8.4节8.5节的后半部分）

《网页设计与Web前端开发》电子教案（第16周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第8章Vue框架（8.3、8.4节，8.5节的后半部分）二、教学目标（一）知识目标了解组件通信的基础原理（父组件向子组件传递数据的机制）。掌握生命周期函数在实际开发中的典型应用（如mounted初始化数据、beforeUnmount清理资源）。熟悉Vue项目改造的完整流程：资源引入→数据建模→组件化重构→事件交互实现。理解“数据驱动”思想在项目改造中的体现（用数据变化替代DOM操作）。（二）思政目标通过组件化改造过程，培养“模块化思维”和“代码复用”意识，理解工程化开发的效率价值。在事件交互实现中，体会“用户为中心”的设计理念，关注操作细节（如阻止默认跳转提升体验）。通过对比改造前后的代码，树立“迭代优化”的职业态度，认识到优质代码需要持续打磨。三、教学重难点（一）教学重点父组件向子组件传递数据（props的声明与使用）。生命周期函数的实际应用（mounted初始化、beforeUnmount资源清理）。项目改造的核心步骤：数据抽取→组件化重构→事件绑定→样式动态控制。（二）教学难点props数据的正确传递与类型匹配（如区分字符串与数值）。生命周期函数的执行时机（如避免在updated中修改响应式数据导致无限循环）。项目改造中数据结构与DOM结构的映射关系（如何将HTML元素属性转化为JS对象属性）。四、教学方法讲授法：系统讲解组件通信、生命周期应用及项目改造逻辑。案例演示法：结合教材8.5节后半部分改造实例，实时演示代码效果，对比改造前后的代码差异。对比分析法：对比props传递与直接访问父组件数据的优劣、生命周期函数在不同场景的适用性。任务驱动法：实践课通过“华为商城商品列表改造”任务，综合应用组件通信、生命周期和事件处理。五、教学过程（一）第一学时：组件通信与生命周期应用（40分钟）导入（5分钟）展示8.5节改造前的手机商品列表静态代码（重复的<li>标签），提问：“如果需要新增商品，是否要逐个修改HTML？”引出数据驱动改造的必要性。简要介绍本节课内容：组件通信基础、生命周期函数实战。组件通信基础（20分钟）核心概念：组件间作用域隔离（子组件无法直接访问父组件数据），需通过props实现父传子通信。props用法：子组件声明：在组件选项中用props数组声明接收的属性（例8-18扩展）：父组件传递：使用子组件时通过属性绑定传递数据（结合v-for循环）：注意事项：props是只读的，子组件不能直接修改（需通过事件通知父组件修改）。生命周期函数实战（10分钟）mounted场景：在组件挂载后加载数据（模拟从服务器请求）：beforeUnmount场景：组件卸载前清理定时器或事件监听：小结（5分钟）回顾props通信流程和生命周期函数的核心作用。布置思考题：“为什么子组件不能直接修改props数据？”（二）第二学时：8.5节项目改造详解（40分钟）复习导入（5分钟）抽查学生对props的掌握：“如何向子组件传递商品价格并显示？”引出本节课内容：8.5节商品列表改造的完整步骤。项目改造步骤（30分钟）步骤1：资源引入与实例挂载引入Vue和数据文件（8.5.3节代码）：创建实例并挂载到根元素：步骤2：分类导航改造（事件绑定）用v-for渲染导航项，通过@click.prevent实现点击切换：动态样式：通过hotIndex控制选中状态（添加selected类）。步骤3：商品列表改造（条件与样式绑定）用v-for循环商品，结合v-if控制标签显示（仅id>1的商品显示名称和价格）：动态样式：通过getStyle方法添加每行第一个商品的no-m类：改造价值分析（5分钟）代码量：改造后HTML代码减少60%，新增商品仅需修改GoodsData。可维护性：数据与视图分离，修改样式或逻辑无需逐个调整DOM。（三）实践学时：商品列表改造实战（40分钟）任务布置（5分钟）目标：基于8.5节素材，完成以下改造：定义SeriesNav（分类导航）和GoodsItem（商品项）子组件，用props传递数据。实现导航点击切换商品列表（模拟过滤数据）。在mounted中加载数据，在beforeUnmount中清理定时器（若有）。学生实践（30分钟）教师巡回指导，重点解决：props传递时的数据类型错误（如将字符串id误传为数值）。v-for中遗漏key导致的渲染异常。事件修饰符prevent的正确使用（阻止<a