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

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

1、黑马程序员黑马程序员Vue.js前端开发实战（第2板）教学设计课程名称: 授课年级: 授课学期: 教师被名:黑马程序员(1)学习计划表初始页面中会展示学生的学习计划，包括学习科目、学习 内容、学习地点、完成状态等。(2)实现学习计划的添加功能。(3)实现切换学习计划完成状态的功能。(4)实现学习计划的删除功能。当学习计划处于“已完成”状态时，学生 可以对学习计划进行删除操作，否则不能进行删除操作。教学后记课题名称第2章Vue.js开发基础13课时课时教学引入在搭建好Vue开发环境后，要想使用Vue开发实际项目，必须先学习Vue 基础知识。只有掌握Vue框架的基础知识后，才能根据实际需求游刃有余

2、地进 行项目开发。本章将详细讲解Vue开发基础。教学目标 使学生掌握单文件组件，能够创建并使用单文件组件 使学生掌握数据绑定，能够定义数据并将数据渲染到页面中 使学生掌握内容渲染指令，能够灵活运用v-text和v-html指令将字符串渲 染到页面中 使学生掌握属性绑定指令，能够灵活运用v-bind指令给目标元素的属性动 态绑定值 使学生掌握事件绑定指令，能够灵活运用v-on指令给目标元素绑定事件 使学生掌握双向数据绑定指令，能够灵活运用v-model指令在表单元素上 实现数据的双向绑定 使学生掌握条件渲染指令，能够灵活运用v-if、v-show指令根据不同的条 件渲染不同的标签 使学生掌握列表

3、渲染指令，能够灵活运用v-for指令将数组、对象等中的数 据渲染到页面中 使学生掌握事件对象，能够灵活运用事件对象获取和修改D0M元素的属 性 使学生熟悉事件修饰符，能够阐述常见的事件修饰符 使学生掌握计算属性，能够灵活运用计算属性实时监听数据的变化，当所 依赖的数据发生变化时重新计算值 使学生掌握侦听器，能够灵活运用侦听器监听数据的变化并进行相应的操 作 使学生掌握样式绑定，能够灵活运用v-bind绑定class和style属性实现元 素样式的设置教学重点 响应式数据绑定 属性绑定指令 事件绑定指令 双向数据绑定指令 条件渲染指令 列表渲染指令教学难点无教学方式课堂教学以PPT讲授为主，并结

4、合多媒体进行教学教 学 过 程第一课时（单文件组件、初识数据绑定、响应式数据绑定）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。样的教育，不一样的品质黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质二、通过直接引入的方式导入新课Vue是一个支持组件化开发的框架。在第1章中使用Vite创建Vue项目后， 目录结构中包含一些扩展名为.vue的文件，每个.vue文件都可用来定义一个单 文件组件。本节课将详细讲解单文件组件、初始识数据绑定、响应式数据绑定 的相关知识点。 三、新课讲解知识点1 .单文件组件教师通过PPT结合实际操作的方式讲解单文件组

5、件。(1)单文件组件的组成部分。 模板 样式 逻辑(2)演示如何定义一个基本的单文件组件。(3)通过代码演示单文件组件的使用方法。知识点2.初识数据绑定教师通过PPT结合实际操作的方式讲解初识数据绑定。(1)数据绑定的步骤。 定义数据 输出数据(2)通过代码演示数据绑定的实现。知识点3.响应式数据绑定教师通过PPT结合实际操作的方式讲解响应式数据绑定。(1)定义响应式数据的函数。 ref()函数 reactive。函数 toRef()函数 toRefs()函数(2)通过代码演示ref()函数、reactive。函数、toRef()函数和toRefs()函数的 使用方法。四、归纳总结教师回顾本节

6、课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第二课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：单文件组件、响应式数据绑定)形式：单独完成题目：定义响应式数据。具体要求：黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质(1)创建一个项R名称为vue-demo的Vue 3项目。(2)创建一个单文件组件。(3)通过调用ref()函数、reactive。函数、

7、toRef。函数和toRefs()函数实现响 应式数据绑定。第三、四课时(内容渲染指令、属性绑定指令、事件绑定指令、双向数据绑定指令、条 件渲染指令、列表渲染指令) 一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课指令是一种在模板中使用的带有v-前缀的特殊属性，通过指令可以辅助开 发者定义页面结构，使用简洁的代码实现复杂的功能。Vue中的指令按照不同 的用途可以分为6类，分别是内容渲染指令、属性绑定指令、事件绑定指令、 双向数据绑定指令、条件渲染指令、列表渲染指令。本节课将详细讲解指令的 相关知识点。三、新课讲解知识点1 内容渲

8、染指令教师通过PPT结合实际操作的方式讲解内容渲染指令。(1)内容渲染指令的作用。(2)常见的内容渲染指令。v-texto v-text的作用 v-text的语法格式 通过代码演示v-text的使用方法v-htmlo v-html的作用 v-html的语法格式 通过代码演示v-html的使用方法知识点2.属性绑定指令教师通过PPT结合实际操作的方式讲解属性绑定指令。(1) v-bind 的作用。(2) v-bind的语法格式。(3)通过代码演示v-bind的使用方法。知识点3.事件绑定指令教师通过PPT结合实际操作的方式讲解事件绑定指令。(1) v-on的作用。(2) v-on的语法格式。(3

9、)通过代码演示v-on的使用方法。知识点4.双向数据绑定指令教师通过PPT结合实际操作的方式讲解双向数据绑定指令。(1) v-model 的作用。(2) v-model的语法格式。黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质(3) vmodel内部为不同的元素绑定不同的属性和事件。(4) v-model的3个修饰符。 .number .trim .lazy(5)通过代码演示v-model的使用方法。(6)通过代码演示.number修饰符的使用方法。知识点5.条件渲染指令教师通过PPT结合实际操作的方式讲解条件渲染指令。(1)条件渲染指令的作用。(2)常见的条件渲染指令。v-

10、ifo v-if的本质 v-if的两种使用方式 通过代码演示v-if的使用方法v-showo v-show的原理 v-if与v-show的区别 通过代码演示v-show的使用方法知识点6.列表渲染指令教师通过PPT结合实际操作的方式讲解列表渲染指令。(1) v-for的作用。(2)使用v-for根据不同的数据类型来循环渲染一个列表。 根据数组渲染列表 根据对象渲染列表 根据数字渲染列表 根据字符串渲染列表(3)通过key属性为列表中的每一项提供具有唯一性的值的示例代码。(4)为v-for提供key属性值的优势。(5)通过3个案例演示v-for的使用方法。 根据一维数组渲染列表 根据对象数组渲染

11、列表 根据对象渲染列表四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第五、六课时上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质上机：(考察知识点为：条件渲染指令、列表渲染指令)形式：单独完成题目：练习指令。具体要求：(1)创建 srccomponentsVIf.vue 文件。(2)通过使用v-if指令切换小明的学习评定等

12、级。(3)创建 srccomponentsVFor.vue 文件。(4)通过使用v-for指令根据提供的数据自动渲染商品列表中的所有商品。第七课时(事件对象、事件修饰符)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在Vue开发中，有时需要获取事件发生时的一些信息，例如事件类型、事 件发生的时间戳、事件被触发时对应标签的一些属性值集合等，此时可以通过 事件对象来获取信息。同时，Vue为开发者提供了事件修饰符，它可以与v-on 配合使用，以便于对事件进行控制，让开发者更专注于逻辑。本节课将详细讲 解事件对象、事件修饰符的相关知识

13、点。三、新课讲解知识点1 .事件对象教师通过PPT结合实际操作的方式讲解事件对象。(1)什么是事件对象。(2)事件对象的2种获取方式。 通过事件方法的参数获取事件对象 通过$event获取事件对象(3)通过代码演示事件对象的使用方法。知识点2.事件修饰符教师通过PPT结合实际操作的方式讲解事件修饰符。(1)事件修饰符的作用。(2)事件修饰符可以实现的一些功能。 阻止默认事件行为 阻止事件冒泡 事件捕获 使事件只触发一次 使DOM元素只有自身触发事件时才执行事件方法 监听滚动事件 捕获特定按键 捕获鼠标按键四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、

14、布置作业黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第八课时(计算属性、侦听器)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在Vue中，Mustache语法可以将表达式的值作为输出内容，但是如果模板 中写太多逻辑会导致代码臃肿且难以维护。因此Vue提供了计算属性来描述依 赖响应式数据的复杂逻辑。在Vue中，开发者可以自定义方法来进行数据的更新操作，但是不能自动 监听数据的状态。如果想在数据更新后进行相应的操作，可以通过侦听器来实 现。本节课将详

15、细讲解计算属性、侦听器的相关知识点。三、新课讲解知识点1 计算属性教师通过PPT结合实际操作的方式讲解计算属性。(1)计算属性的作用。(2)在组件中使用计算属性的步骤。 定义计算属性 输出计算属性(3)通过代码演示计算属性的使用方法。知识点2.侦听器教师通过PPT结合实际操作的方式讲解侦听器。(1)侦听器的作用。(2) watch()函数的语法格式。(3)列举watch。函数的3个参数。(4)通过演示侦听器的使用方法。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第九课时(上机练习

16、)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：计算属性、侦听器)形式：单独完成题目：练习计算属性、侦听器。(1)创建一个单文件组件。黑马程序员传智教育旗下 高端IT教育品牌样的教育，不一样的品质(2)使用计算属性实现字符串反转功能。(3)使用侦听器监听输入框的值的变化。第十课时(绑定class属性、绑定style属性) 一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在项目开发中，除了需要定义页面结构外，还

17、需要美化页面的样式，从而 吸引用户的目光。在Vue中，通过绑定class属性和绑定style属性可以实现元 素的样式绑定。样式绑定后，可以很方便地更改元素的样式。本节课将详细讲 解绑定class属性和绑定style属性的相关知识点。三、新课讲解知识点1 .绑定class属性教师通过PPT结合实际操作的方式讲解绑定class属性。(1)列举使用v-bind绑定class属性时，class属性值的类型。 字符串 对象 数组(2)讲解将class属性值绑定为字符串。(3)通过代码演示如何为class属性绑定字符串。(4)讲解将class属性值绑定为对象。(5)通过代码演示如何为class属性绑定对象

18、。(6)讲解将class属性值绑定为数组。(7)通过代码演示如何为class属性绑定数组。知识点2.绑定style属性教师通过PPT结合实际操作的方式讲解绑定style属性。(1)列举使用v-bind绑定style属性时，style属性值的类型。 对象 数组(2)讲解将style属性值绑定为对象。(3)通过代码演示如何为style属性绑定对象。(4)讲解将style属性值绑定为数组。(5)通过代码演示如何为style属性绑定数组。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第十一

19、课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错黑马程序员传智教育旗下I高端IT教育品牌一样的教育，不一样的品质的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：绑定class属性、绑定style属性)形式：单独完成题目：练习绑定dass属性、绑定style属性。(1)创建一个单文件组件。(2)使用v-bind指令绑定class属性时，将class属性值绑定为字符串、对 象或数组来更改元素的样式。(3)使用v-bind指令绑定style属性时，将style属性值绑定为对象或数组 来更改元素的样式。第十二课时(阶

20、段案例一一学习计划表)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课随着生活节奏的加快，人们倾向于提前规划一段时间的生活、学习和工作 的安排，从而将各项事务都安排的井井有条，帮助人们从易到难、循序渐进地 完成每项事务。对于学生，同样应该提前安排好学习的时间和内容，从而提高 学习效率。接下来将开发一个“学习计划表”案例，用于对学习计划进行管理, 包括对学习计划进行添加、删除、修改等操作。本节课将详细讲解“学习计划 表”案例的开发。三、新课讲解知识点一阶段案例一一学习计划表教师通过PPT结合实际操作的方式讲解阶段案例一一学习计划表。(1)实现初始页面。(2)实现学习计划的添加功能。(3)实现切换学习计划完成状态的功能。(4)实现学习计划的删除功能。四、归纳总结教师回顾本节课所讲的知识，并通过提问的方式引导学生解答问题并给予 指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第十三课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：阶段案例学习计划表)形式：单独完成题目：完成“学习计划表”案例的开发。具体要求：