Vue应用程序开发（第2版）教案全套 刘海

《Vue应用程序开发》课程教案-96第9次课（2学时）课题组件通信（非父子组件）教学目的与要求1.理解非父子组件（兄弟组件、隔代组件）通信的难点；2.掌握使用事件总线（mitt）实现任意组件间通信的方法。重点难点重点：事件总线的创建与使用；难点：事件的发布（emit）与订阅（on）模式、组件销毁时的事件解绑。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课自定义事件知识，进行提问（5分钟）；2.引入课程内容：讲解没有直接关系的组件如何通信（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解非父子组件通信的常见场景（10分钟）。(2)引入教材案例，提出事件总线（mitt）的概念。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，讲解如何使用mitt进行事件的发布与订阅（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解事件总线（10分钟）；(2)实践（40分钟）：创建三个兄弟组件，使用事件总线实现组件A的数据传递给组件C。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解跨组件通信（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调事件总线是解决复杂组件通信的有效方案。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue事件总线的使用，理解发布订阅模式。第10次课（2学时）课题内容分发（插槽）教学目的与要求1.理解插槽（Slot）的作用和使用场景；2.掌握默认插槽、具名插槽的用法；3.了解作用域插槽的基本概念。重点难点重点：默认插槽和具名插槽的使用；难点：作用域插槽的数据传递机制。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课组件通信知识，进行提问（5分钟）；2.引入课程内容：讲解如何让父组件决定子组件的部分内容（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解插槽的概念和默认插槽的用法（10分钟）。(2)引入教材案例，提出具名插槽。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，简要介绍作用域插槽（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解插槽分发（10分钟）；(2)实践（40分钟）：创建一个通用的卡片组件，使用插槽填充标题、内容和底部操作区。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解内容分发机制（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调插槽是实现组件内容可定制化的关键。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue插槽的使用，理解内容分发的相关概念。第11次课（2学时）课题动态组件与异步组件教学目的与要求1.掌握使用<component:is="...">实现动态组件切换；2.理解<keep-alive>缓存组件状态的作用；3.了解异步组件的概念和优势。重点难点重点：动态组件的切换；难点：<keep-alive>的缓存机制及其对生命周期的影响。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课插槽知识，进行提问（5分钟）；2.引入课程内容：讲解如何根据条件动态渲染不同的组件（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解动态组件的基本用法（10分钟）。(2)引入教材案例，提出<keep-alive>组件。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，讲解异步组件的加载（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解动态组件（10分钟）；(2)实践（40分钟）：实现一个选项卡（Tab）切换功能，使用动态组件和<keep-alive>。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解组件的动态加载（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调动态组件在构建复杂UI时的灵活性。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue动态组件的使用，理解组件缓存的相关概念。第12次课（2学时）课题自定义指令教学目的与要求1.理解自定义指令的使用场景；2.掌握全局指令和局部指令的注册方法；3.熟悉指令的钩子函数（如mounted,updated）。重点难点重点：自定义指令的注册与使用；难点：指令钩子函数的参数（el,binding）及执行时机。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课动态组件知识，进行提问（5分钟）；2.引入课程内容：讲解如何封装可复用的底层DOM操作（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解自定义指令的概念和注册方式（10分钟）。(2)引入教材案例，提出指令的钩子函数。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，讲解钩子函数的参数（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解自定义指令（10分钟）；(2)实践（40分钟）：创建一个v-focus指令实现自动聚焦，和一个v-color指令动态设置文本颜色。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解DOM底层操作封装（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调自定义指令是操作DOM的有效补充。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue自定义指令的使用，理解钩子函数的相关概念。第13次课（2学时）课题Vue过渡与动画（CSS）教学目的与要求1.掌握使用<transition>组件为元素添加过渡效果；2.熟悉Vue自动添加的6个CSS过渡类名；3.能够使用CSStransition和animation实现进入/离开动画。重点难点重点：<transition>组件的使用、CSS过渡类名；难点：CSS动画（animation）与过渡（transition）在Vue中的区别与应用。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课自定义指令知识，进行提问（5分钟）；2.引入课程内容：讲解如何为元素的显示/隐藏添加平滑的动画效果（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解<transition>组件的基本用法和6个CSS类名（10分钟）。(2)引入教材案例，提出使用CSStransition实现淡入淡出。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，讲解使用CSSanimation实现复杂动画（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解过渡效果（10分钟）；(2)实践（40分钟）：为一个模态框（Modal）的显示和隐藏添加淡入淡出和缩放的动画效果。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解动画的实现（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调CSS过渡和动画的区别，总结<transition>的用法。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue过渡与动画的使用，理解CSS动画的相关概念。第14次课（2学时）课题列表过渡与动画教学目的与要求1.掌握使用<transition-group>组件为列表添加过渡效果；2.理解<transition-group>与<transition>的区别；3.能够使用CSS实现列表项的增删动画和排序动画。重点难点重点：<transition-group>的使用；难点：列表过渡中key属性的必要性、v-move类实现排序动画。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课单个元素过渡知识，进行提问（5分钟）；2.引入课程内容：讲解如何为v-for生成的列表添加动画（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解<transition-group>组件的基本用法（10分钟）。(2)引入教材案例，提出列表的进入/离开动画。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，讲解v-move类实现列表项位置变动动画（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解列表过渡（10分钟）；(2)实践（40分钟）：实现一个待办事项列表，添加和删除项目时有平滑的动画效果。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解列表动画的实现（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调<transition-group>必须渲染一个真实元素，总结列表动画的关键点。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue列表过渡的使用，理解<transition-group>的相关概念。第15次课（2学时）课题动画库集成教学目的与要求1.掌握集成第三方CSS动画库（如Animate.css）的方法；2.熟悉<transition>组件；3.了解使用JavaScript直接操作DOM实现动画的基本思路。重点难点重点：集成Animate.css库；难点：JavaScript钩子函数（@before-enter,@enter,@after-enter等）的参数和使用场景。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课列表过渡知识，进行提问（5分钟）；2.引入课程内容：讲解如何使用成熟的动画库和JavaScript来创建更复杂的动画效果（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解如何引入和使用Animate.css动画库（10分钟）。(2)引入教材案例，提出<transition>的JavaScript钩子。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，演示使用GSAP或Velocity.js等库配合钩子函数实现动画（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解动画库集成（10分钟）；(2)实践（40分钟）：为一个元素的显示/隐藏添加Animate.css的“弹跳”效果，并使用JavaScript钩子记录动画状态。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解复杂动画的实现（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调使用动画库可以提高开发效率，总结JavaScript钩子的作用。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue与动画库的集成，理解JavaScript钩子的相关概念。第16课（2学时）课题VueCLI与项目脚手架教学目的与要求1.理解VueCLI的作用和优势；2.掌握使用VueCLI创建和管理项目的方法；3.熟悉VueCLI项目的目录结构和核心配置文件。重点难点重点：使用npminitvue@latest或vuecreate创建项目；难点：项目目录结构（src,public,components等）的理解、vite.config.js或vue.config.js的配置。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课动画知识，进行提问（5分钟）；2.引入课程内容：讲解如何使用工程化工具来构建和管理大型Vue项目（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解VueCLI和Vite的概念及区别（10分钟）。(2)引入教材案例，演示使用VueCLI创建项目的完整流程。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，详细解读项目目录结构和配置文件（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解项目脚手架（10分钟）；(2)实践（40分钟）：每个学生独立使用VueCLI创建一个新项目，并成功运行。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解工程化开发流程（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调VueCLI是现代Vue开发的标准工具，总结项目结构。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习VueCLI的使用，理解项目目录结构的相关概念。第17次课（2学时）课题单文件组件教学目的与要求1.理解单文件组件（.vue文件）的概念和优势；2.掌握<template>、<script>、<style>三个顶层块的使用方法；3.熟悉<stylescoped>实现样式局部作用域的原理。重点难点重点：单文件的结构和语法；难点：scoped属性的实现原理（属性选择器）、单文件中的预处理器配置。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课VueCLI知识，进行提问（5分钟）；2.引入课程内容：讲解Vue项目中最核心的代码组织方式——单文件组件（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解SFC的概念和与传统开发模式的对比（10分钟）。(2)引入教材案例，分析.vue文件的三个部分。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，深入讲解scoped样式和预处理器（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解SFC（10分钟）；(2)实践（40分钟）：在CLI项目中创建一个新的SFC，并使用scoped样式和Sass预处理器。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解组件化开发（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调SFC是Vue开发的基石，总结其三大组成部分。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue单文件组件的使用，理解scoped样式的相关概念。第18次课（2学时）课题组合式API教学目的与要求1.理解组合式API的设计理念和优势；2.掌握setup()函数的执行时机和基本用法；3.熟悉ref和reactive创建响应式数据的方法。重点难点重点：setup()函数、ref和reactive；难点：组合式API与选项式API的思维差异、ref的.value访问。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习上节课SFC知识，进行提问（5分钟）；2.引入课程内容：讲解Vue3推出的全新代码组织方式——组合式API（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解组合式API的提出背景和核心思想（10分钟）。(2)引入教材案例，提出setup()函数。此时教师将该部分关键内容书写板书并进行案例分析（30分钟）。(3)通过PPT讲解及对案例的分析，详细对比ref和reactive的用法（30分钟）。2.课堂实践：（50分钟）(1)通过对教材案例的编写及结果的分析，使学生理解组合式API（10分钟）；(2)实践（40分钟）：使用setup()、ref和reactive重写一个简单的计数器组件。3.知识运用：（40分钟）(1)通过对教材案例的编写及结果的分析，使学生理解新的逻辑组织方式（30分钟）；(2)点评（10分钟）：对学生的完成情况进行点评，共性的问题进行集中讲解。三、归纳小结时间分配：5分钟内容：回顾本次课的主要内容，强调组合式API在逻辑复用上的优势，总结ref和reactive的区别。课后学习任务布置1.课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.课后学习：学习Vue组合式API的使用，理解setup函数的相关概念。第19次课（2学时）课题脚手架项目结构与单文件组件教学目的与要求1.掌握使用npmcreatevue@latest命令创建Vue项目的方法；2.熟悉脚手架生成的项目目录结构及核心文件的作用；3.理解单文件组件（.vue文件）的概念及其<template>、<script>、<style>三个部分。重点难点重点：项目初始化流程、项目目录结构、单文件组件的基本结构；难点：理解vite.config.js和package.json等配置文件的作用，以及单文件组件的模块化思想。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.回顾Vue基础指令和组件通信方式（5分钟）；2.引入课程内容：讲解如何使用脚手架工具搭建标准化的Vue工程化项目（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解Node.js环境准备及npmcreatevue@latest命令的使用与交互选项（10分钟）。(2)引入教材案例，详细解析脚手架生成的项目目录结构，如src,public,node_modules等（30分钟）。(3)通过PPT及案例分析，讲解单文件组件（SFC）的结构和优势（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解项目结构（10分钟）；(2)实践：每位学生独立使用脚手架创建一个新项目，并成功运行，熟悉目录结构（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解SFC的编写方式（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：回顾脚手架的使用流程，强调单文件组件是Vue工程化开发的核心。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.预习组件嵌套和组件通信的相关知识。第20次课（2学时）课题组件嵌套与组件通信教学目的与要求1.掌握在单文件组件中引入和嵌套其他组件的方法；2.熟练掌握父组件向子组件传递数据的props方式；3.熟练掌握子组件向父组件传递数据的$emit方式。重点难点重点：组件的引入与嵌套、props和$emit的基本用法；难点：props的数据类型校验和单向数据流原则，以及$emit事件的命名和参数传递。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习单文件组件的结构（5分钟）；2.引入课程内容：讲解如何构建复杂的、由多个组件组合而成的页面（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解在<scriptsetup>中通过import引入并注册组件的方法（10分钟）。(2)引入教材案例，详细讲解defineProps接收父组件数据的语法（30分钟）。(3)通过PPT及案例分析，讲解defineEmits触发自定义事件向父组件传值的语法（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解组件通信流程（10分钟）；(2)实践：创建父子组件，实现父传子（如传递一个消息数组）和子传父（如子组件按钮点击后通知父组件）的功能（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解双向通信的逻辑（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：总结组件嵌套的步骤，强调props是单向数据流，$emit是子组件与父组件通信的唯一方式。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.思考非父子组件之间如何通信。第21次课（2学时）课题非父子组件通信与插槽教学目的与要求1.了解使用mitt库实现非父子组件（如兄弟组件）间通信的方法；2.理解插槽（Slot）的作用，掌握默认插槽和具名插槽的用法；3.了解作用域插槽的基本概念。重点难点重点：mitt事件总线的使用、默认插槽和具名插槽；难点：理解事件总线的发布/订阅模式，以及作用域插槽如何实现子组件向父组件暴露数据。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习父子组件通信方式（5分钟）；2.引入课程内容：讲解当组件关系复杂时，如何进行通信以及如何实现组件内容的灵活分发（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解mitt库的安装、初始化以及在组件中发布和订阅事件的方法（10分钟）。(2)引入教材案例，讲解默认插槽和具名插槽的语法（30分钟）。(3)通过PPT及案例分析，简要介绍作用域插槽的用法（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解非父子通信和插槽分发（10分钟）；(2)实践：创建三个兄弟组件，使用mitt实现数据传递；创建一个通用卡片组件，使用插槽填充内容（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解组件内容分发的灵活性（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：回顾mitt的使用步骤，总结插槽是实现组件内容可定制化的关键。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.预习VueRouter的相关知识。第22次课（2学时）课题VueRouter基础与动态路由教学目的与要求1.理解前端路由的概念和VueRouter的作用；2.掌握使用脚手架集成VueRouter的方法；3.掌握使用<router-link>和<router-view>实现页面跳转和视图渲染；4.掌握动态路由的配置和参数获取。重点难点重点：路由的基本配置、<router-link>和<router-view>的使用、动态路由参数；难点：理解路由模式（HashvsHistory），以及在组件中通过useRoute获取动态参数。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习组件通信知识（5分钟）；2.引入课程内容：讲解如何构建单页面应用，实现无刷新的页面切换（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解VueRouter的安装和在main.js中的挂载（10分钟）。(2)引入教材案例，讲解router/index.js中的路由配置，包括路径和组件的映射（30分钟）。(3)通过PPT及案例分析，讲解动态路由（如/user/:id）的定义和在组件中通过useRoute().params获取参数（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解路由配置（10分钟）；(2)实践：创建首页、列表页、详情页三个组件，配置路由实现跳转，并在详情页获取并显示动态ID（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解SPA的页面切换逻辑（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：回顾路由的核心概念，强调<router-view>是路由组件的占位符。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.预习编程式导航和嵌套路由。第23次课（2学时）课题编程式导航与嵌套路由教学目的与要求1.掌握使用router.push()和router.replace()进行编程式导航；2.掌握嵌套路由（子路由）的配置方法；3.理解router.go()等历史记录操作方法。重点难点重点：router.push()的使用、children属性配置嵌套路由；难点：理解嵌套路由中<router-view>的嵌套关系，以及命名路由的使用。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习<router-link>的用法（5分钟）；2.引入课程内容：讲解如何通过JavaScript代码控制路由跳转，以及如何构建具有层级结构的页面（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解在组件中通过useRouter()获取路由实例，并使用push和replace方法进行跳转（10分钟）。(2)引入教材案例，讲解在路由配置中使用children数组定义嵌套路由（30分钟）。(3)通过PPT及案例分析，讲解router.go(n)实现前进后退（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解编程式导航（10分钟）；(2)实践：在课程详情页中，通过按钮点击事件实现跳转；配置“课程”父路由及其“JS课程”、“Vue课程”子路由（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解嵌套路由的结构（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：总结编程式导航的几种方法，强调嵌套路由需要对应的嵌套<router-view>。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2.预习路由守卫和Axios的使用。第24次课（2学时）课题路由守卫与Axios基础教学目的与要求1.掌握使用全局前置守卫router.beforeEach实现路由拦截（如登录验证）；2.理解Axios的作用，掌握使用CDN和NPM安装Axios的方法；3.掌握使用Axios发送GET请求获取数据。重点难点重点：router.beforeEach的使用、Axios的get方法；难点：理解导航守卫中next()函数的不同调用方式及其对导航流程的影响。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习嵌套路由的配置（5分钟）；2.引入课程内容：讲解如何保护特定路由不被未授权访问，以及如何从服务器获取数据（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解router.beforeEach钩子函数的三个参数（to,from,next）及其用法（10分钟）。(2)引入教材案例，讲解Axios的安装和在main.js中挂载到全局属性（30分钟）。(3)通过PPT及案例分析，演示使用this.$axios.get()或proxy.$axios.get()发送请求（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解路由拦截逻辑（10分钟）；(2)实践：配置路由守卫，实现未登录用户访问“用户中心”时跳转到登录页；使用Axios请求一个公开的API并打印数据（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解数据请求的基本流程（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：回顾路由守卫的拦截机制，总结Axios发送GET请求的语法。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2、预习Axios的POST请求和本地JSON数据请求。第25次课（2学时）课题Axios数据请求与本地JSON教学目的与要求1.掌握使用Axios发送POST请求提交数据；2.掌握在public目录下创建本地JSON文件并使用Axios请求，模拟后端API；3.理解GET请求中params参数的传递方式。重点难点重点：Axios的post方法、请求本地JSON文件；难点：理解POST请求的数据格式，以及在开发阶段使用本地JSON文件进行前后端分离开发的模式。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习Axios的GET请求（5分钟）；2.引入课程内容：讲解如何向后端提交数据，以及在后端接口未完成时如何进行前端开发（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解Axiospost方法的语法和参数（10分钟）。(2)引入教材案例，讲解在public目录创建db.json文件，并使用Axios请求该文件（30分钟）。(3)通过PPT及案例分析，讲解GET请求中通过params对象传递查询参数（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解数据提交和本地模拟（10分钟）；(2)实践：创建一个表单，通过POST请求提交数据；创建本地JSON文件，请求数据并在页面中渲染成列表（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解前后端数据交互（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：总结Axios的GET和POST请求，强调本地JSON模拟是前端开发的重要技巧。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2、预习Vite的基础知识。第26次课（2学时）课题Vite基础教学目的与要求1.理解Vite作为下一代前端构建工具的优势和工作原理；2.熟悉vite.config.js和package.json的核心配置；3.开始“课程列表和教师列表管理”案例的开发，完成项目初始化和路由配置。重点难点重点：Vite的特点、项目初始化、路由配置；难点：理解Vite的按需加载原理，以及项目整体架构的设计。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习Axios的使用（5分钟）；2.引入课程内容：讲解Vite为何比传统打包工具更快，并开始一个综合性的项目实战（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解Vite的两大核心：开发服务器的原生ES模块支持和生产环境的Rollup打包（10分钟）。(2)引入教材案例，解析vite.config.js的常用配置项（30分钟）。(3)通过PPT及案例分析，讲解“课程管理”案例的需求分析、组件划分和路由设计（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解项目结构（10分钟）；(2)实践：创建项目，安装ZUI等依赖，创建MainContentView,CourseView,TeacherView等组件，并配置好路由（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解项目搭建流程（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：回顾Vite的优势，总结项目实战的初始化步骤。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2、预习Vuex状态管理。第27次课（2学时）课题Vuex教学目的与要求1.完成“课程列表和教师列表管理”案例的组件开发，实现数据的增删和自定义指令；2.理解Vuex作为状态管理模式的作用和核心思想（单向数据流）；3.掌握在Vue项目中安装和配置Vuex。重点难点重点：案例功能实现、Vuex的安装与配置；难点：理解Vuex的单向数据流思想，以及State、Mutation、Action、Getter四大核心概念的职责划分。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习项目实战（一）的路由配置（5分钟）；2.引入课程内容：讲解当组件间共享状态变得复杂时，为何需要引入Vuex进行集中管理（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解“课程管理”案例中自定义指令v-rainbow的注册与使用（10分钟）。(2)引入教材案例，详细讲解Vuex的核心概念：State（状态）、Mutation（变更）、Action（动作）、Getter（获取器）（30分钟）。(3)通过PPT及案例分析，演示如何使用npminstallvuex@4安装并在main.js中挂载Store（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解自定义指令逻辑（10分钟）；(2)实践：完成“课程管理”案例的增删功能；创建一个新的计数器案例，配置Vuex，实现通过Mutation同步修改State（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解Vuex的基本工作流程（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：回顾Vuex的四大核心概念，强调Mutation必须是同步函数。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2、预习Vuex中Action和Getter的使用。第28次课（2学时）课题Vuex核心机制教学目的与要求1.掌握使用Action处理异步操作，并通过Commit提交Mutation；2.掌握使用Getter从State中派生出新的状态；3.了解使用mapState,mapMutations,mapActions,mapGetters辅助函数简化组件代码。重点难点重点：Action的异步处理流程、Getter的缓存特性；难点：理解Action不能直接修改State，必须通过Mutation；以及Getter的依赖缓存机制。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习Mutation的同步修改原则（5分钟）；2.引入课程内容：讲解如何处理异步逻辑（如API请求）以及如何复用和计算State中的数据（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解Action的定义和通过store.dispatch触发，以及在Action内部通过mit提交Mutation（10分钟）。(2)引入教材案例，演示在Action中使用setTimeout模拟异步操作（30分钟）。(3)通过PPT及案例分析，讲解Getter的定义和在组件中通过store.getters访问（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解异步操作流程（10分钟）；(2)实践：在计数器案例中，添加一个“5秒后增加”的Action；创建一个Getter来计算总数的两倍，并在组件中显示（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解Getter的复用性（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：总结Action处理异步、Getter派生状态的职责，介绍辅助函数可以简化代码。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2、预习Vuex的模块化。第29次课（2学时）课题Vuex模块化教学目的与要求1.掌握使用Modules将Store分割成模块，以管理大型应用的状态；2.理解命名空间（namespaced:true）的作用和使用方法；3.开始“虚拟用户管理系统”案例开发，完成Vuex的模块化设计。重点难点重点：Modules的注册、命名空间的使用；难点：在组件中通过模块路径（如counter/count）访问模块内的State、Getters、Mutations和Actions。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习Action和Getter的用法（5分钟）；2.引入课程内容：讲解当应用变得庞大时，单一Store文件会变得臃肿，需要使用模块化进行管理（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解如何创建模块文件（如modules/counter.js）并在主Store中注册（10分钟）。(2)引入教材案例，重点讲解namespaced:true的作用，以及如何在组件中访问命名空间模块（30分钟）。(3)通过PPT及案例分析，讲解“虚拟用户管理系统”案例的需求和模块划分（30分钟）。2.课堂实践：（50分钟）(1)分析案例，理解模块化结构（10分钟）；(2)实践：将计数器案例改造成模块化结构；开始搭建“虚拟用户管理系统”的VuexStore，创建user和counter模块（40分钟）。3.知识运用：（40分钟）(1)分析案例，理解模块化带来的好处（30分钟）；(2)点评：集中讲解共性问题（10分钟）。三、归纳小结时间分配：5分钟内容：回顾Vuex模块化的配置方法，强调命名空间可以避免不同模块间的命名冲突。课后学习任务布置1、课后作业：各小组在组长的组织下，拓展学习，完成教材中的代码。下课次抽查完成情况。2、预习uni-app跨平台开发框架。第30次课（2学时）课题uni-app初识与项目创建教学目的与要求1.了解uni-app“一次开发，多端发布”的跨平台开发理念；2.熟悉uni-app的项目目录结构，特别是pages.json和manifest.json的作用；3.掌握使用HBuilderX和命令行（VueCLI）两种方式创建uni-app项目。重点难点重点：uni-app的核心概念、pages.json配置、项目创建方式；难点：理解uni-app的跨平台运行时（runtime）机制，以及两种创建方式的项目结构差异。教学进程安排一、复习旧课，引入新课时间分配：15分钟内容：1.复习Vuex模块化（5分钟）；2.引入课程内容：讲解如何使用Vue技术栈开发小程序、App等多端应用（10分钟）。二、实施本次课教学内容时间分配：160分钟内容：1.知识讲解：（70分钟）(1)讲解uni-app的开发规范、生命周期和跨平台API（10分钟）。(2)引入教材案例，详细解析pages.json（页面路由、窗口样式、tabBar配置）和manifest.json（应用配置）（30分钟）。(3)通过PPT及案例分析，演示使用HBuilderX和vuecreate命令创建uni-app项目（30分钟）。2.课堂实践：（50分钟）(1)分析