《Vue企业开发实战》电子教案17-组件概念与复用

《网站开发技术（VUE）》·教案17第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目7组件详解授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目7的任务1。理解组件复用价值，能按页面模块拆分并注册公共组件，为props、通信和slot打基础。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1组件概念与复用为什么使用组件；重复布局的痛点；组件拆分与复用；在大觅页面中识别可抽模块教材7.1三、学情分析学生已能用指令写出带列表和表单的页面，但标题栏、卡片等仍整段复制。改一处要改多处。本课要求能说出为何拆组件，并能抽出一个可复用块挂到页面上。四、教学目标（一）知识目标1.理解组件是可复用的独立界面单元。2.能说明复制粘贴布局在需求变化时的成本。3.掌握在工程中新建、注册并使用组件的基本步骤。（二）能力目标1.能从大觅页面中标出可抽取模块。2.能新建组件文件并在父页面中引入使用至少两次。3.能保证复用后两处显示一致、修改一处即可更新。（三）素质目标1.培养复用共享和团队协作意识。2.遵守单向数据流，不在子组件里擅自改props。3.养成规范操作、爱护设备的习惯。五、教学重点与难点类型内容突破办法重点识别可复用模块并完成抽取用标题栏或票务卡片做前后对照难点拆分边界划在哪先问“会不会在别的页再出现”，再动手拆六、教学方法与准备方法：痛点导入、对比演示、理实一体。导入用“三处标题栏改文案要改三次”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示页面里复制了三遍的标题栏。改一处文字，其余两处仍旧。提问：需求一变要改几处？引出组件。指出自己页面里重复的块。用维护成本定义本课问题。明确学习目标出示目标：能拆、能复用、改一处全更新。对照目标勾画。用可观察的“改一处”当达标。任务1概念与抽取讲组件解决重复编码、协作分工。演示新建.vue、import、在模板中使用两次。对照大觅首页/详情哪些块适合抽。列出本项目可抽清单。跟做一次抽取。先识别再抽取，避免为拆而拆。上机练习抽出标题栏或卡片组件，在两个位置使用；修改组件内文案或样式，两处同时变化。独立完成复用验证。把复用价值变成可见结果。小结与作业回扣：组件是拼图。预告父向子传数据要用props。保存组件。下一步解决“同一组件不同文案”。课堂检测：①为什么要把标题栏抽成组件？②复用的基本步骤有哪些？③改子组件后父页面为何会一起变？八、上机任务与评价练习任务要求合格标准常见问题上机1抽取一个公共组件并在两处使用两处外观一致，改一处全更新未引入、标签名写错、仍复制粘贴过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述使用组件的原因。2.列出大觅中至少三个可抽取组件及出现页面。书面作业：画出本课所抽组件与父页面的关系；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________