《Vue企业开发实战》电子教案14-条件渲染

《网站开发技术（VUE）》·教案14第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目6模板语法与常用指令授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目6的任务1。掌握v-if、v-else、v-show及选用，能根据登录态、库存等条件展示界面。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1条件渲染v-if；v-else；v-show；v-if与v-show的选择与区别教材6.1三、学情分析学生已能把mock数据放到页面，但“没登录显示按钮、没数据给空态”仍靠注释或两个页面。本课要求能正确选用v-if/v-show。四、教学目标（一）知识目标1.掌握v-if/v-else的条件渲染。2.掌握v-show的显示隐藏。3.能说明二者在切换频率、初始渲染上的差异。（二）能力目标1.能按条件切换登录/未登录块。2.能用v-show做高频切换的提示条。3.能解释为何空列表适合v-if。（三）素质目标1.培养对条件指令选用的严谨态度。2.避免同时滥用导致DOM混乱。3.规范操作。五、教学重点与难点类型内容突破办法重点v-if与v-show差异看元素是销毁还是display:none难点场景选用用“是否还要保留状态/是否经常切换”判断六、教学方法与准备方法：对比实验、场景选用、理实一体。导入用“未登录不能下单”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入回忆购票须登录。提问：未登录时整块下单区是不生成还是藏起来？引出两种指令。讨论哪种体验更好。用业务规则选技术。明确学习目标出示目标：两种都会写，能说选用理由。对照目标勾画。防止只会一种指令打天下。任务1条件指令演示v-if/v-else、v-show。对比切换开销与是否保留状态。给出选用口诀。完成对照表。跟写登录态示例。对比实验比背定义有效。上机练习实现登录/未登录两块；另做一条可反复开关的提示用v-show。切换数据后面貌符合预期。两种指令都要留下证据。小结与作业回扣选用口诀。预告v-for列表与key。保存页面。下一步把多条数据渲染出来。课堂检测：①v-if为false时DOM还在吗？②高频开关为何倾向v-show？③v-else必须紧跟谁？八、上机任务与评价练习任务要求合格标准常见问题上机1用v-if/v-else切换两块界面条件变化时只渲染对应块v-else未紧跟、条件写反上机2用v-show实现可反复开关的提示元素仍在DOM，仅显示隐藏误用v-if导致状态丢失过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.列出v-if与v-show的差异及选用建议。2.为大觅“未登录不能下单”写条件渲染方案。书面作业：各举一个适合v-if和v-show的大觅场景；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_________________________________________