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

《网站开发技术（VUE）》·教案15

第PAGE页

一、基本信息

课程名称

网站开发技术（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看错乱，再补上

难点