Vue.js3前端开发基础及项目化应用教案单元4组件进阶_教学设计.docx

Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前端开发基础及项©化应用授课年级：校课学期:学年笫一学期一教师拙名：2023年09月09日课题名称单元4组件进阶计划学时4学时内容分析有了基本的组件知识后，我们可以更深入地了解组件。在VUe应用程序运行过程中，每个VUe组件都会经历创建、挂载、更新和销毁4个阶段。本单元将介绍组件的生命周期及其钩子函数、内置组件Teleport的高级功能。同时结合“弹出式登录框“项目，帮助学习者对组件知识有更深入的了解和掌握。教学目标及基本要求1 .理解组件的生命周期2 .能够使用生命周期钩子函数3 .能够结合Teleport实现模态框功能教学重点1 .能够使用生命周期钩子函数2 .能够结合Teleport实现模态框功能教学难点教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时（组件的生命周期）一、创设情境，引入组件生命周期概念1 .教师通过应用场景描述，引出组件生命周期在Vue应用程序中，每个组件从创建到渲染完成都会经历一系列过程，组件从创建、挂载、更新到销毁的一系列过程被称为组件的生命周期2.明确学习目标。> 了解组件生命周期> 了解组件生命周期各阶段的钩子函数> 掌握钩子函数的使用方法二、进行重点知识的讲解1.教师根据课件，介绍VUe组件的生命周期，并使用代码进行演示。（1）生命周期及其各阶段钩子函数。（2）创建阶段的钩子函数。bcforeCreate和created（3）挂载阶段的钩子函数。beforeMount和mounted（4）更新阶段。beforeUpdate和updated（5）销毁阶段。beforeUnmount和unmounted（6）使用案例讲解实例的创建、挂载、更新和销毁过程，以及各阶段对应的组件的状态。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括组件生命周期，生命周期各阶段钩子函数的执行过程，以及组件的状态。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时（Teleport组件）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了组件生命周期，生命周期各阶段钩子函数的执行过程，以及组件的状态。接下来，本节课将介绍TelePort组件的使用方法和具体应用。3 .明确学习目标。> 了解TelePOrt组件的基本用法> 掌握Teleport组件实现模态框的方法> 掌握Teleport结合组件的使用方法二、进行重点知识的讲解1.教师根据课件，介绍TelePOrt组件的基本语法。（1）Teleport作用将组件模板结构的部分内容“传送”到该组件渲染区域之外的地方，而不受当前组件布局结构的影响。（2）使用方法在组件模板结构中，增加teleport组件元素，将要控制位置的页面元素作为其子元素，同时设置其属性to为目标位置（3）语法规则<teleportto=CSS选择器字符串IHTML元素对象><teIePort>2 .教师根据课件，通过与传统CSS比较的方式，讲解TeIePOn组件实现模态框的具体方法，并使用代码进行演示。（1）使用案例演示CSS实现模型框的方法。（2）使用案例讲解Teleport实现模型框的方法。3 .教师根据课件，介绍TeIePOrt与组件结合使用的方法，并使用代码进行演j<,使用将模态框（加粗字体部分）封装成组件的案例来讲解Teleport如何与组件结合使用。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要/解TeIePOrt组件的作用、使用方法，定现模态框具体过程，与组件结合使用的方法和具体应用。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（Teleport组件在项目中的实际应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了TeICPOrt组件的使用方法和具体应用。接下来，本节课将通过实际应用项目，讲解TeIePort组件基本应用，与组件结合使用的应用，帮助学习者进一步掌握TelePOrt组件的使用方法。3 .明确学习目标。> 理解组件化开发思想> 掌握Teleport使用方法> 掌握Teleport与组件结合使用的方法> 掌握组件间传递数据的方法二、进行重点知识的讲解> .教师根据课件，介绍项目4一一“自定义页面图标样式”项目的需求描述、实现思路和代码实现。（1）需求描述在历史名城网站页面右上角显示“注册I登录”，单击“登录”，弹出登录框，它将保持在页面的最上层位置。该登录框包括用户名和密码输入框，以及“登录”和“取消”按钮，单击“登录”或“取消”按钮时登录框窗体关闭。（2）实现思路/使用表单（form）元素构建用户登录窗体。/参考例4-6中模态框组件的实现方法，将用户登录窗体封装成个模态框组件，通过props选项实现使用者控制登录框的弹出和关闭的功能，同时利用Teleport组件优化登录框的全屏渲染效果。（3）功能实现任务4-1构建页面布局任务4-2创建登录框组件三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括组件化开发思想，TeIePOrl基本用法，与组件结合使用的方法，组件间数据传递的方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：请编写Vuc应用程序，要求单击页面上、我要注册”按钮，弹出注册框，该注册框包含4个输入框（用户名、密码、邮箱和手机号码）和两个按钮（“注册”和“取消”），单击“注册”按钮时关闭注册框，单击“取消”按钮时清空所有输入信息。形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和习题见教材单元4配套的习题教学后记