Vue.js前端开发实战（第2版）-教学设计 第3章 组件基础（上）.docx

《Vue.js前端开发实战（第2版）-教学设计 第3章 组件基础（上）.docx》由会员分享，可在线阅读，更多相关《Vue.js前端开发实战（第2版）-教学设计 第3章 组件基础（上）.docx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、黑马程序员黑马程序员Vue.js前端开发实战（第2板）教学设计课程名称: 授课年级: 授课学期: 教师被名:课题名称第3章组件基础（上）计戈 课时11课时教学引入在学习完第2章的基础知识后，读者应该己经可以编与一些简单的组件了， 但是这样的组件功能比较简单，无法满足实际项目开发中各种复杂的需求。为 了能够更灵活地使用组件，读者还需要更深入地学习组件的相关知识。本书将 用第3章和第4章共两章的篇幅详细讲解组件基础，本章为上半部分内容。教学目标 使学生熟悉选项式API和组合式APL能够说出选项式API和组合式API 的区别 使学生掌握生命周期函数的使用方法，能够灵活运用生命周期函数在特定 时间执行

2、特定的操作 使学生掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成 组件的注册 使学生掌握引用组件的方法，能够在Vue项目中以标签的形式引用组件 使学生掌握组件之间样式冲突问题的解决方法，能够运用style标签的 scoped属性和深度选择器解决组件之间样式冲突的问题 使学生掌握父组件向子组件传递数据的方法，能够使用props实现数据传 递 使学生掌握子组件向父组件传递数据的方法，能够使用自定义事件实现数 据传递 使学生掌握跨级组件之间的传递数据的方法，能够使用依赖注入实现数据 共享教学重点 生命周期函数教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教 学 过 程第

3、一课时（选项式API和组合式API、生命周期函数）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课Vue 3支持选项式API和组合式API。其中，选项式API是从Vue 2开始使 用的一种写法，而Vue 3新增了组合式API的写法。在Vue中，组件的生命周 期是指每个组件从被创建到被销毁的整个过程，每个组件都有生命周期。如果 想要在某个特定的时机进行特定的处理，可以通过生命周期函数来完成。本节课将详细讲解选项式API、组合式API、生命周期函数的相关知识点。 三、新课讲解知识点1 选项式API和组合式API教师通过PPT结合实际

4、操作的方式讲解选项式API和组合式APL（1） Vue 3支持的写法。选项式API。 什么是选项式API 选项式API的语法格式组合式API。 什么是组合式API 组合式API的语法格式 使用setup语法糖时，组合式API的语法格式(2)选项式API和组合式API的关系。(3)使用组合式API开发项目的好处。(4)通过代码演示选项式API和组合式API的使用方法。知识点2.生命周期函数教师通过PPT结合实际操作的方式讲解生命周期函数。(1)什么是组件的生命周期。(2)生命周期函数的作用。(3)组合式API下的生命周期函数。(4)以onMounted。函数为例演示生命周期函数的使用。(5)通过

5、代码演示生命周期函数的使用方法。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第二课时(注册组件、引用组件、解决组件之间的样式冲突)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在Vue中，开发者可以将页面中独立的、可重用的部分封装成组件，对组 件的结构、样式和行为进行设置。组件是Vue的基本结构单元，组件之间可以 相互引用。本节课将详细讲解注册组件、引用组件、解决组件之间的样式冲突 的相关知识点。三、新课讲解知识

6、点1 注册组件教师通过PPT结合实际操作的方式讲解注册组件。(1)为什么要注册组件。(2) Vue提供了两种注册组件的方式。全局注册。 全局注册组件的使用场景 通过Vue应用实例的component。方法全局注册组件的语法 格式 注册全局组件的示例代码黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质 连续注册多个全局组件的方法局部注册。 局部注册组件的使用场景 局部注册组件的示例代码 使用setup语法糖时，注册局部组件的示例代码知识点2.引用组件教师通过PPT结合实际操作的方式讲解引用组件。(1)为什么要引用组件。(2)如何引用组件。(3)通过代码演示组件的使用方法。知识点3

7、.解决组件之间的样式冲突教师通过PPT结合实际操作的方式讲解解决组件之间的样式冲突。(1)导致组件之间样式冲突的根本原因。(2)解决组件之间样式冲突。scoped属性。 使用scoped属性解决组件之间样式冲突的原理 通过代码演示sc叩ed属性的使用方法深度选择器。 使用深度选择器解决组件之间样式冲突的原理 通过代码演示深度选择器的使用方法四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第三课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练

8、习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：注册组件、引用组件)形式：单独完成题目：完成组件的注册及引用。具体要求：(1)创建Vue 3项目。(2)创建 3 个单文件组件 ComponentUse.vue、GlobalComponent.vue LocalComponent.vue,分别表示父组件、全局组件、局部组件。(3)在 ComponentUse 组件中引用 GlobalComponent 组件和 LocalComponent 组件。第四课时(声明props、静态绑定props、动态绑定props、验证props)一、复习巩固教师通过上节课作

9、业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在实际开发中，有时会遇到同一模块中的多个子组件请求同一份数据的情 况，如果在子组件中逐个进行网络请求，会造成代码冗余。Vue提供了 props 语法，可以让父组件为子组件提供要展示的数据，即在父组件中请求该模块下 所有子组件中的网络请求，然后通过props将数据传递给子组件。本节课将详 细讲解父组件向子组件传递数据。三、新课讲解知识点1 声明props教师通过PPT结合实际操作的方式讲解声明propso(1)不使用setup语法糖声明propso 使用props选项声明对象形式props的语法格式 使用pro

10、ps选项声明字符串数组形式props的语法格式(2)使用setup语法糖声明propso 使用defineProps。函数声明对象形式props的语法格式 使用definePn)ps()函数声明字符串数组形式props的语法格式(3)在模板中输出每个prop的值。知识点2.静态绑定props教师通过PPT结合实际操作的方式讲解静态绑定propso(1)通过静态绑定props的方式为子组件传递数据的语法格式。(2)通过代码演示父组件向子组件传递数据的方法。知识点3.动态绑定props教师通过PPT结合实际操作的方式讲解动态绑定propso(1)动态绑定props的方法。(2)以父组件向子组件中传

11、递不同类型的props数据为例讲解。 字符串 数字 布尔值 数组 对象知识点4.验证props教师通过PPT结合实际操作的方式讲解验证propso(1)验证props的优点。(2)使用字符串数组形式的props的缺点。(3)对象形式的props的多种验证方案。 基础类型检查 必填项的校验 属性默认值 自定义验证函数四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第五课时(上机练习)上机练习主要针对本章中需要重点掌握的知识

12、点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：声明props、静态绑定props、动态绑定props)形式：单独完成题目：完成父组件向子组件传递数据。具体要求：(1)创建2个单文件组件Props.vue Count.vue,分别表示父组件、子组件。(2)实现在子组件中声明propso(3)实现在父组件中静态、动态绑定props为子组件传递数据。第六课时(在子组件中声明自定义事件、在子组件中触发自定义事件、在父组件中 监听自定义事件)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解

13、。二、通过直接引入的方式导入新课在Vue中，如果子组件需要向父组件传递数据，可以通过自定义事件实现。 在使用自定义事件时，需要在子组件中声明和触发自定义事件，在父组件中监 听自定义事件。本节课将详细讲解自定义事件的声明、触发和监听操作的相关 知识点。三、新课讲解知识点1在子组件中声明自定义事件教师通过PPT的方式讲解在子组件中声明自定义事件。(1)不使用setup语法糖时，通过emits选项声明自定义事件的示例代码。(2)使用setup语法糖时，通过调用defineEmits。函数声明自定义事件的示 例代码。知识点2.在子组件中触发自定义事件教师通过PPT的方式讲解在子组件中触发自定义事件。(

14、1)使用内联事件处理器来触发自定义事件当使用场景简单时，可以使用内联事件处理器，通过调用$。!1()方法触发 自定义事件，将数据传递给使用的组件(2)直接定义方法来触发自定义事件 不使用setup语法糖时，从setup。函数的第2个参数来访问到 emit。方法的示例代码 使用setup语法糖时，调用emit()函数来触发自定义事件的示例代 码知识点3.在父组件中监听自定义事件教师通过PPT结合实际操作的方式讲解在父组件中监听自定义事件。黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质(1)在父组件中监听自定义事件的方法。(2)通过代码演示子组件向父组件传递数据的方法。四、归纳总

15、结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第七课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：编程式导航)形式：单独完成题目：实现将子组件中的数据传递给父组件。具体要求：(1)创建 2 个单文件组件 CustomEvents.vue、CustomSubComponent.vue, 分别表示父组件、子组件。(2)实现在子组件中定义数据、声明和触发自定义事件

16、。(3)实现在父组件中监听自定义事件。第八课时(跨级组件之间的数据传递) 一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课通过前面的学习可知，可以通过props实现父、子组件之间的数据传递。 但是在实际的开发过程中会存在多层级嵌套的组件，形成了一颗巨大的组件树。 当某个深层级的子组件需要较远的祖先组件中的部分数据时，如果仅仅使用 props实现数据传递，必须沿着祖先组件逐级向下传递到对应的子组件中，这样 会造成代码冗余，而且容易导致逻辑混乱。本节课将详细讲解跨级组件之间数 据传递的相关知识点。三、新课讲解知识点跨级组件之间的数据

17、传递教师通过PPT结合实际操作的方式讲解跨级组件之间的数据传递。(1)跨级组件之间的数据传递的方式一一依赖注入。(2)依赖注入的使用方式。对于父组件而言，如果要为后代组件提供数据，需要使用provide。函数。 对于子组件而言，如果想要注入上层组件或整个应用提供的数据，需要使用 inject。函数。provide。函数。 provide。函数的语法格式 provide。函数的2个参数 不使用setup语法糖时，使用provide。函数的示例代码 使用setup语法糖时，使用provide。函数的示例代码 提供全局依赖inject。函数。 inject。函数的语法格式 inject。函数的3个参

18、数 不使用setup语法糖时，使用inject。函数的示例代码 使用setup语法糖时，使用inject。函数的示例代码(3)通过代码演示跨级组件之间的数据传递。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第九课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：跨级组件之间的数据传递)形式：单独完成题目：实现跨级组件之间的数据传递。(1)创建 3 个

19、单文件组件 ProvideGrand.vue、ProvideParent.vue ProvideChildren.vue,分别表示爷爷组件、父组件、子组件。(2)实现在爷爷组件中使用provide。函数创建依赖。(3)实现在子组件中通过调用inject。函数接收爷爷组件中传过来的数据。第十课时(阶段案例一一待办事项)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在日常生活中，人们通常倾向于对生活和工作进行提前规划，这样可以更 合理地对时间进行划分，从而提高效率。本节将详细讲解待办事项案例的开发。 三、新课讲解知识点一阶段案例一

20、一待办事项教师通过PPT结合实际操作的方式讲解阶段案例一一待办事项。(1)实现初始页面。(2)实现添加任务、删除任务、切换任务状态、展示任务数的条数、切换 任务列表功能。四、归纳总结黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质教师回顾本节课所讲的知识，并通过提问的方式引导学生解答问题并给予 指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第十一课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：阶段案例待办事项)

21、形式：单独完成题目：完成“待办事项”案例的开发。具体要求：(1) “待办事项”案例的页面结构分为上、中、下3个部分，上半部分为 输入区域，中部为列表区域，下半部分为任务状态区域。(2)在文本框中输入内容后，在键盘上按下“Enter”键，添加任务到待办 列表中。(3)单击列表区域中任务列表右侧的“X”按钮，删除任务。(4)在本案例中，任务状态分为全部任务、待办任务、已办任务3种。单 击待办任务前的复选框，即可将待办任务状态改为已完成，并将该任 务添加到已办任务中。(5)在任务状态区域左侧会展示任务的总条数。(6)单击任务状态区域的“All” “Active Completed分别会切换到全部 任务、待办任务、已办任务列表。默认情况下，任务状态区域会展示 全部任务。教学后记