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

教案课程名称Vue前端框架设计学时2序号9授课班级日期任课教师课题任务2：绑定Vue数据学习目标1.了解数据双向绑定的概念与核心逻辑，能够说出双向绑定与单向绑定的区别；2.理解MVVM模式的组成（Model、View、ViewModel）及各部分作用，能够描述数据在MVVM中的流转过程；3.熟练使用v-model指令实现数据双向绑定，结合MVVM模式开发简单计算器功能（支持加减乘除运算）；4.通过MVVM模式在国内互联网项目的应用案例，感受前端技术的高效性，培养工程化开发思维与技术应用能力。学习内容1.数据双向绑定的概念、核心逻辑及与单向绑定的区别；2.MVVM模式的组成（Model、View、ViewModel）及数据流转机制；3.v-model指令的基础用法（绑定输入框、单选框等元素）；4.基于MVVM模式的简单计算器需求分析与功能实现（界面搭建、数据绑定、运算逻辑）；5.计算器功能测试与调试方法。学习重难点重点：1.MVVM模式的组成与数据流转逻辑；2.v-model指令的用法与数据双向绑定实现。难点：计算器运算逻辑与数据绑定的结合。项目/任务子任务1：基于MVVM模型实现简单的计算器功能-MVVM模型教学资源准备课件、PPT、在线课程、教案

教学过程步骤教师活动学生活动时间1课程导入与回顾：（1）提问：1）之前学的v-bind是单向绑定，数据变化会影响视图，那视图变化能影响数据吗？2）为什么前端项目需要“数据与视图同步”的高效方式？（2）介绍本次课主题（数据双向绑定、MVVM、计算器开发）与学习目标。（1）思考并回答问题，回顾单向绑定知识，建立新旧知识关联（2）明确学习目标，了解MVVM模式的实际应用价值（3）记录课堂要求与考核重点，做好实操准备5分钟2知识讲解：数据双向绑定（1）概念：实现“数据变化→视图更新”与“视图操作→数据修改”的双向同步（2）对比单向绑定：用流程图展示“v-bind（数据→视图）”与“双向绑定（视图↔数据）”的差异（1）认真记录双向绑定与MVVM的核心概念，绘制简易流程图梳理数据流转逻辑（2）对比单向绑定与双向绑定的适用场景，标注重点10分钟3知识讲解：MVVM模式：组成：①Model（数据层，如Vue的data）；②View（视图层，如HTML界面）；③ViewModel（桥梁，如Vue实例，负责数据同步与事件处理）思政融入：介绍国内企业基于MVVM模式开发的大型项目（如政务服务平台表单、电商APP购物车），说明该模式对提升开发效率的作用，增强技术自信（1）理解MVVM的工作原理（2）了解基于MVVM模式的工程化价值（3）了解国内应用案例15分钟4知识讲解与实操：v-model指令（1）基础语法：：v-model="data变量名"（2）实操演示：①文本输入框绑定：定义data:{username:''}，绑定输入框后，输入内容实时查看data中username的变化（通过console.log输出）；②单选框绑定：定义data:{gender:'male'}，用v-model="gender"绑定两个单选框（value分别为'male'、'female'），切换单选框查看gender同步变化；（3）强调：v-model本质是“v-bind:value+v-on:input”的语法糖，简化双向绑定代码（1）记录v-model语法与本质，理解其简化作用（2）在HBuilderX中编写代码，实现输入框、单选框绑定案例，通过console.log验证数据同步效果（3）尝试修改变量值，观察视图是否同步更新，巩固双向绑定认知20分钟5提出任务：基于MVVM模式开发简单计算器分析任务：①界面（两个数字输入框、运算符号选择框、“计算”按钮、结果显示区）；②功能（支持加减乘除，输入变化或点击计算后实时显示结果，处理除数为0的异常）；③MVVM映射（1）理解计算器需求与MVVM的对应关系，绘制界面草图（2）记录开发步骤，明确每一步的核心任务（如数据定义、事件绑定）10分钟任务实施：搭建HTML界面；②定义data数据；绑定v-model与事件；编写运算逻辑；测试调试。（3）跟随演示分步编写代码（4）修改、完善代码（5）总结要点25分钟6归纳总结：（1）单向数据绑定与双向数据绑定的对比（2）V-Model的语法格式（3）MVVM模式学生利用思维导图的方式总结本节课所学知识点。5分钟教学反思通过逐步完善学生投票的功能，帮助学生认识到编程的严谨性、规范性，培养学生针对软件项目，要不断调优，精益求精的工匠精神。

教案课程名称Vue前端框架设计学时2序号10授课班级日期任课教师课题任务3：使用Vue内置指令学习目标1.理解v-on指令的核心作用，能够熟练使用完整语法与简写语法绑定常见DOM事件（如点击、输入、鼠标事件）；2.掌握常用事件修饰符（.stop、.prevent、.once等）的功能与使用场景，能够解决事件冒泡、默认行为等问题；3.能够结合v-on与事件修饰符开发简单交互功能（如按钮点击计数、表单提交控制），培养规范的事件处理思维；4.通过了解v-on指令在国内前端项目（如电商按钮交互、政务系统表单）中的应用，增强技术应用能力与职业认同感。学习内容1.v-on指令的核心概念、完整语法与简写语法；2.常见DOM事件绑定及事件处理函数定义；3.常用事件修饰符的功能、语法与应用场景；4.事件修饰符的组合使用。学习重难点重点：1.v-on指令的简写语法与常见事件绑定（如click、input）；2.常用事件修饰符（.stop、.prevent、.once）的功能与使用；3.结合v-on与事件修饰符实现基础交互功能。难点：1.理解事件冒泡原理及.stop修饰符的作用；2.区分.prevent修饰符与手动取消默认行为的差异。项目/任务子任务1：使用Vue框架实现跑马灯效果-事件监听教学资源准备课件、PPT、在线课程、教案

教案教学过程步骤教师活动学生活动时间1复习提问：（1）之前开发计算器时，点击“计算”按钮是如何触发逻辑的？（2）如果需要实现“输入内容实时显示”“点击按钮修改数据”，该用什么技术？思考并回答问题，回顾前期交互功能开发经验，建立新旧知识关联10分钟2提出任务：事件监听演示与讲解：v-on指令基础用法（1）核心概念：v-on指令用于给DOM元素绑定事件，实现“用户操作→函数执行”的交互逻辑，支持所有原生DOM事件（2）语法规则：完整语法：v-on:事件名="事件处理函数"（如v-on:click="handleClick"）简写语法：@事件名="事件处理函数"（常用，省略“v-on:”）（1）明确任务（2）掌握事件监听的作用（3）记录v-on的语法（完整+简写）与事件处理函数定义方式15分钟3（3）实操演示：①点击事件（click）：用@click="handleClick"绑定按钮，点击后实时显示计数；②输入事件（input）：定义data:{inputValue:''}与handleInput(val){this.inputValue=val.target.value}，用@input="handleInput"绑定输入框，输入内容同步显示；（4）参数传递：演示给事件处理函数传参（如@click="handleAdd(2)"），说明无参数时可省略括号动手实践：（1）测试函数执行与参数传递效果（2）尝试绑定其他事件（如@mousemove鼠标移动事件），观察交互效果20分钟4知识讲解与实操：常用事件修饰符（1）事件冒泡原理：用示意图演示“子元素点击事件触发父元素相同事件”的现象（如嵌套div的click事件），说明冒泡可能导致的问题（2）常用修饰符讲解与演示：①.stop：阻止事件冒泡-语法：@click.stop="handleChildClick"-演示：未加.stop时子元素点击触发父元素事件，添加后仅触发子元素事件；②.prevent：阻止事件默认行为（如表单提交刷新页面、a标签跳转）-语法：@submit.prevent="handleSubmit"或@click.prevent="handleLinkClick"-演示：表单不加.prevent时提交刷新页面，添加后仅执行自定义函数；③.once：事件仅触发一次-语法：@click.once="handleOnceClick"-演示：点击按钮仅第一次执行函数，后续点击无效；（3）组合使用：演示.stop.prevent（如阻止冒泡同时阻止默认行为）（1）理解事件冒泡原理，记录各修饰符的语法与功能（2）在HBuilderX中实现每个修饰符的案例，对比添加前后的效果差异（如冒泡是否阻止、默认行为是否生效）（3）测试修饰符组合使用，验证功能正确性20分钟5案例演示：（1）步骤1：搭建界面（2）步骤2：定义数据与函数（3）步骤3：绑定指令与修饰符（1）理解案例需求