Vue.js前端开发实战（第2版） 教案汇总 第1--3章 初识Vue,js 、Vue.js开发基础、组件基础（上）.docx

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

1、Vue.js前端开发实战（第2版）教学设计课程名称：授课年级：授课学期：教师找名： v-html的语法格式 通过代码演示v-html的使用方法知识点2.属性绑定指令教师通过PPT结合实际操作的方式讲解属性绑定指令。(2) v-bind 的作用。(3) v-bind的语法格式。(4)通过代码演示v-bind的使用方法。知识点3.事件绑定指令教师通过PPT结合实际操作的方式讲解事件绑定指令。(1) v-on的作用。(2) v-on的语法格式。(3)通过代码演示v-on的使用方法。知识点4.双向数据绑定指令教师通过PPT结合实际操作的方式讲解双向数据绑定指令。(1) v-model 的作用。(2)

2、v-model的语法格式。(3) v-model内部为不同的元素绑定不同的属性和事件。(4) v-model的3个修饰符。 .number .trim .lazy(5)通过代码演示v-model的使用方法。(6)通过代码演示.number修饰符的使用方法。知识点5.条件渲染指令教师通过PPT结合实际操作的方式讲解条件渲染指令。(1)条件渲染指令的作用。(2)常见的条件渲染指令。 v-ifo v-if的本质 v-if的两种使用方式 通过代码演示v-if的使用方法 v-showo v-show的原理 v-if与v-show的区别 通过代码演示v-show的使用方法知识点6.列表渲染指令教师通过PP

3、T结合实际操作的方式讲解列表渲染指令。(1) v-for的作用。(2)使用v-for根据不同的数据类型来循环渲染一个列表。 根据数组渲染列表 根据对象渲染列表 根据数字渲染列表 根据字符串渲染列表(3)通过key属性为列表中的每一项提供具有唯一性的值的示例代码。(4)为v-for提供key属性值的优势。(5)通过3个案例演示v-for的使用方法。 根据一维数组渲染列表 根据对象数组渲染列表 根据对象渲染列表四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台(http:)布置本节课作业以及下节课 的预习作业。第五、六课时上机练习

4、主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：条件渲染指令、列表渲染指令)形式：单独完成题目：练习指令。具体要求：(1)创建 srccomponentsVIf.vue 文件。(2)通过使用v-if指令切换小明的学习评定等级。(3)创建 srccomponentsVFor.vue 文件。(4)通过使用v-for指令根据提供的数据自动渲染商品列表中的所有商品。第七课时(事件对象、事件修饰符)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接

5、引入的方式导入新课在Vue开发中，有时需要获取事件发生时的一些信息，例如事件类型、事 件发生的时间戳、事件被触发时对应标签的一些属性值集合等，此时可以通过 事件对象来获取信息。同时，Vue为开发者提供了事件修饰符，它可以与v-on 配合使用，以便于对事件进行控制，让开发者更专注于逻辑。本节课将详细讲 解事件对象、事件修饰符的相关知识点。三、新课讲解知识点1 事件对象教师通过PPT结合实际操作的方式讲解事件对象。(1)什么是事件对象。(2)事件对象的2种获取方式。 通过事件方法的参数获取事件对象 通过$event获取事件对象(3)通过代码演示事件对象的使用方法。知识点2.事件修饰符教师通过PPT

6、结合实际操作的方式讲解事件修饰符。(1)事件修饰符的作用。(2)事件修饰符可以实现的一些功能。 阻止默认事件行为 阻止事件冒泡 事件捕获 使事件只触发一次 使DOM元素只有自身触发事件时才执行事件方法 监听滚动事件 捕获特定按键 捕获鼠标按键四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第八课时(计算属性、侦听器)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在Vue中，Mustache语法可以将表达式的值作为输出

7、内容，但是如果模板 中写太多逻辑会导致代码臃肿且难以维护。因此Vue提供了计算属性来描述依 赖响应式数据的复杂逻辑。在Vue中，开发者可以自定义方法来进行数据的更新操作，但是不能自动 监听数据的状态。如果想在数据更新后进行相应的操作，可以通过侦听器来实 现。本节课将详细讲解计算属性、侦听器的相关知识点。三、新课讲解知识点1 计算属性教师通过PPT结合实际操作的方式讲解计算属性。(1)计算属性的作用。(2)在组件中使用计算属性的步骤。 定义计算属性 输出计算属性(3)通过代码演示计算属性的使用方法。知识点2.侦听器教师通过PPT结合实际操作的方式讲解侦听器。(1)侦听器的作用。(2) watch

8、。函数的语法格式。(3)列举watch()函数的3个参数。(4)通过演示侦听器的使用方法。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台(http:)布置本节课作业以及下节课 的预习作业。第九课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：计算属性、侦听器)形式：单独完成题目：练习计算属性、侦听器。(1)创建一个单文件组件。(2)使用计算属性实现字符串反转功能。(3)使用侦听器监听输入框的

9、值的变化。第十课时(绑定class属性、绑定style属性)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在项目开发中，除了需要定义页面结构外，还需要美化页面的样式，从而 吸引用户的目光。在Vue中，通过绑定class属性和绑定style属性可以实现元 素的样式绑定。样式绑定后，可以很方便地更改元素的样式。本节课将详细讲 解绑定class属性和绑定style属性的相关知识点。三、新课讲解知识点1绑定class属性教师通过PPT结合实际操作的方式讲解绑定class属性。(1)列举使用v-bind绑定class属性时，class属

10、性值的类型。 字符串 对象 数组(2)讲解将class属性值绑定为字符串。(3)通过代码演示如何为class属性绑定字符串。(4)讲解将class属性值绑定为对象。(5)通过代码演示如何为class属性绑定对象。(6)讲解将class属性值绑定为数组。(7)通过代码演示如何为class属性绑定数组。知识点2.绑定style属性教师通过PPT结合实际操作的方式讲解绑定style属性。(1)列举使用v-bind绑定style属性时，style属性值的类型。 对象 数组(2)讲解将style属性值绑定为对象。(3)通过代码演示如何为style属性绑定对象。(4)讲解将style属性值绑定为数组。(5

11、)通过代码演示如何为style属性绑定数组。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台(http:)布置本节课作业以及下节课 的预习作业。第十一课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：绑定class属性、绑定style属性)形式：单独完成题目：练习绑定class属性、绑定style属性。(1)创建一个单文件组件。(2)使用v-bind指令绑定class属性时，将class属性值

12、绑定为字符串、对 象或数组来更改元素的样式。(3)使用v-bind指令绑定style属性时，将style属性值绑定为对象或数组 来更改元素的样式。第十二课时(阶段案例一一学习计划表)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课随着生活节奏的加快，人们倾向于提前规划一段时间的生活、学习和工作 的安排，从而将各项事务都安排的井井有条，帮助人们从易到难、循序渐进地 完成每项事务。对于学生，同样应该提前安排好学习的时间和内容，从而提高 学习效率。接下来将开发一个“学习计划表”案例，用于对学习计划进行管理, 包括对学习计划进行添加、删

13、除、修改等操作。本节课将详细讲解“学习计划 表”案例的开发。三、新课讲解知识点一阶段案例一一学习计划表教师通过PPT结合实际操作的方式讲解阶段案例一一学习计划表。(1)实现初始页面。(2)实现学习计划的添加功能。(3)实现切换学习计划完成状态的功能。(4)实现学习计划的删除功能。四、归纳总结教师回顾本节课所讲的知识，并通过提问的方式引导学生解答问题并给予 指导。五、布置作业教师通过高校教辅平台(http:)布置本节课作业以及下节课 的预习作业。第十三课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代

14、码的 熟练程度。上机：(考察知识点为：阶段案例学习计划表)形式：单独完成题目：完成“学习计划表”案例的开发。具体要求：(1)学习计划表初始页面中会展示学生的学习计划，包括学习科目、学习 内容、学习地点、完成状态等。(2)实现学习计划的添加功能。(3)实现切换学习计划完成状态的功能。(4)实现学习计划的删除功能。当学习计划处于“已完成”状态时，学生 可以对学习计划进行删除操作，否则不能进行删除操作。教学后记Vue.js前端开发实战（第2版）教学设计授语年级：一一授课学期：教帅抽名：课题名称第3章组件基础（上）计戈I 课时11课时教学引入在学习完第2章的基础知识后，读者应该已经可以编写一些简单的组

15、件了， 但是这样的组件功能比较简单，无法满足实际项目开发中各种复杂的需求。为 了能够更灵活地使用组件，读者还需要更深入地学习组件的相关知识。本书将 用第3章和第4章共两章的篇幅详细讲解组件基础，本章为上半部分内容。教学目标 使学生熟悉选项式API和组合式API,能够说出选项式API和组合式API的 区别 使学生掌握生命周期函数的使用方法，能够灵活运用生命周期函数在特定 时间执行特定的操作 使学生掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成 组件的注册 使学生掌握引用组件的方法，能够在Vue项目中以标签的形式引用组件 使学生掌握组件之间样式冲突问题的解决方法，能够运用style标签

16、的 scoped属性和深度选择器解决组件之间样式冲突的问题 使学生掌握父组件向子组件传递数据的方法，能够使用props实现数据传 递 使学生掌握子组件向父组件传递数据的方法，能够使用自定义事件实现数 据传递 使学生掌握跨级组件之间的传递数据的方法，能够使用依赖注入实现数据 共享教学重点 生命周期函数教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教 学 过 程第一课时（选项式API和组合式API、生命周期函数）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。一、通过直接引入的方式导入新课Vue 3支持选项式API和组合式API。其中，选项式A

17、PI是从Vue 2开始使 用的一种写法，而Vue 3新增了组合式API的写法。在Vue中，组件的生命周 期是指每个组件从被创建到被销毁的整个过程，每个组件都有生命周期。如果 想要在某个特定的时机进行特定的处理，可以通过生命周期函数来完成。本节课将详细讲解选项式API、组合式API、生命周期函数的相关知识点。 三、新课讲解知识点1选项式API和组合式API教师通过PPT结合实际操作的方式讲解选项式API和组合式APIo(8) Vue 3支持的写法。选项式API。 什么是选项式API 选项式API的语法格式组合式API。 什么是组合式API 组合式API的语法格式 使用setup语法糖时，组合式A

18、PI的语法格式(9)选项式API和组合式API的关系。(10)使用组合式API开发项目的好处。(11)通过代码演示选项式API和组合式API的使用方法。知识点2.生命周期函数教师通过PPT结合实际操作的方式讲解生命周期函数。(8)什么是组件的生命周期。(9)生命周期函数的作用。(10)组合式API下的生命周期函数。(11)以onMounted。函数为例演示生命周期函数的使用。(12)通过代码演示生命周期函数的使用方法。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台(http:)布置本节课作业以及下节课 的预习作业。第二课时

19、(注册组件、引用组件、解决组件之间的样式冲突)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在Vue中，开发者可以将页面中独立的、可重用的部分封装成组件，对组 件的结构、样式和行为进行设置。组件是Vue的基本结构单元，组件之间可以 相互引用。本节课将详细讲解注册组件、引用组件、解决组件之间的样式冲突 的相关知识点。三、新课讲解知识点1 注册组件教师通过PPT结合实际操作的方式讲解注册组件。(7)为什么要注册组件。(8) Vue提供了两种注册组件的方式。全局注册。 全局注册组件的使用场景 通过Vue应用实例的component。

20、方法全局注册组件的语法 格式 注册全局组件的示例代码 连续注册多个全局组件的方法局部注册。 局部注册组件的使用场景 局部注册组件的示例代码 使用setup语法糖时，注册局部组件的示例代码知识点2.引用组件教师通过PPT结合实际操作的方式讲解引用组件。(3)为什么要引用组件。(4)如何引用组件。(5)通过代码演示组件的使用方法。知识点3.解决组件之间的样式冲突教师通过PPT结合实际操作的方式讲解解决组件之间的样式冲突。(1)导致组件之间样式冲突的根本原因。(2)解决组件之间样式冲突。scoped属性。 使用scoped属性解决组件之间样式冲突的原理 通过代码演示scoped属性的使用方法深度选择

21、器。 使用深度选择器解决组件之间样式冲突的原理 通过代码演示深度选择器的使用方法四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第三课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：注册组件、引用组件)形式：单独完成题目：完成组件的注册及引用。具体要求：(7)创建Vue 3项目。(8)创建 3 个单文件组件 ComponentUse.vue、Globa

22、lComponent.vue LocalComponent.vue,分别表示父组件、全局组件、局部组件。(9)在 ComponentUse 组件中引用 GlobalComponent 组件和 LocalComponent 组件。课题名称第1章初识Vue.js计划 课时5课时教学引入在前端开发中，一个优秀的框架可以帮助用户解决一些常见的问题，有助 于高效地完成工作。Vue.js (简称Vue)作为前端开发常用的框架之一，不仅可 以提高项目的开发效率，而且可以改善开发体验。为了帮助读者对Vue有一个 初步的认识，本章将对Vue的基础知识进行详细讲解。教学目标 使学生了解前端技术的发展，能够说出使用

23、框架开发项目的优势 使学生了解什么是Vue,能够说出Vue的基本概念 使学生了解Vue的特性，能够说出Vue的4个特性 使学生了解Vue的版本，能够说出Vue 2和Vue 3的区别 使学生掌握Visual Studio Code编辑器的使用方法,能够完成中文语言扩展、 Volar扩展的安装，以及使用Visual Studio Code编辑器打开项目并在项目 中创建一个HTML5文档 使学生掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装 使学生掌握常见的包管理工具的使用方法,能够应用叩m和yarn相关命令 下载、升级、卸载包 使学生掌握Vite的使用方法，能够使用Vite创

24、建Vue 3项目教学重点 创建Vue 3项目教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教 学 过 程第一课时(前端技术的发展、什么是Vue、Vue的特性、Vue的版本)一、通过直接引入的方式导入新课前端技术在近几年飞速发展，从最初的HTML、CSS和JavaScript,到现在 的各种框架、工具和库，前端开发已经发展成为Web应用开发中的重要一环。 本节课将详细讲解前端技术的发展、什么是Vue、Vue的特性和Vue的版本的 相关知识点。二、新课讲解知识点1前端技术的发展教师通过PPT的方式讲解前端技术的发展。(1)前端开发的基础语言及作用。(2) jQuery受开发人员欢

25、迎的原因。(3)移动端网页。(4)基于MVVM模式的前端开发框架。知识点2.什么是Vue教师通过PPT的方式讲解什么是Vueo(1)什么是Vue。(2)使用Vue进行项目开发的优势。(3) Vue是基于MVVM模式的框架。第四课时(声明props、静态绑定props、动态绑定props、验证props)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在实际开发中，有时会遇到同一模块中的多个子组件请求同一份数据的情 况，如果在子组件中逐个进行网络请求，会造成代码冗余。Vue提供了 props 语法，可以让父组件为子组件提供要展示的

26、数据，即在父组件中请求该模块下 所有子组件中的网络请求，然后通过props将数据传递给子组件。本节课将详 细讲解父组件向子组件传递数据。三、新课讲解知识点1 声明props教师通过PPT结合实际操作的方式讲解声明propso(5)不使用setup语法糖声明propso 使用props选项声明对象形式props的语法格式 使用props选项声明字符串数组形式props的语法格式(6)使用setup语法糖声明propso 使用defineProps。函数声明对象形式props的语法格式 使用defineProps()函数声明字符串数组形式props的语法格式(7)在模板中输出每个prop的值。知识

27、点2.静态绑定props教师通过PPT结合实际操作的方式讲解静态绑定propso(5)通过静态绑定props的方式为子组件传递数据的语法格式。(6)通过代码演示父组件向子组件传递数据的方法。知识点3动态绑定props教师通过PPT结合实际操作的方式讲解动态绑定propso(1)动态绑定props的方法。(2)以父组件向子组件中传递不同类型的props数据为例讲解。 字符串 数字 布尔值 数组 对象知识点4.验证props教师通过PPT结合实际操作的方式讲解验证propso(1)验证props的优点。(2)使用字符串数组形式的props的缺点。(3)对象形式的props的多种验证方案。 基础类型

28、检查 必填项的校验 属性默认值 自定义验证函数四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第五课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：声明props、静态绑定props、动态绑定props)形式：单独完成题目：完成父组件向子组件传递数据。具体要求：(1)创建2个单文件组件Props.vue Count.vue,分别表示父组件、子组件。(2

29、)实现在子组件中声明propso(3)实现在父组件中静态、动态绑定props为子组件传递数据。第六课时(在子组件中声明自定义事件、在子组件中触发自定义事件、在父组件中 监听自定义事件)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在Vue中，如果子组件需要向父组件传递数据，可以通过自定义事件实现。 在使用自定义事件时，需要在子组件中声明和触发自定义事件，在父组件中监 听自定义事件。本节课将详细讲解自定义事件的声明、触发和监听操作的相关 知识点。三、新课讲解知识点1在子组件中声明自定义事件教师通过PPT的方式讲解在子组件中声明自

30、定义事件。(4)不使用setup语法糖时，通过emits选项声明自定义事件的示例代码。(5)使用setup语法糖时，通过调用defneEmits。函数声明自定义事件的示 例代码。知识点2.在子组件中触发自定义事件教师通过PPT的方式讲解在子组件中触发自定义事件。(1)使用内联事件处理器来触发自定义事件当使用场景简单时，可以使用内联事件处理器，通过调用$611向()方法触发 自定义事件，将数据传递给使用的组件(2)直接定义方法来触发自定义事件 不使用setup语法糖时，从setup。函数的第2个参数来访问到 emit。方法的示例代码 使用setup语法糖时，调用emit。函数来触发自定义事件的示

31、例代码知识点3.在父组件中监听自定义事件教师通过PPT结合实际操作的方式讲解在父组件中监听自定义事件。(3)在父组件中监听自定义事件的方法。(4)通过代码演示子组件向父组件传递数据的方法。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第七课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：编程式导航)形式：单独完成题目：实现将子组件中的数据传递给父组件

32、。具体要求：(1)创建 2 个单文件组件 CustomEvents.vue、CustomSubComponent.vue, 分别表示父组件、子组件。(2)实现在子组件中定义数据、声明和触发自定义事件。(3)实现在父组件中监听自定义事件。第八课时(跨级组件之间的数据传递) 一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课通过前面的学习可知，可以通过props实现父、子组件之间的数据传递。 但是在实际的开发过程中会存在多层级嵌套的组件，形成了一颗巨大的组件树。 当某个深层级的子组件需要较远的祖先组件中的部分数据时，如果仅仅使用 pr

33、ops实现数据传递，必须沿着祖先组件逐级向下传递到对应的子组件中，这样 会造成代码冗余，而且容易导致逻辑混乱。本节课将详细讲解跨级组件之间数 据传递的相关知识点。三、新课讲解知识点跨级组件之间的数据传递教师通过PPT结合实际操作的方式讲解跨级组件之间的数据传递。(4)跨级组件之间的数据传递的方式一一依赖注入。(5)依赖注入的使用方式。对于父组件而言，如果耍为后代组件提供数据，需要使用provide。函数。 对于子组件而言，如果想要注入上层组件或整个应用提供的数据，需要使用inject。函数。provide。函数。 provide。函数的语法格式 provide。函数的2个参数 不使用setup

34、语法糖时，使用provide。函数的示例代码 使用setup语法糖时，使用provide。函数的示例代码 提供全局依赖inject。函数。 inject。函数的语法格式 inject。函数的3个参数 不使用setup语法糖时，使用inject。函数的示例代码 使用setup语法糖时，使用inject。函数的示例代码(6)通过代码演示跨级组件之间的数据传递。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台(http:)布置本节课作业以及下节课 的预习作业。第九课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程

35、序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：跨级组件之间的数据传递)形式：单独完成题目：实现跨级组件之间的数据传递。(1)创建 3 个单文件组件 ProvideGrand.vue、ProvideParent.vue ProvideChildren.vue,分别表示爷爷组件、父组件、子组件。(2)实现在爷爷组件中使用provide。函数创建依赖。(3)实现在子组件中通过调用inject。函数接收爷爷组件中传过来的数据。第十课时(阶段案例一一待办事项)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固

36、 讲解。二、通过直接引入的方式导入新课在日常生活中，人们通常倾向于对生活和工作进行提前规划，这样可以更 合理地对时间进行划分，从而提高效率。本节将详细讲解待办事项案例的开发。 三、新课讲解知识点阶段案例一一待办事项教师通过PPT结合实际操作的方式讲解阶段案例一一待办事项。(5)实现初始页面。(6)实现添加任务、删除任务、切换任务状态、展示任务数的条数、切换 任务列表功能。四、归纳总结教师回顾本节课所讲的知识，并通过提问的方式引导学生解答问题并给予 指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第十一课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以

37、及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：阶段案例待办事项)形式：单独完成题目：完成“待办事项”案例的开发。具体要求：(5) “待办事项”案例的页面结构分为上、中、下3个部分，上半部分为 输入区域，中部为列表区域，下半部分为任务状态区域。(6)在文本框中输入内容后，在键盘上按下“Enter”键，添加任务到待办 列表中。(7)单击列表区域中任务列表右侧的“X”按钮，删除任务。(8)在本案例中，任务状态分为全部任务、待办任务、已办任务3种。单 击待办任务前的复选框，即可将待办任务状态改为已完成，并将该任 务添加到已办任

38、务中。(9)在任务状态区域左侧会展示任务的总条数。(10)单击任务状态区域的“AH” “Active” “Completed”分别会切换到全部 任务、待办任务、已办任务列表。默认情况下，任务状态区域会展示 全部任务。教学后记(4) MVVM的组成部分。(5) Vue基本工作原理。知识点3-Vue的特性教师通过PPT的方式讲解Vue的特性。(1)数据驱动视图。(2)双向数据绑定。(3)指令。(4)插件。知识点4-Vue的版本教师通过PPT的方式讲解Vue的版本。(6) Vue的版本介绍。(7) Vue 3的新特性。(3)常用的UI组件库。三、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引

39、导学生解答问题并给 予指导。四、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第二课时(Visual Studio Code编辑器、Node.js环境、常见的包管理工具) 一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课“工欲善其事，必先利其器:在使用Vue开发项目之前，要先搭建出项 目的开发环境。本节课将详细讲解在Vue开发环境中用到的一些软件，包括 Visual Studio Code编辑器、Node.js环境以及常见的包管理工具。 三、新课讲解知识点1-Visual Studio Code编辑器教师

40、通过PPT结合实际操作的方式讲解Visual Studio Code编辑器。(1)什么是 Visual Studio Code。(8) VS Code编辑器的特点。(3)下载和安装VS Code编辑器。(4)安装中文语言扩展。(5)安装Volar扩展。(6)通过代码演示如何使用VS Code编辑器。知识点2-Node.js环境教师通过PPT结合实际操作的方式讲解Node.js环境。(1)什么是 Node.js。(2)安装 Node.js。知识点3.常见的包管理工具教师通过PPT结合实际操作的方式讲解常见的包管理工具。(1)什么是包。(2)使用包管理工具的优势。(3)常见的包管理工具。npmo

41、什么是npm 查看npm版本 使用npm包管理器可以解决某些场景的需求 npm中常用的命令 为叩m设置镜像地址yarn。 什么是yarn 安装yarn 查看yarn版本 为yarn设置镜像地址 yarn中常用的命令 yarn与npm包管理工具的区别四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第三课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：Vi

42、sual Studio Code编辑器、Node.js环境、常见的 包管理工具)形式：单独完成题目：完成Vue开发环境的搭建。具体要求：(1)下载和安装VS Code编辑器，完成中文语言扩展、Volar扩展的安装, 以及使用VS Code编辑器打开项目，并在项目中创建一个HTML5文 档。(2)下载和安装Node.jso(3)应用npm和yarn相关命令下载、升级、卸载包。第四课时(什么是Vite、创建Vue3项目、Vue 3项目的目录结构、Vue3项目的运 行过程)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在使用Vue

43、3开发大型项目时; 需要考虑目录结构、热加载、部署、代码 单元测试等环节。如果这些环节全部通过手动实现，效率比较低，此时可以借 助Vite快速创建一个可以按需添加各种功能的项目。本节课将详细讲解使用 Vite创建Vue 3项目的相关知识点。 三、新课讲解知识点1 .什么是Vite教师通过PPT结合实际操作的方式讲解什么是Viteo(1)什么是Vite。(2)使用Vite创建项目的好处。知识点2.创建Vue 3项目教师通过PPT结合实际操作的方式讲解Vue 3项目的创建。(1) Vite提供的两种创建项目的命令。 手动创建项目的命令。 使用npm或yarn包管理工具搭配Vite手动创建项目的命令

44、 通过代码演示如何手动创建Vue 3项目 通过模板自动创建项目的命令。 使用npm或yarn包管理工具搭配Vite通过模板自动创建项 目的命令 通过代码演示如何通过模板自动创建Vue 3项目知识点3-Vue 3项目的目录结构教师通过PPT方式讲解Vue 3项目的目录结构。(1) Vue 3项目的目录结构。(2)简要介绍Vue 3项目的目录结构中各个目录和文件的作用。知识点4Vue 3项目的运行过程教师通过PPT的方式讲解Vue 3项目的运行过程。(1) Vue 3项目的运行过程。(2)对重点文件进行代码解析。 srcApp.vue 文件 index.html 文件 srcmain.js 文件四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第五课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：创建Vue 3项目)形式：单独完成题目：创建Vue3项目。具体要求：打开命令提示符，切换到项目目录下，使用yarn创