《Vue企业开发实战》电子教案8-Vue.js是什么

《网站开发技术（VUE）》·教案8第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目4初识Vue3授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目4的任务1。认识Vue3渐进式框架、MVVM与单文件组件，区分选项式与组合式思路，为数据绑定和生命周期打基础。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1Vue.js是什么MVVM；渐进式框架与开发模式；单文件组件结构；选项式与setup/组合式的关系教材4.1三、学情分析学生已能配置路由，但多数人仍按“改DOM”思考。对.vue里template/script/style三分还停留在会打开文件。本课要求能说明MVVM，能指认SFC三部分。四、教学目标（一）知识目标1.理解MVVM中数据与视图的对应关系。2.了解Vue3作为渐进式框架的含义。3.掌握单文件组件的基本结构。（二）能力目标1.能打开.vue指出template、script、style。2.能用自己的话说明改数据驱动视图。3.能创建一个最简单的SFC并挂到路由上。（三）素质目标1.培养声明式思维和阅读官方文档的习惯。2.养成规范操作、爱护设备的习惯。3.建立不盲目堆插件的意识。五、教学重点与难点类型内容突破办法重点MVVM与声明式对比直接改innerHTML难点选项式与组合式并存说明本课先建立SFC印象，细节下次展开六、教学方法与准备方法：概念对照、拆文件观察、理实一体。导入用“点按钮改页面文字，是改DOM还是改数据”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入提问：若标题要随数据变化，用document.querySelector改和用Vue改有何不同？引出MVVM。回忆jQuery式改DOM。把思维从命令式转到声明式。明确学习目标出示目标：说清MVVM，认清SFC。对照目标勾画。降低“一次学会全部API”的焦虑。任务1概念与SFC讲MVVM。说明渐进式：可用核心再逐步加路由、生态。拆开HelloWorld.vue看三块。简介选项对象与setup。在工程里圈出三块；口述数据变化后谁更新视图。用已有文件讲新概念。上机练习新建一个简单页面组件，写入标题数据，配入路由能打开。不要求指令。创建并路由访问成功。把“认识SFC”变成可打开的一页。小结与作业回扣：改数据不改DOM。预告实例、插值、生命周期。保存组件。衔接下节数据绑定。课堂检测：①MVVM里ViewModel起什么作用？②.vue文件三部分各做什么？③渐进式意味着必须一次用全生态吗？八、上机任务与评价练习任务要求合格标准常见问题上机1新建SFC并通过路由访问，页面显示标题数据路由可打开，结构完整未写template、路由未注册过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述MVVM模式。2.说明单文件组件三部分的职责。书面作业：对照dm工程中的一个.vue，标注三部分；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_____________________________________