《Vue企业开发实战》电子教案9-组件与数据绑定

《网站开发技术（VUE）》·教案9第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目4初识Vue3授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目4的任务2。掌握实例与数据、插值表达式和生命周期，能用数据驱动视图，能说明挂载阶段可做什么。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2组件与数据绑定实例与数据；插值表达式及注意事项；生命周期（尤其挂载）教材4.2三、学情分析学生已能创建SFC，但数据如何出现在模板、何时适合发请求还不清楚。本课要求会写插值，能指出created/mounted等节点的用途。四、教学目标（一）知识目标1.掌握组件数据如何被模板使用。2.掌握插值表达式的典型用法及不能写语句等注意点。3.理解生命周期及挂载时期适合做的事。（二）能力目标1.能用插值把数据显示到页面。2.能根据生命周期图说明mounted适合加载数据。3.能做插值与生命周期的对照实验。（三）素质目标1.培养声明式思维。2.养成先看生命周期再写副作用的习惯。3.规范操作、协作排错。五、教学重点与难点类型内容突破办法重点插值与数据驱动改数据看页面自动变重点mounted加载数据对照生命周期图难点插值里能写什么用错误示例（if语句）对比六、教学方法与准备方法：实验演示、图表对照、理实一体。导入用“数据改了页面为什么自己变”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入在组件里改一个data/ref，保存后页面变化。提问：谁在更新DOM？观察热更新。用现象引出响应式与生命周期。明确学习目标出示目标：会插值、能说挂载阶段做什么。对照目标勾画。把抽象钩子变成可说的用途。任务2数据与生命周期讲实例数据、插值、表达式限制。对照生命周期图讲beforeCreate到unmounted，突出mounted发请求、updated少做重活。在图上标注“取数放哪”。跟写插值。图+实验双通道。上机练习页面用插值显示票名、价格；在mounted打印或模拟赋值。记录各钩子若console会在何时出现。完成显示与钩子观察。用日志把时间线做实。小结与作业回扣：插值展示，mounted做初始化。预告v-bind绑定class/style。保存实验。转向动态样式。课堂检测：①插值里能否写if语句？②mounted适合做什么？③数据变化后模板为何会更新？八、上机任务与评价练习任务要求合格标准常见问题上机1用插值显示至少两项数据页面与数据一致，语法正确写了语句、未return/未ref上机2在mounted中完成初始化赋值或日志挂载后可见效果，能说明时机把请求写在模板里过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述生命周期函数的实质以及挂载时期可以完成的工作。2.简述插值表达式的典型用法及注意事项。书面作业：画一张本课用到的生命周期简图并标注用途；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：______________________________________