《Vue企业开发实战》电子教案22-购物车计算属性上机

《网站开发技术（VUE）》·教案22第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目8计算属性和侦听器授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目8任务1的上机训练。用计算属性实现购物车数量变化后的小计与总价，把模板逻辑抽干净。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1上机—购物车列表项小计；全车总价；数量加减与计算属性联动；对照教材效果教材8.1.4三、学情分析学生已会写简单computed，但还没在多行数据上算合计。数量加减仍可能直接改DOM。本课要求购物车总价完全由数据与计算属性得出。四、教学目标（一）知识目标1.巩固computed在列表派生中的用法。2.理解每一行小计与全车总价都可以是计算属性。3.知道数量变化只改源数据。（二）能力目标1.能实现购物车数量加减。2.能用计算属性得到小计和总价。3.能对照教材示意图验收。（三）素质目标1.培养可读性优先。2.合计逻辑不复制多份。3.规范操作。五、教学重点与难点类型内容突破办法重点总价用computed加减只改count，总价自动变难点行内小计与全车合计的依赖先写清依赖哪些字段六、教学方法与准备方法：案例上机、个别辅导、理实一体。导入用购物车截图。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示购物车：改数量、总价跟着变。提问：总价写在点击函数里好不好？打开上次列的computed清单。把理论接到完整页面。明确学习目标出示目标：加减只改数据，总价由computed出。对照目标勾画。用总价正确当达标。要点回顾与演示快速带过行小计、总价、空车提示可结合v-if。演示一处错误：在方法里累加却忘记改数量时不同步。指出依赖字段。用反例强化计算属性。上机练习按教材完成购物车。巡视：总价写在模板长表达式、用index乱改、未用computed。独立完成并对着示意图自检。项目8的主要技能证据。小结与作业回扣：显示用computed。预告“数量变化后要请求库存”这类事才用侦听器。保存购物车。转向副作用。课堂检测：①数量加减应改什么？②总价为什么不适合只写在点击函数里？③空车提示可以用什么指令配合？八、上机任务与评价练习任务要求合格标准常见问题上机1实现购物车加减与行小计数量变化行金额正确改了DOM、未改源数据上机2用computed计算总价并展示总价与各行一致，逻辑在computed中模板内重复求和、漏依赖过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.把购物车中所有派生量列成一张表（名称、依赖、是否computed）。2.思考：库存要从接口刷新时，还适合只用computed吗？书面作业：用三句话说明购物车为何用计算属性；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：__________________________________________