Vue 3前端框架应用项目教程（微课版）教案1

教案课程名称Vue前端框架设计学时2序号1授课班级日期任课教师课题第一次课+任务1：认识Vue实例学习目标1.能够说出Vue的优势；2.能够从官网上下载Vue并正确引入本地Vue库文件；3.能够下载和安装Vscode开发工具，并使用安装各种插件；4.通过对Vue框架的认识以及对其发展的了解，引导学生确立竞争意识,激发学生的爱国情怀和民族自豪感。学习内容1、Vue是什么？2、Vue的发展时间线；3、Vue的特点；4.Vue的组件化。学习重难点重点：1、Vue是什么；2、Vue的特点；3.Vue的组件化；难点：1、对vue的认识以及对vue特点的体会。项目/任务子任务1：编写“HelloWorld”程序—初实Vue教学资源准备课件、PPT、在线课程、教案

教案教学过程步骤教师活动学生活动时间1第一次课：（1）引入课程（2）课程定位（3）学习内容（4）课堂要求（5）考核方式对本门课程有一个整体的了解和认识15分钟2提出问题：Web前端生态体系有哪些技术？我们已经学习了哪些技术？通过网络查找web前端主流技术，并结合之前学习的课程，画出web前端生态体系思维导图5分钟3对学生总结的Web前端生态体系进行总结，并引出其中一个必备技能—Vue前端框架技术。提出任务：初实Vue认真听教师的总结，完善自己的思维导图10分钟4任务讲解：Vue概述（1）什么是Vue（2）前端开发中为何需要框架？提问：你了解的主流前端框架有哪些？思政：通过分析国内Vue技术应用案例，了解我国前端框架应用及研发的发展现状，增强技术自信与民族自豪感，培养自主创新意识。（1）了解Vue的概念，掌握Vue是一种基于js的前端开发框架（2）思考主流前端框架有哪些，并做出回答15分钟5任务讲解：（1）Vue的优势（2）对比Vue与React、Angular的技术差异，结合企业招聘需求说明Vue的应用场景；记录Vue的核心优势与框架差异，明确Vue的技术定位；15分钟6任务讲解：Vue的发展历程（1）了解Vue的发展历程；（2）理解Vue的企业应用价值10分钟7任务讲解：Vue组件化（1）什么是组件化（2）组件化的好处（1）理解什么是组件化，组件化有哪些好处；（2）如何理解Vue的组件化。15分钟8归纳总结：（1）Vue的概念（2）Vue的特点（3）Vue组件化的好处学生参与智慧职教上的讨论贴，并利用思维导图的方式总结本节课所学知识点。5分钟教学反思通过逐步提出新的需求，有助于学生复习前序课程—HTML、CSS和JavaScript，并通过JavaScript技术和Vue框架实现方法的对比，帮助学生体会Vue的优势，也让学生体会到前端技术发展的迅猛，要在行业里生存，自主学习的能力必不可少。

教案课程名称Vue前端框架设计学时2序号2授课班级日期任课教师课题任务1：认识Vue实例学习目标1.熟悉VisualStudioCode编辑器的使用；2.掌握Vue的引入方法；3.能够编写最简单的Vue代码；4.能够通过Vue官方文档、技术社区等渠道获取学习资源，培养学生独立排查并解决学习过程中遇到的基础技术问题，养成良好的技术学习习惯。学习内容1、Vscode开发工具的使用2、Vue核心文件的引入3、编写第一个vue程序学习重难点重点：1、Vscode开发工具的使用2、Vue核心文件的引入3、编写第一个vue程序难点：1、对vue的认识以及对vue特点的体会项目/任务子任务1：编写“HelloWorld”程序-开发环境与代码编写教学资源准备课件、PPT、在线课程、教案

教案教学过程步骤教师活动学生活动时间1提出需求：如果给出的数据发生改变，页面上展示的信息怎么跟着一起改变。教师总结学生的解决方案，提出缺陷，提出Vue可以给出更优的解决办法，从而减少DOM的频繁调用。提出任务：编写“HelloWorld”程序（1）学生分组讨论，给出解决方案：使用JavaScript技术操纵DOM，重新赋新值（2）学生聆听，并记录课程任务，探索任务完成所需得知识点和技能点。10分钟2操作演示：（1）VisualStudioCode编辑器的安装（2）VSCode的基本操作动手实操：（1）安装VSCode（2）掌握VSCode的基本操作（3）能够安装常用插件20分钟3讲解：VSCode的常用插件动手实操：在VSCode中安装相关插件，并了解各插件的用途15分钟4讲解：Vue的引入方式（1）直接CDN引入（2）下载到本地引入

（3）NPM安装动手实操：能够通过不同的方式引入Vue,并了解各引入方式的特点10分钟5任务实施：编写“HelloWorld”程序（1）页面结构分析（2）模板部分（3）js部分（3）CSS部分教师巡视，解答学生的问题动手实操：（1）新建页面（2）引入Vue（3）创建Vue实例（4）定义数据

（5）将Vue实例与DOM关联

（6）运行浏览结果20分钟6教师针对学生的共性问题进行讲解记录教师讲解的问题，对照自己的代码进行修改、完善。10分钟7课程内容总结1、认识Vue前端框架，了解其发展历史。2、Vscode开发工具的安装，以及相应插件的下载并安装。3、在html页面中引入vue核心文件。4、初步认识vue实例，并完成第一个vue程序。学生参与智慧职教上的讨论贴，并利用思维