Vue.js3前端开发基础及项目化应用教案单元1Vue.js3入门基础_教学设计.docx

Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前/开发奏础及项目化应用授课年级：授课学期：学年第一学期教哪找名：2023年09月09日课题名称单元1Vuejs3入门基础计划学时2学时内容分析Vuejs是近几年比较流行的前端框架之一。它用于构建交互式Web应用界面，提供了基于MVVM模式的数据绑定和可组合的组件系统，具有简单灵活的特性。本单元将介绍本单元将介绍前端开发模式演变的三个阶段、VueJs的基本概念和主要特性，以及VueJs应用相关的工具。通过“历史名城简介页面”任务，来让学习者体验Vue应用程序的构建、运行和调试过程。教学目标及基本要求1 .了解前端开发模式的演变历程2 .了解Vuejs的基本概念3 .能够安装Vuejs的开发和调试工具教学重点了解Vuejs的基本概念教学难点教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时（前端开发模式的演变历程，Vuejs特性，Vuejs相关工具）一、创设情境，引入Vuejs框架1 .教师通过应用场景描述，引出前端开发模式演变历程。Vuejs（简称Vue）是一个用于构建用户界面的JaVaSCriPt框架。随着Web项目的规模和复杂度的提升,前端开发模式经历了三个阶段的演变：模板渲染页面->AJAX前后端分离>MVVM°Vue是基于MWM模式的前端框架。2 .明确学习目标。> 了解前端开发模式演变的三个阶段> 了解MVVM模式> 了解Vue的核心思想和主要特性二、进行重点知识的讲解1.教师根据课件，介绍前端开发模式的三个阶段，以及各自特点。（1）基于模板渲染页面的开发模式基于模板渲染页面的开发模式主要是利用JSP（JavaServerPages,Java服务器页面）、PHP等技术创建页面模板，页面内容由后端计算生成，通过Web服务器将模板解析成HTML文件，经浏览器渲染后得到最终页面效果。(2)基于AJAX前后端分离的开发模式基于AJAX的开发模式使得Web应用可分为前端和后端，其中前端负责页面的布局与交互，后端负责业务逻辑的处理，前后端通过接口进行数据交互。(3)基于MVVM的开发模式MVVM(MOdel-VieW-VieWMOdeI,模型-视图-视图模型)模式是一种简化用户界面的事件驱动编程方式。2 .教师根据课件，讲解MVVM模式的基本思想。以ViewModeI(视图模型)层为枢纽，向上与View(视图)层进行双向数据绑定，向下与Model(模型)层通过接口交互数据，从而实现View和Model的自动同步。3 .教师根据课件，讲解VUe的核心思想。(1)数据驱动(2)组件化4 .教师根据课件，讲解VUe的主要特性。(1)轻量级(2)数据绑定(3)指令丰富(4)插件众多(5)组件化(6)虚拟DOM5 .教师根据课件，讲解VUe应用开发相关的工具。(1) Vue库文件(2) VueCLI(3) NodeJs、npm和webpack(4) ES6三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括前端开发模式演变的三个阶段，MVVM模式的基本思想，VUe框架的核心思想和主要特性，以及VUe应用开发相关的工具(VUe库文件、VUeCLl等)的作用。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时(VlIe应用开发的环境搭建，体验VUe应用的开发与调试)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .同顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了前端开发模式演变的三个阶段、Vuejs的基本概念和主要特性，以及Vuejs应用相关的工具。接下来，本节课将介绍Vue应用开发环境的搭建，包括开发工具安装配置、代码调试工具安装及使用方法，并结合“历史名城简介页面”任务，体验Vue应用程序的构建、运行和调试过程。3 .明确学习目标。> 了解Vue应用开发所需要的开发和调试工具> 掌握开发和调试工具的安装与使用> 熟悉Vue应用的开发、运行和调试流程二、进行重点知识的讲解1 .教师根据课件，介绍VUe应用开发所需的开发和调试工具。(1)开发工具：VSCode。(2)调试工具：DeVTOOIS和VUeDeVtOOIs。2 .教师根据课件，介绍开发工具和调试工具的安装与使用，并结合安装与使用的演示进行讲解。(1) VSCode工具的安装与使用。VSCode工具安装，扩展库安装。(2) DeVTOOlS工具的安装与使用。DevTools工具的安装以及常用面板Elements(元素)面板、Console(控制台)面板、Sources(源代码)面板和Network(网络)面板的使用方法。(3) VUeDeVtoolS工具的安装与使用。3.教师根据课件，介绍Vue应用的开发、运行和调试流程，并通过实战项目进行演示。(1)需求描述历史名城游网站需要制作一个HTML页面,用于介绍某个历史名城的基本情况。页面内容包括标题、介绍文字、点赞按钮和点赞数。(2)实现思路/使用VSCode创建一个HTML程序，引入Vue库文件，并编写相应的HTML、CSS和JaVaSCriPt代码<./使用Chrome浏览器运行该程序，并通过调试工具查看相关信息。(3)任务实施任务1-1构建Vue应用程序任务1-2运行并调试VUe应用程序三、归纳总结，布置课后作业1 .同顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的Vue应用开发环境的搭建，包括开发工具安装配置、代码调试工具安装及使用方法，熟悉VUe应用的开发、运行和调试流程。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。考题和习题见教材单元1配套的习题和同步练习教学后记