《Vue企业开发实战》电子教案21-计算属性

《网站开发技术（VUE）》·教案21第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目8计算属性和侦听器授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目8的任务1。理解computed的含义、用法与缓存，能把模板中的拼接、过滤、合计抽到计算属性。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1计算属性什么是计算属性；computed用法；缓存特点；与模板内表达式、普通方法的差别教材8.1.1–8.1.3三、学情分析学生已能在模板里写插值和简单表达式，但合计、反转字符串、过滤列表仍堆在模板或重复计算。本课要求会写computed，能说明它有缓存。四、教学目标（一）知识目标1.理解计算属性用于派生展示数据。2.掌握computed的基本写法。3.理解计算属性缓存：依赖不变不重新算。（二）能力目标1.能把模板中的拼接或过滤改成computed。2.能口述缓存带来的好处。3.能区分“显示用计算属性、点击用方法”。（三）素质目标1.培养可读性、可维护性优先的编码习惯。2.不在模板堆长表达式。3.规范操作。五、教学重点与难点类型内容突破办法重点computed写法与依赖改原数据看派生自动变难点缓存意味着什么对比方法每次调用都执行六、教学方法与准备方法：反转字符串案例、对比实验、理实一体。导入用模板里一长串表达式。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示把字符串反转、加前后缀全写在模板里。提问：多处要用、还要跟着数据变，怎么写才干净？引出computed。找出自己模板里的长表达式。用可读性定义本课。明确学习目标出示目标：会写computed，知道有缓存。对照目标勾画。本课先概念，购物车下节集中练。任务1讲解从需求引入computed。演示依赖变化才重算。对比methods每次渲染都跑。强调计算属性一般不写副作用。跟写reversed/filtered。观察改源数据。用实验看见缓存。上机练习把至少两处派生数据改成computed（拼接、过滤或格式化价格）。页面正确且源数据变化时自动更新。先小后大，为购物车铺路。小结与作业回扣：能算出来的展示用computed。预告购物车合计。保存示例。下节用真实一点的列表练手。课堂检测：①计算属性适合做什么？②依赖没变时还会重算吗？③点击按钮该用computed还是方法？八、上机任务与评价练习任务要求合格标准常见问题上机1用computed完成字符串或列表的派生展示源数据变化后展示同步，代码不在模板堆逻辑写成方法却当属性用、依赖写错过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述什么是计算属性。2.说明计算属性缓存的含义。书面作业：列出购物车里哪些量适合做成computed；下次课直接用于上机。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_________________________________________