Vue.js3前端开发基础及项目化应用教案单元2基础语法_教学设计.docx

Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前开发基础及项©化应用授课年级：授课学期：学年第一学期一教师找名：2023年09月09日课题名称单元2基础语法计划学时6学时内容分析数据驱动是Vue的核心思想之一。理解和掌握VUe应用中如何通过操作数据来同步视图的更新，是学习VUe框架的最基础，也是非常重要的内容。本单元将介绍与实现数据驱动相关的基础语法，包括模板语法、数据绑定、流程控制、事件处理，计算属性和数据监听器。通过“简易计算器”和“历史名城典故页面”任务，来让学习者进一步理解和掌握基础语法。教学目标及基本要求1 .掌握模板语法中插值和常用指令的使用方法2 .掌握计算属性和数据监听器的使用3 .能够实现单向绑定和双向绑定4 .能够实现事件处理教学重点1 .掌握模板语法中插值和常用指令的使用方法2 .能够实现单向绑定和双向绑定3 .能够实现事件处理教学难点能够实现单向绑定和双向绑定教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时(剖析Vlle应用程序，单向数据绑定、双向数据绑定)一、创设情境，引入ViIe应用的原生HTML开发方式1 .教师通过应用场景描述，引出VUe应用的原生HTML开发方式VUe应用的开发方式有原生HTML开发、以组件嵌入网页、单页应用(SinglePageApplication,SPA)或服务器端渲染几种，为了帮助学习者尽快入门，单元2单元9将结合原生HTML开发方式，讲解VUe所提供的各个功能的应用。单元10、单元11则采用单页应用方式结合快速搭建工具构建工程化前端项目。2 .明确学习目标,> 了解VUe应用的程序结构> 了解Vue应用程序编写的相关概念> 理解数据绑定的基本原理> 掌握单向和双向数据绑定的用法二、进行重点知识的讲解1.教师根据课件，介绍VUe应用程序的结构，讲解VUe应用程序编写要素，并使用代码进行演示。（1） VUe应用程序的典型结构Vue是基于标准HTML、CSS和JaVaSCriPt构建用户界面（2） VUe应用程序编写要素/导入VUe库文件/选择挂载点,声明演染数据的HTML代码结构/利用JaVaSCriPt定义数据和操作数据/创建Vue应用实例和进行挂载处理2 .教师根据课件，讲解VUe程序开发相关概念。（1）模板语法/插值语法JavaScript表达式/指令语法指令:参数二"表达式”（2）响应式数据。组件data选项中定义的数据均具有响应性。（3）挂载点。挂载点用于指定数据将被渲染的位置。（4）使用CDN方式导入VUe库文件使用CDN方式导入Vue库文件时，Vue的全局API均暴露在全局Vue对象上，即需要使用“Vue.函数名”方式来调用3 .教师根据课件，讲解模板语法中数据绑定的原理，单向数据和双向数据绑定的用法，并使用代码进行演示。（1）数据绑定数据绑定分为单向和双向两种，其中单向绑定指的是数据改变会带动视图更新，但视图改变不会影响数据；双向绑定则是指数据与视图相互影响。（2）单向数据绑定语法和应用/插值表达式语法：VaScript表达式/v-html语法：v-html="JavaScript表达式”/v-text语法：v-text="JavaScript表达式"/v-bind语法：vbind:属性名="JavaScript表达式”（3）双向数据绑定语法和应用v-model语法：v-model="JavaScript表达式三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括Vue应用程序结构,相关的模板语法、挂载点、响应式数据等概念，单向数据/双向数据绑定的语法规则和使用方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时(条件渲染、列表渲染、事件监听)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了VUe应用程序结构，模板语法、挂载点、响应式数据等概念，单向数据/双向数据绑定的语法规则和使用方法。接下来,本节课将介绍如何利用条件渲染和列表渲染实现程序的分支和循环控制，以及事件处理机制的应用。3 .明确学习目标。> /解条件渲染语法规则，掌握其应用方法> 了解列表渲染语法规则，掌握其应用方法> r解事件处理机制，掌握事件处理的实现二、进行重点知识的讲解1.教师根据课件，介绍条件渲染语法，并使用代码进行演示。(1) v-if/v-else/v-else-if语法和应用v-if="JavaScript表达式"、v-else="JavaScript表达式”、v-else-if="JavaScript表达式(2) vshow语法和应用v-show="JavaScript表达式”(3) v-if/v-else/v-else-if和v-show比较两者演染方式，导致两者性能上存在差异，如果需要频繁地进行切换,选择v-show会比较好，如果渲染条件很少改变，则选择V-if更佳。2.教师根据课件，介绍列表渲染的语法，并使用代码进行演示。(1)列表渲染语法v-for=,'(item,i_key,index)in对象名''v-bind:key="item.id"(2)列表渲染的应用2.教师根据课件，介绍事件处理机制，并使用代码进行演示。(1)事件处理机制事件监听采用v-on指令为DOM元素绑定监听器，以监听DOM事件和触发事件处理代码的执行。(2)事件处理实现语法v-on指令语法为v-on:事件名="表达式”，语法中“von:"可简写为(3)事件处理的具体实现三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的条件渲染、列表渲染语法，利用条件和列表渲染分别实现分支和循环控制结构，事件处理机制以及基本实现方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时(事件修饰符、计算属性、数据监听器)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了利用条件渲染和列表渲染实现程序的分支和循环控制的具体方法，以及事件处理机制概念，事件监听和事件处理的实现。接下来，本节课将进步介绍事件处理机制中的事件修饰符应用，计算属性的用法，以及数据监听器的用法。3 .明确学习目标。> 了解常用的事件修饰符的作用> 掌握常用事件修饰符的应用方法> 掌握计算属性的应用方法> 掌握数据监听器的应用方法二、进行重点知识的讲解1 .教师根据课件，介绍事件处理机制中事件修饰符的使用方法，并使用代码进行演示。(1) Vue事件修饰符.stop：阻止事件冒泡。.self：只有当前元素本身有事件触发时，才调用事件处理函数。.prevent：阻止默认事件。,capture：使用捕获模式添加事件监听器。.once：实现事件只被触发一次。.passive：以passivertrue卜模式添力事件监听器。(2) VUe事件修饰符的应用2 .教师根据课件，介绍计算属性的用法，并使用代码进行演示。(1)计算属性的作用专门用于描述依赖响应式数据的复杂逻辑处理(2)计算属性的语法computed:一计算属性名：定义计算属性get:function()/getter函数return.响应式数据的相关逻辑，返回处理结果)/set:function(newValue)/setter函数.更改响应式数据(3)计算属性的应用3 .教师根据课件，介绍数据监听器的用法，并使用代码进行演示。(1)数据监听器的作用可对数据进行监听，一旦数据发生变化，则触发相应函数的执行，以达到改变其他数据的目的。(2)数据监听器的语法watch:(属性名：function(newVlue,OldValue)/函数声明方式.改变其他数据的业务逻辑代码属性名：(对象声明方式handler(newValue,OldValUe)监所处理函数.改变其他数据的业务邃辑代码deep:true/false,/是否深度监听immediate:true/false是否立即问用监听处理函数)(3)数据监听器的应用三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括事件修饰符的作用，事件修饰符的应用方法，计算属性的作用和应用方法，数据监听器的作用和应用方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时（基础语法在项目中的实际应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了事件处理机制中的事件修饰符应用，计算属性的用法，以及数据监听器的用法。接下来，本节课将通过实际应用项目，讲解单向和双向绑定、条件渲染，以及数据监听器等基础语法的综合应用帮助学习者进步掌握相关基础语法的使用方法。3 .明确学习目标。掌握数据绑定的使用方法> 掌握事件监听和事件处理的实现方法> 掌握计算属性和数据监听器的使用方法二、进行重点知识的讲解1.教师根据课件，介绍项目2-1一”简易计算器”项目的需求描述、实现思路和代码实现。（1）需求描述网页版简易计算器包括操作数输入框、运算符下拉列表框和计算处理按钮。用户输入操作数，选择运算符，单击“计算''按钮，按钮下方应显示运算结果。运算符包括+、*、/、*,除平方值运算外，其他运算的操作数均为两个。（2）实现思路/采用输入框（input）>下拉列表框（select）和按钮（button）,分别构建计算器的操作数输入框、运算符下拉列表框，以及计算处理按钮。/对表单元素input>select的数据绑定需要使用双向绑定，计算结果值则利用插值表达式呈现即可；针对“计算''按钮的单击事件，编写事件处理函数以实现计算器的计算功能。/除求平方运算外，其他运算均需要提供两个操作数，也就是说求平方运算需要隐藏第二个操作数，可使用v-show指令来实现这个功能。（3）功能实现任务构建页面布局任务2-1-2创建根组件和Vue应用实例三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括单向和双向绑定、条件渲染，事件处理以及数据监听器的用法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第五课时（基础语法在项目中的实际应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了单向和双向绑定、条件渲染，事件处理以及数据监听器，在实际项目的综合应用。接下来，本节课将通过实际应用项目，讲解列表渲染、事件处理机制等基础语法的综合应用，帮助学习者进步深入掌握相关基础语法的使用方法。3 .明确学习目标。>掌握事件监听和事件处理的实现方法掌握列表渲染的使用方法二、进行重点知识的讲解1 .教师根据课件，介绍项目2-2一一“历史名城典故页面”项目的需求描述、实现思路和代码实现。（1）需求描述历史名城典故页面包括左侧城市列表和右侧名城典故内容，当用户选择左侧城市列表中某个城市时，应能够在右侧名城典故内容部分显示对应的名城典故信息。（2）实现思路/采用列表（ul、Ii）、区块（div）元素，分别构建城市列表和名城典故内容。/使用v-for.v-text指令和列表元素实现城市列表效果；使用v-on指令为列表中每个城市选项绑定事件，以监听该选项的单击事件，并利用对应的事件处理函数实现名城典故的呈现。（3）功能实现任务2-2-1构建页面布局任务2-2-2创建根组件和Vue应用实例三、归纳总结，布置课后作业2 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括列表渲染、事件处理机制，事件监听和事件处理的用法。3 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。4 .使用在线学习平台下发课后作业。第六课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：请利用v-modekv-if指令实现学情问卷调查页面效果。下图（a）所示的是程序运行的初始效果，当用户输入调查内容并单击“提交”按钮后将显示调查结果，如下图（b）所示。提示：“性别”“你已学习的语言”可分别使用type为radio、checkbox的input元素来构建。学情调查问卷学情调查问卷姓名性别。男。女你已学习的语言JavaDPHPPython你感兴趣的框架J你的建议姓名张三性BU用男女你已学习的遥言。Java口PHPPython你感兴趣的框架Vue你的建议建议JaM）-空买标项口文例慎交:调查结累姓名:张三性别:男你已学习的语言:Java语言，PHP言你感兴趣的框架:Vue你的建议:建议am实际项目案例（a）程序运行的初始效果（b）显示调查结果形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和习题教学后记见教材单元2配套的习题