《Vue企业开发实战》电子教案16-事件与v-model表单

《网站开发技术（VUE）》·教案16第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目6模板语法与常用指令授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目6的任务3、任务4。掌握v-on与修饰符、v-model在表单控件上的用法及lazy/trim等修饰符，能完成含事件与表单的页面。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3方法与事件v-on；事件处理方法；常用修饰符教材6.3任务4v-model与表单基本用法；文本/单选/复选/下拉；lazy、trim；Vue3中的特点教材6.4三、学情分析学生已能渲染列表，但点击、输入仍不会接到数据上。本课要求能绑定点击，能用v-model收集表单，达到项目6“含列表、条件、表单的页面”合格标准。四、教学目标（一）知识目标1.掌握v-on与常用修饰符。2.掌握v-model在常见表单控件上的用法。3.了解lazy、trim等修饰符。（二）能力目标1.能为按钮绑定方法并传参。2.能用v-model收集文本和选项。3.能完成合计总价或简单下单表单练习。（三）素质目标1.培养表单校验意识。2.事件处理不写进模板长逻辑。3.规范操作。五、教学重点与难点类型内容突破办法重点v-model双向绑定输入立刻反映到数据重点点击事件改数据数量加减驱动合计难点复选框数组绑定对照value与数组包含关系六、教学方法与准备方法：表单案例、边改边看数据、理实一体。导入用“选数量、填手机号”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示选数量和提交。提问：输入框的值存在哪？点击加号谁在改它？引出事件与v-model。回忆原生oninput/onclick。用下单动作定义本课。明确学习目标出示目标：会事件、会表单绑定，能做合计或切换。对照目标勾画。对准课标合格标准。任务3–4讲解讲v-on/@、方法传参、.prevent等修饰符。讲v-model在文本、radio、checkbox、select上的差异及lazy/trim。跟写数量加减和输入框。指令组合才能形成页面。上机练习完成合计总价或布局切换（教材作业方向）：事件改数据，v-model收集输入。可与列表、条件组合。独立完成可交互小页。作为项目6的综合证据。小结与作业回扣：条件、列表、事件、表单可组合。预告项目7把页面拆成组件。保存页面，记录作业。结束指令项目，转向组件化。课堂检测：①@click与v-on:click是什么关系？②v-model在复选框上绑定的常常是什么类型？③trim修饰符解决什么问题？八、上机任务与评价练习任务要求合格标准常见问题上机1按钮事件实现数量加减或切换点击后数据与视图同时变在模板里写复杂运算、未写方法上机2表单v-model收集输入并用于合计或提交展示输入与数据双向同步只改DOM、未绑v-model过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.实现合计总价页面（教材作业1方向）。2.完成布局切换（教材作业2方向）。书面作业：说明本课页面用到了哪些指令、各解决什么问题；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：__________________________________