《Vue企业开发实战》电子教案10-class与style绑定

《网站开发技术（VUE）》·教案10第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目4初识Vue3授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目4的任务3。掌握v-bind及class、style的对象/数组写法，能完成动态样式绑定。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3class与style绑定v-bind；class对象语法与数组语法；内联style绑定教材4.3三、学情分析学生已会插值，但改外观仍去改css文件或写死class。本课要求能根据数据切换高亮、颜色，理解:class是v-bind:class的简写。四、教学目标（一）知识目标1.掌握v-bind的作用与简写。2.掌握class的对象语法、数组语法。3.掌握style对象绑定。（二）能力目标1.能按条件为元素添加/移除class。2.能绑定内联样式对象。3.能完成动态样式小练习（如选中高亮）。（三）素质目标1.培养对数据驱动样式的严谨态度。2.规范命名class。3.协作排错。五、教学重点与难点类型内容突破办法重点:class对象语法true/false当场切换高亮难点对象语法与数组语法混用先拆开写，再合并六、教学方法与准备方法：对照静态class、条件演示、理实一体。导入用“哪张票被选中就要高亮”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示选座或列表：选中项应换样式。提问：能否不手写两个class名来回改DOM？引出v-bind。回忆购票选中态。用项目UI需求定义本课。明确学习目标出示目标：会:class、会:style，能做选中高亮。对照目标勾画。用可见高亮当达标。任务3绑定写法讲v-bind与:。class对象、数组；style对象。强调class名用连字符时的引号。跟写三种写法。语法一次给全，避免下次再补窟窿。上机练习列表或按钮根据数据切换active；再绑定一个style颜色。点击/改数据后面貌变化。把指令接到可演示的选中态。小结与作业回扣：样式也是数据。预告项目5用Mock和Axios取真实一些的数据。保存页面。结束初识Vue3，转入通信。课堂检测：①:class对象语法如何根据布尔值开关类名？②绑定style为何常用对象而不是字符串？③v-bind可以省略成什么？八、上机任务与评价练习任务要求合格标准常见问题上机1用:class实现选中高亮选中项class正确切换写死class、对象键名写错上机2用:style绑定至少一种样式颜色或字号随数据变化写成style字符串且无法响应过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.默写:class对象语法和数组语法各一例。2.说明v-bind的作用。书面作业：为大觅列表项设计一个选中态的class绑定方案；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________