Vue.js3.x前端开发技术与实战-教案全套第1--12章Vue.js概述---网络请求库Axios与JSON.docx

ue.js3.x前端开发技术与实战MftM MRB:MlMn!tHS11*MltM9.Mf g”A-3j三ttH3KHlIhttXT Rtje例：/0i;用阿IrnU然迷史".授课内容第1章VUe.js概述(§1.1§1.4)第2章Vue.js基础(§2.L1§2.2.4)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)掌握常用的Vue.js开发工具。(2)掌握Vue.js页面的基本组成。(3)学会使用Vue.js3.X编写简易的单页面应用。(4)掌握ECMASCriPt基础语法。(5)理解MVVM模式的工作机制。(6)掌握多种类型数据绑定的方法。授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段学会Vue.js生产环境配置回篁点Ot点结合实际操作演示，介绍Vue主要开发环境工具，以及各种插件的安装。掌握VlJE页面基本结构口重点匚怫点用简单的案例介绍vue页面的基本结构，重点讲解Vue实例的构成。掌握ECMAScript基础语法回重点回难点通过对比法讲解Ietxvarconst定义变量的区别。掌握数据绑定与插值RM点匚傩点通过案例介绍数据绑定的方法，借助DevTools帮助学生理解Vue实例如何控制视图中的数据显示。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程一、课程概况简述课程性质、考核方式、培养目标达成要求。二、授课内容第1章VueJsMiS（1课时）1. 1Vue.js简介1.1 .1Vue.js发展简史1.1.2Vue3新特性简介1.2 Vue.js生产环境配置1. 2.1VUe.js引入方法1.1.1 2.2安装VUeDeVtoOIS（重点介绍支持devtools的浏览器工具，例如Firefox、Edge等。通过实际操作演示教学。）1.1.3 Node.js环境配置1.1.4 创建第一个VUe单页程序分别使用VUe2.7和Vue3.x来创建项目，比较编程方法的差异性。1.3 Vuajs开发工具1.3 .1VisualStudioCode1.4 .2HBuilderX1.4 ECMAScript6.0基础I .4.1Iet和COnSt（通过比较法讲解）II 4.2解构赋值III .3箭头函数IV 4.4展开运算符V .4.5模板字符串第2章Vue.js基础2. 1MVVM模式2. 1.1MVVM模式简介2.1. 2MVVM模式的前端框架发展趋势2. 1.3MVVM模式的应用采用选项式APl编程风格，结合案例讲解。2.2数据绑定与插值2.2.1文本绑定2.2.2HTML代码绑定2.2.3属性绑定2.2.4JaVaSCriPt表达式绑定案例教学：【例1-1】【例人3、【例21】【例23】思政教学1.通过前端岗位介绍，培养学生树立远大职业理想，明确专业岗位工作内容的社会价值，自觉将职业生涯、职业发展脉络与国家发展的历史进程融合起来。2.梳理前端框架发展现状，介绍Vue.js的独立开源开发者一中国籍作者尤雨溪，向学生展示中国开发者在前端技术领域的成就，增强使命感与荣誉感。党的十八届五中全会通过的“十三五”规划建议，明确提出实施网络强国战略以及与之密切相关的“互联网+”行动计划。通过我国华为孟晚舟事件和法国阿尔斯通全球负责人弗雷德里克皮耶鲁齐事件的对比，使学生明白关键技术必须掌握在国人自己手中，激发学生技术报国的理念和热情。授课小结本节课主要掌握开发环境及插件的安装，掌握VUe.js页面的基本结构，将页面基本结构和MVVM模式对应起来，并掌握数据绑定与插值方法。ECMAScript基础是难点，需要深入研究。清览题库或学银在线教学平台上的第1单元单元测验，练习1授课内容第2章Vue.js基础(§2.3-§2.5)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)掌握计算属性与方法在使用上的区别。(2)学会使用侦听属性处理数据变化的相关事务。(3)理解生命周期钩子函数在使用上的差异性。授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段掌握计算属性与方法回直点匚傩点在OptionsAPI编程风格下,通过案例代码介绍计算属性computed和方法methods的用法，重点对比二者在使用上的区别。Watch的用法回重点匚怫点在OptionsAPI编程风格下，通过案例代码介绍watch的基本用法和高级用法，包括深度监听的使用环境。理解生命周期钩子函数回重点口«点通过案例代码介绍生命周期钩子的使用方法和应用场景。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3思政教学从MVC模式演变到 MVVM模式，从前端 技术发展，引导学 生深刻理解与认识 所学前端开发技术 对于国家信息产业 发展、智慧城市建 设、大数据智能信 息处理等各方面的 重要意义，让学生 在学习过程中逐渐 树立专业荣誉感。授课具体内容及实施过程一、学情回顾简述MVVM模式在Vue.js上的对应关系，同顾数据绑定的几种用法。三、授课内容2.3 计算属性与方法(1)计算属性基础应用：例2-4介绍计算属性computed作为Vue实例的配置语法和使用场景，对比data和ComPUted中数据的区别，强调data原生数据属性以及computed的缓存和计算依赖属性。(2)计算属性缓存与方法比较：【例2-4】VUe-2-4.html,介绍方法methods作为Vue实例的配置的基本语法，重点对比computed和methods的区别。总结(3)计算属性的setter和getter0【例2-5vue-2-5.html,通过更新图书/定价信息的来介绍如何定义setter和getter2.4 侦听属性WATCH2.4.1重点介绍WatCh属性基本用法【例2-6】VUe-2-6.htmlWatCh可以为实例添加被观察的对象，并在对象被修改时调用设计人员自定义的方法。2.4.2重点介绍watch属性高级用法例27vue-2-7.html重点将immediate属性(数据绑定初值就调用方法)和deep属性(数据的属性改变也会调用方法)2.5生命周期钩子函数2.5.1生命周期钩子函数作用2.5.2生命周期钩子函数应用，【例2-8：IVUC-2-8.html对所有钩子进行讲解授课小结重点介绍Vue实例中computed、methodswatch等不同的选项配置语法，理解生命周期钩子函数的意义，并学会应用。习题练习2中选择题授课内容第2章Vue.js基础(§2.6-§2.7)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)掌握数据中数组对象的变异与非变异方法(2)学会使用console对象的相关方法授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段掌握VUe中数组变动更新匚值点口难点借助调试工具Clevtools讲解和演示能够引起视图更新和不引起视图更新的多种数组方法，通过对比掌握这些方法。掌握控制台对象的相关方法回堂点口点通过控制台对象的相关方法来输出相关信息，帮助用户分析和查找程序运行中的出现的错误教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程思政教学1.综合利用第 二章知识点创建 Vue实例，让学 生通过案例将理 论知识和实践内 容联系起来，培 养他们独立解决 问题的能力和提 高动手能力。2.通过对比计 算 属 性 computed 和方 法methods在使 用上的不同，使 学生掌握两种选 项配置的区别和 使用环境，锻炼 他们学会一题多 解来实际工程问 题。一、课程回顾在选项式API编程中，Vue实例中的WatCh、methodscomputed等选项配置、钩子函数的应用及控制台对象的方法的使用。二、授课目标2.6VUC中数组变动更新一有三种可以引起视图变化的方法：iJvue-2-13.html 使用Vue全局方法Vue.set()或者使用instance.$Set()实例方法。 使用数组变异方法。例如PUSh()、unshift()>splice。、popOshift()>sort()>reverseO<> 使用非变异方法。例如filter。、concat()>slice()<,通过例2-9实战案例讲解，加深数组变异方法和非变异方法的对数组内容的影响。结论：变异方法改变了数组内容，非变异并不改变数组内容，但生成的新数组会引发视图更新。2.7学会使用控制台CONSOLE对象【例2-10vue-2-10.html2. 7.1显示信息的命令console.IogO、console,info()、console,debug()、console,wan()、console,error()3. 7.2占位符,占位符的种类比较少，只支持字符(%s)、整数(%d或%i)、浮点数(%f)、对象(%。)和CSS样式(%c)4. 7.3分组显示console,group()>console.groupEnd()5. 7.4查看对象的信息COnSOIe.dir()通过【例2-10】实战案例操作演示以上相关方法，让学生加深对方法的理解与运用。授课小结掌握数组变动更新的多种方法，学会运用ConSOlC对象的方法来辅助项目调试。习题清览题库第2单元测验、练习2中填空题和简答题。授课内容第3章Vue.js指令(§3.1-§3.2)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)理解VueJs指令的定义与分类。(2)掌握条件渲染指令的使用与注意事项。(3)掌握列表渲染指令v-for的多种定义方法及与key属性配合使用的方法。授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段条件渲染圭点口点介绍V-ifv-e1se-ifv-e1se等指令用法，并结合“成绩百分制转五级制”进行演示。用key管理可复用的元素Bj重点点重点介绍Vue2.X与Vue3.x中使用的差异性。结合案例演示不同Vue版本对key的要求是不同。根据条件展示元素v-show回重点匚摊点对比V-ShOW和v-if的区别，讲解指令应用环境的不同列表渲染v-for指令回堂点。1点讲解各种