《Vue.js3前端开发基础及项目化应用教案单元3组件基础_教学设计.docx》由会员分享，可在线阅读，更多相关《Vue.js3前端开发基础及项目化应用教案单元3组件基础_教学设计.docx（13页珍藏版）》请在三一办公上搜索。
1、Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前开发基础及项化应用授课年级：授课学期：学年第一学期一教师找名：2023年09月09日课题名称单元3组件基础计划学时6学时内容分析组件是Vue最强大的功能之一。组件是Vue应用程序的基本结构单元，它可以扩展HTML元素，封装可重用的代码，提高代码的可复用性，使项目变得更易维护和管理。本单元将介绍组件的定义和注册，以及组件间数据传递、组件事件和动态组件的实现，并结合“自定义页面图标样式”项目对组件基础知识进行巩固。教学目标及基本要求1 .理解组件的概念2 .掌握组件定义方法和注册方法3 .能够实现组件间数据传递教学重点1.掌握组件定
2、义方法和注册方法2.能够实现组件间数据传递教学难点能够实现组件间数据传递教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时（组件的构成、组件定义、组件注册）一、创设情境，引入VUe组件概念1 .教师通过应用场景描述，引出组件化开发思想当个网站的导航菜单会在多个页面中II；现，若将导航菜单封装成组件，则可在网站的不同页面中重复使用该组件，要有效提高开发效率。因此，将个网页应用拆分为多个小的功能块（组件），每个功能块负责实现对应的功能，并被以组件形式封装起来，在不同页面可重复使用，从而使得页面的管理和维护变得更加容易。2 .明确学习目标。 了解组件化开发思想 了解VUe组件构
3、成及其工作原理掌握组件的定义方法掌握组件的局部注册和全局注册方法二、进行重点知识的讲解1.教师根据课件，介绍VUe组件的构成，并使用代码进行演示。（1） VUe应用程序由一个或多个组件构成。（2） VUe组件的构成。TemplateScript和Style（3）组件实现网页布局的工作过程。（4）Template的用法。2 .教师根据课件，讲解VUe组件的使用流程。（1）组件定义：利用JavaScript创建组件对象。（2）组件注册：按照使用范围，对组件进行全局或局部注册，并给它起一个组件注册名。（3）组件调用：以组件注册名为元素名，在HTML页面中调用该组件。3 .教师根据课件，介绍组件的定义
4、方法，并使用代码进行演示。（1）组件的声明语法:（/演染类选项template:,声明模板结构，必选项/*，*数据类选项*/data（）（return（.）,声明并初始化峋应式数据methods:,/声明处理业务逻辑的函数computed:（）,/声明计算属性watchHJ,/声明数据监听器/其他/name:,声明组件的名字components:11,/注册子组件生命周期类选项*/created（）（,.生命周期钩子函数（2）使用案例讲解组件定义的具体过程。4 .教师根据课件，介绍组件的注册方法，并使用代码进行演示。（1）全局注册语法Vue应用实例.ComponentC组件注册名;组件对象）（
5、2）使用案例讲解全局注册的具体过程。（3）局部注册语法ComPonents:注册名组件对象）（4）使用案例讲解局部注册的具体过程。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括组件化开发思想，VUe组件的构成，TemPEe的用法，组件的使用流程，组件的定义方法，以及全局注册和局部注册的方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时（组件间数据传递，PrOPs属性的使用，PrOPS属性的验证）一
6、、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了组件化开发思想、VUe组件的构成、Template的用法、组件的使用流程、组件的定义方法，以及组件注册的方法。接下来，本节课将介绍父子组件间的数据传递，PrOPS属性的应用和验证方法。3.明确学习目标。 了解组件间数据传递的方式 掌握props属性的使用方法 掌握props属性的验证方法 掌握父子组件间数据传递的实现方法二、进行重点知识的讲解1 .教师根据课件，介绍组件间通信方式。VUe中常用的组件间数据传递方式是父组件传值给子组件，它是利用组
7、件props选项定义的属性来实现的。2 .教师根据课件，介绍ProPS属性的使用方法，并使用代码进行演示。（1）props的语法。PrOPs:嘱性名；.r属性名（2）使用案例讲解props属性实现父子组件间数据传递。3 .教师根据课件，介绍PrOPS属性的验证，并使用代码进行演示。（1）验证的作用和方式作用类似于函数中检查参数类型是否正确。常用验证方式有数据类型验证、必填值验证、默认值设置和自定义验证函数。（2）数据类型验证的语法和应用props:PrOPA:NUmber指定propA的数据类型为Number（3）必填值验证的语法和应用props:propC:type:String,/type
8、选项用于指定数据类型required:true/required选项用于将属性设置为必须有值且其数据类型为type选项指定的数据类型）（4）默认值设置的语法和应用props:propD:type:Number,default:100/default选项用于指定默认值（5）自定义验证函数的语法和应用props:propF:VaIidatOr（VaIUe）验证函数，要求propF属性的值必须在0100之间returnvalue=0&value 了解组件事件概念 掌握组件事件的监听与处理方法 掌握利用组件事件实现子向父传值的方法 掌握组件事件的验证方法 掌握自定义组件中双向数据绑定的实现二、进行重点
9、知识的讲解1 .教师根据课件，介绍组件事件概念。Vue的组件事件可以由开发者来设计事件触发条件，因此也被称为自定义事件。组件事件用于实现了组件向父组件传递数据。2 .教师根据课件，介绍组件监听处理的流程，并使用代码进行演示。（1）声明和触发自定义事件。在子组件中，使用emits选项声明自定义事件；调用组件实例内置函数$6e3并以事件名称、要传递的数据为参数，触发自定义事件并传递数据给父组件。（2）监听自定义事件父组件调用子组件时，在子组件元素中使用v-on指令（指令）监听自定义事件。（3）使用案例讲解组件监听和处理的具体过程。emits选项的语法为:emits:事件名；.,事件名functio
10、n（）.）,.）$cmit语法为：$em*事件名参数名）3 .教师根据课件，介绍组件事件的验证处理，并使用代码进行演示。（1）验证方法。使用emits选项对组件自定义事件加以验证。（2）使用案例讲解组件事件验证的具体过程。4 .教师根据课件，介绍自定义组件中实现双向数据绑定的方法，并使用代码进行演示（1） v-model实现双向数据绑定的原理（2）使用案例讲解在自定义组件中使用v-model指令，结合自定义事件以及props选项，实现双向数据传递。三、归纳总结，布置课后作业教师带领学生总结本行课需要熟悉的知识点,包括组件事件的监听和处理流程，emits和$口让结合实现组件监听和处理的方法，使用
11、emits选项实现组件事件验证的方法，以及自定义组件中实现双向数据绑定的方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（组件插槽、动态组件）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了组件事件的监听与处理，组件事件的验证，以及在自定义组件中实现双向数据绑定的方法。接下来，本节课将介绍插槽概念、组件插槽的应用和动态组件的应用。3 .明确学习目标。 了解插槽概念
12、了解默认、具名和作用域三种插槽 掌握三种插槽的使用方法 掌握动态组件的应用二、进行重点知识的讲解1 .教师根据课件，介绍插槽概念。所谓插槽可理解成一个可以插入的槽口，其作用与电源插座的插口相类似。2 .教师根据课件，介绍组件插槽分类及各自的用法，并使用代码进行演示。（1）组件插槽的分类。默认、具名和作用域。（2）使用案例讲解默认插槽的使用方法语法：插槽默认内容父组件内容（3）使用案例讲解具名插槽的使用方法语法：slotname=，插懵名，插槽默认内容父组件内容（4）使用案例讲解作用域插槽的使用方法语法：对象名”（对象名.属性名“3.教师根据课件，介绍动态组件的用法，并使用代码进行演示。（1）动
13、态组件概念是指VUe应用程序运行过程中,在同一元素内需要动态切换不同组件。（2）动态组件的应用利用内置组件ComPOnent实现动态组件的定义。语法VComPOnent:is=组件名（3）使用案例讲解动态组件的应用三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括插槽概念，默认、具名和作用域三种组件插槽的使用方法，动态组件的定义和应用。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第五课时（组件在项目中的实际应
14、用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了插槽概念、组件插槽的应用和动态组件的应用。接下来，本节课将通过实际应用项目，讲解组件基本用法、组件间数据传递以及组件插槽的综合应用，帮助学习者进步理解组件化开发思想，掌握组件定义、注册和使用的方法。3 .明确学习目标。理解组件化开发思想 掌握组件的定义、注册和使用方法 掌握组件间数据传递的实现方法 掌握组件插槽的使用方法二、进行重点知识的讲解1.教师根据课件，介绍项目3一“自定义页面图标样式”项目的需求描述、实现思路和代码实现。（1）需求
15、描述历史名城游网站页面布局中有多处需使用字体图标要求字体图标形状相同，但在不同页面中可能会调整其颜色或大小。（2）实现思路/页面布局分为上下两个div区域，上面的div区域包括标题“赏析”和“更多分类+“，下面的div区域使用Ii元素实现两个作品的展示。,引入第三方RemixIcon开源图标库。采用组件对字体图标样式设置进行封装，实现字体图标及其样式的按需设置。通过props选项来接收使用者的图标样式、字体类型和字体大小参数；在模板结构中，声明插槽用于填充不同布局所需要的字体图标，使用v-bind指令（:指令）将图标样式、字体类型和字体大小参数与props选项中的属性进行绑定。/在根组件中调用
16、字体图标组件，并传入所需的图标样式、字体类型和字体大小参数。（3）功能实现任务3/构建页面布局任务32实现自定义图标样式三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括组件基本用法、组件间数据传递以及组件插槽的用法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的学握程明对学生出现的问题进行解决。3.使用在线学习平台下发课后作业。.第六课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：请编写一个自定义页面文字样式组件，并将其应用在页面的标题和文字上。形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和见教材单元3配套的习题习题教学后记
