《Vue企业开发实战》电子教案15-列表渲染v-for

《网站开发技术（VUE）》·教案15第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目6模板语法与常用指令授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目6的任务2。掌握v-for遍历数组/对象与key，完成列表类页面训练（如网易健康页）。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2列表渲染v-for基本用法；遍历对象；遍历数组；key的作用；上机—网易健康页教材6.2三、学情分析学生已能条件显示单块内容，但多条mock数据仍复制粘贴标签。不理解key。本课要求用v-for渲染列表，并给稳定key。四、教学目标（一）知识目标1.掌握v-for遍历数组与对象。2.理解key对复用与更新的意义。3.知道没有id时如何谨慎处理。（二）能力目标1.能把数组渲染成列表项。2.能为每项设置key。3.能结合上次的mock数据完成列表页雏形。（三）素质目标1.培养对key的严谨态度。2.不使用随机数当key。3.规范操作。五、教学重点与难点类型内容突破办法重点v-for与key先不写key看错乱，再补上难点key选什么用id而非index，结合增删演示六、教学方法与准备方法：列表页案例、错误对照、理实一体。导入用健康页或票务列表截图。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示列表页。提问：20条数据是否复制20段HTML？引出v-for。看mock数组。用重复劳动引出指令。明确学习目标出示目标：列表由数组驱动，key正确。对照目标勾画。用列表页当达标。任务2v-for与key讲数组、对象遍历，item/index。演示无key增删错乱，再用id修复。说明index作key的风险。口述key的作用。跟写一条v-for。把易错点做成实验。上机练习按教材网易健康页或大觅列表，用v-for渲染，绑定key。可接mock数据。独立完成列表页雏形。项目6的核心产出之一。小结与作业回扣：数据是源，key保身份。预告事件与v-model。保存页面。下一步让列表可点、表单可填。课堂检测：①v-for的基本写法？②为什么不推荐用index当key？③遍历对象时第二个参数通常是什么？八、上机任务与评价练习任务要求合格标准常见问题上机1用v-for渲染列表并设置稳定key条数与数据一致，增删不错位忘写key、key用随机数上机2对接mock或本地数组完成健康页/票务列表雏形页面结构接近案例结构写死、未用组件数据过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.说明key的作用。2.用v-for描述大觅栏目列表的实现思路。书面作业：列出本课列表项应对应的数据字段；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：___________________________________________