Vue 3前端框架应用项目教程（微课版）教案7

教案课程名称Vue前端框架设计学时2序号13授课班级日期任课教师课题任务3：使用Vue内置指令学习目标1.了解v-for指令的核心作用，能说出其“循环渲染列表数据”的基本语法及key属性的必要性；2.理解购物车功能的核心模块（商品列表展示、数量修改、删除商品、计算总价），能梳理各模块的实现逻辑；3.熟练使用v-for指令渲染购物车商品列表，结合Vue响应式数据与事件绑定，完成购物车完整功能开发；4.通过购物车实践，培养前端“数据驱动界面”的开发思维，提升复杂功能的拆解与实现能力，增强技术应用信心。学习内容1.v-for指令：基础语法（遍历数组/对象）、key属性的作用（提高渲染效率、避免DOM复用问题）、遍历过程中获取索引；2.购物车数据结构：定义商品列表数组（包含id、name、price、num等属性）；3.购物车功能实现：学习重难点重点：1.购物车商品列表的v-for渲染实现；2.购物车数量修改、删除商品的事件绑定逻辑；3.购物车总价的计算方法。难点：1.key属性的作用原理（避免DOM复用导致的异常）；2.购物车空状态的判断与提示显示。项目/任务子任务2：使用Vue框架实现购物车功能v-for指令教学资源准备课件、PPT、在线课程、教案教学过程步骤教师活动学生活动时间1复习提问：1）电商网站的商品列表是如何“批量渲染”的？2）购物车中修改商品数量后，总价如何自动更新？思考问题，结合日常购物体验尝试回答，发现知识需求。5分钟2子任务2：使用Vue框架实现购物车功能讲解并演示：（1）讲解v-for基础语法：遍历数组：iteminlist（item为数组元素）、(item,index)inlist（index为索引）；强调key属性：给循环元素添加key="唯一标识"（如item.id），演示“有无key属性”的DOM渲染差异；（1）记录v-for语法格式，标注key属性的必填性；（2）跟随编写代码，观察key属性对DOM渲染的影响，理解其作用。20分钟3任务实施：1.搭建购物车基础界面（1）确定界面结构：用HTML表格搭建购物车（表头：商品名称、单价、数量、小计、操作；表体：预留v-for渲染位置；底部：总价显示+空状态提示）；（2）用CSS美化界面：设置表格边框、padding、按钮样式，隐藏初始空状态提示（.empty{display:none;}）。（1）跟随老师编写界面代码，完成购物车界面搭建；（2）调整样式细节（如颜色、间距），确保界面清晰美观。20分钟42.用v-for渲染购物车商品列表（1）在Vue的data中定义购物车数据：cartList:[{id:1,name:'Vue实战教程',price:59,num:1},{id:2,name:'编程鼠标垫',price:29,num:2}]；（2）用v-for遍历cartList渲染表格体：<trv-for="(item,index)incartList":key="item.id">，绑定商品名称{{}}、单价{{item.price}}等信息；（3）计算商品小计：{{item.price*item.num}}，渲染到对应单元格。（1）定义购物车数据；（2）理解数据结构的设计逻辑；（3）编写v-for渲染代码，验证商品列表与小计是否正确显示。20分钟5实现购物车核心功能（1）数量修改功能：给“+”“-”按钮绑定点击事件：@click="changeNum(index,1)"（1为增加，-1为减少）；在methods中定义changeNum方法：根据index找到商品，修改num（判断num≥1时才能减少（2）计算总价可以使用computed或methods方法来计算总价结果保留两位小数（1）跟随老师编写数量修改功能代码；（2）跟随老师编写计算总价功能代码；（3）注意细节处理：结果保留两位小数。20分钟6归纳总结：（1）v-for指令的使用（2）购物车的逻辑学生利用思维导图的方式总结本节课所学知识点。5分钟教学反思通过逐步完善学生投票的功能，帮助学生认识到编程的严谨性、规范性，培养学生针对软件项目，要不断调优，精益求精的工匠精神。

教案课程名称Vue前端框架设计学时2序号14授课班级日期任课教师课题任务4：构建Vue组件学习目标1.理解组件的概念与作用，能清晰区分组件与普通HTML元素的差异；2.掌握组件的基本使用流程（定义、注册、使用），能独立编写简单功能组件；3.熟练掌握全局组件的注册方法与应用场景，能在项目中灵活复用全局组件；4.通过分析国内Vue生态的发展成果（如ElementUI、AntDesignVue等），增强对国产前端技术的认同，培养技术自信与职业责任感。学习内容1.组件的定义、特性；2.组件的基本使用3.全局组件注册语法、应用场景。学习重难点重点：1.组件的基本使用流程；2.全局组件的注册语法与复用逻辑；难点：理解组件的独立性（数据隔离、样式作用域）；项目/任务子任务1：创建“HelloWorld”全局组件教学资源准备课件、PPT、在线课程、教案

教案教学过程步骤教师活动学生活动时间1课程导入与问题引导（1）提问：1）修改网页中10个相同的“按钮”样式，逐个修改是否繁琐？2）如何让相同功能的代码“写一次，用多次”？（2）引出“组件”概念，说明其在HTML5+CSS3开发中的核心价值；（3）明确本次课3个核心内容（组件简介、基本使用、全局组件）。（1）结合前序HTML/CSS知识思考问题，举手分享答案；（2）记录本次课核心内容，明确学习方向。5分钟2提出任务：创建“HelloWorld”全局组件知识讲解：组件简介（1）组件定义（2）核心特性：复用性、独立性、可维护性（3）对比普通元素：以“按钮”为例，普通按钮需重复写CSS，组件按钮仅需调用已封装的代码。（1）记录组件定义与三大特性；（2）标注与普通元素的差异。15分钟3知识讲解与演示：组件的基本使用讲解组件使用流程：（1）定义组件（2）注册组件（3）使用组件动手实践：（1）编写代码实现组件的基本使用（2）通过实践来体会组件的使用流程15分钟4（1）布置练习：基于“简易按钮”组件，添加“鼠标悬停变色”样式；（2）巡视指导，重点解决CSS选择器与样式优先级问题。（1）独立编写代码，完成练习10分钟5知识讲解与演示：全局组件（1）全局组件定义；（2）核心特性：一次定义，跨页面复用；（3）与局部组件对比。动手实践：（1）理解什么是全局组件（2）编写代码实现全局组件的创建与调用20分钟6任务实施：（1）要求：1）自定义组件样式；2)在2个个不同页面中调用并预览；（2）巡视指导，重点解决组件路径引用错误、样式不生效问题；（3）收集学生常见问题，统一讲解解决方法。（1）独立完成组件开发与多页面调用，遇到问题举手提问；（2）完成后，截图展示2个页面的组件效果。20分7归纳总结与疑问解答（1）组件三大特性：复用、独立、可维护；（2）组件使