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

《Vue.js3.x前端开发技术与实战-教案全套第1--12章Vue.js概述---网络请求库Axios与JSON.docx》由会员分享，可在线阅读，更多相关《Vue.js3.x前端开发技术与实战-教案全套第1--12章Vue.js概述---网络请求库Axios与JSON.docx（57页珍藏版）》请在课桌文档上搜索。

1、 ue.js3.x前端开发技术与实战MftM MRB:MlMn!tHS11*MltM9.Mf g”A-3j三ttH3KHlIhttXT Rtje例：/0i;用阿IrnU然迷史.授课内容第1章VUe.js概述(1.11.4)第2章Vue.js基础(2.L12.2.4)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)掌握常用的Vue.js开发工具。(2)掌握Vue.js页面的基本组成。(3)学会使用Vue.js3.X编写简易的单页面应用。(4)掌握ECMASCriPt基础语法。(5)理解MVVM模式的工作机制。(6)掌握多种类型数据绑定的方法。授课重点、难点、方法与手段主要知识点重难点标

2、识授课方法与手段学会Vue.js生产环境配置回篁点Ot点结合实际操作演示，介绍Vue主要开发环境工具，以及各种插件的安装。掌握VlJE页面基本结构口重点匚怫点用简单的案例介绍vue页面的基本结构，重点讲解Vue实例的构成。掌握ECMAScript基础语法回重点回难点通过对比法讲解Ietxvarconst定义变量的区别。掌握数据绑定与插值RM点匚傩点通过案例介绍数据绑定的方法，借助DevTools帮助学生理解Vue实例如何控制视图中的数据显示。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT

3、课件参考教材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和Vu

4、e3.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.4JaVaSCr

5、iPt表达式绑定案例教学：【例1-1】【例人3、【例21】【例23】思政教学1.通过前端岗位介绍，培养学生树立远大职业理想，明确专业岗位工作内容的社会价值，自觉将职业生涯、职业发展脉络与国家发展的历史进程融合起来。2.梳理前端框架发展现状，介绍Vue.js的独立开源开发者一中国籍作者尤雨溪，向学生展示中国开发者在前端技术领域的成就，增强使命感与荣誉感。党的十八届五中全会通过的“十三五”规划建议，明确提出实施网络强国战略以及与之密切相关的“互联网+”行动计划。通过我国华为孟晚舟事件和法国阿尔斯通全球负责人弗雷德里克皮耶鲁齐事件的对比，使学生明白关键技术必须掌握在国人自己手中，激发学生技术报国的理

6、念和热情。授课小结本节课主要掌握开发环境及插件的安装，掌握VUe.js页面的基本结构，将页面基本结构和MVVM模式对应起来，并掌握数据绑定与插值方法。ECMAScript基础是难点，需要深入研究。清览题库或学银在线教学平台上的第1单元单元测验，练习1授课内容第2章Vue.js基础(2.3-2.5)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)掌握计算属性与方法在使用上的区别。(2)学会使用侦听属性处理数据变化的相关事务。(3)理解生命周期钩子函数在使用上的差异性。授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段掌握计算属性与方法回直点匚傩点在OptionsAPI编程风格

7、下,通过案例代码介绍计算属性computed和方法methods的用法，重点对比二者在使用上的区别。Watch的用法回重点匚怫点在OptionsAPI编程风格下，通过案例代码介绍watch的基本用法和高级用法，包括深度监听的使用环境。理解生命周期钩子函数回重点口点通过案例代码介绍生命周期钩子的使用方法和应用场景。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3思政教学从MVC模式演变到 MVVM模式

8、，从前端 技术发展，引导学 生深刻理解与认识 所学前端开发技术 对于国家信息产业 发展、智慧城市建 设、大数据智能信 息处理等各方面的 重要意义，让学生 在学习过程中逐渐 树立专业荣誉感。授课具体内容及实施过程一、学情回顾简述MVVM模式在Vue.js上的对应关系，同顾数据绑定的几种用法。三、授课内容2.3 计算属性与方法(1)计算属性基础应用：例2-4介绍计算属性computed作为Vue实例的配置语法和使用场景，对比data和ComPUted中数据的区别，强调data原生数据属性以及computed的缓存和计算依赖属性。(2)计算属性缓存与方法比较：【例2-4】VUe-2-4.html,介

9、绍方法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

10、.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讲

11、解和演示能够引起视图更新和不引起视图更新的多种数组方法，通过对比掌握这些方法。掌握控制台对象的相关方法回堂点口点通过控制台对象的相关方法来输出相关信息，帮助用户分析和查找程序运行中的出现的错误教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程思政教学1.综合利用第 二章知识点创建 Vue实例，让学 生通过案例将理 论知识和实践内 容联系起来，培 养他们独立解决 问题的能力和提 高

12、动手能力。2.通过对比计 算 属 性 computed 和方 法methods在使 用上的不同，使 学生掌握两种选 项配置的区别和 使用环境，锻炼 他们学会一题多 解来实际工程问 题。一、课程回顾在选项式API编程中，Vue实例中的WatCh、methodscomputed等选项配置、钩子函数的应用及控制台对象的方法的使用。二、授课目标2.6VUC中数组变动更新一有三种可以引起视图变化的方法：iJvue-2-13.html 使用Vue全局方法Vue.set()或者使用instance.$Set()实例方法。 使用数组变异方法。例如PUSh()、unshift()splice。、popOshif

13、t()sort()reverseO 使用非变异方法。例如filter。、concat()slice()console.groupEnd()5. 7.4查看对象的信息COnSOIe.dir()通过【例2-10】实战案例操作演示以上相关方法，让学生加深对方法的理解与运用。授课小结掌握数组变动更新的多种方法，学会运用ConSOlC对象的方法来辅助项目调试。习题清览题库第2单元测验、练习2中填空题和简答题。授课内容第3章Vue.js指令(3.1-3.2)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)理解VueJs指令的定义与分类。(2)掌握条件渲染指令的使用与注意事项。(3)掌握列表渲染指

14、令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点讲解各种v-for的语法和使用场景教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组

15、织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程一、课程回顾根据思维导图回顾第二章整体内容，MVVC模式的本质，如何构建VUe实例，以及第二章中各种选项配置的基本语法。二、授课内容第3章Vue.js指令Vue.js指令分为内置指令和自定义指令，本节课主要讲解内置指令中最常见的几个：3.1Vue.js内置指令3.1.1条件渲染【例3-1】vue-3-l.htmlv-if指令：当指令的表达式的值为true时，内容被渲染。v-else：必须搭配v-if使用，需要

16、紧跟在v-if或者v-else-if后面，否则不起作用。v-else-if：充当v-if的else-if块，可以链式的使用多次实现SWitCh语句的功效。3.1.2用key管理可复用的元素【例3-2vue-3-2.htmlVUeJS本着高效原则经常会复用元素，key的存在可以避免重新渲染。3.1.3根据条件展示元素V-ShoW【例3-3】vue-3-3.htmlv-show作为条件渲染和v-if有着木质的不同,v-show是简单地切换元素的CSS属性display,不管是否显示dom子树上都会存在钙元素。V-ShOW与v-if在使用上既有相同点，也有不同点。相同点：两者都是在判断DOM节点是否

17、要显示。不同点：(1)实现方式不同。(2)编译过程不同。(3)编译条件不同。(4)性能消耗不同。3.2列表渲染v-fo指令7种用法：【例3-4】vue-3-4.hml【例3-5】vue-3-5.hml(1)使用单一参数的v-for指令循环遍历对象数组(2)使用两个参数的v-for指令循环遍历对象数组(3)使用三个参数的v-for指令循环遍历对象的属性(4) v-for指令循环遍历普通数组(5) v-for指令循环遍历某一范围内的数字(6) v-fo指令使用key关键字循环遍历数组(7) v-for指令与v-if指令的执行优先级思政教学通过v-if、v-eIse-if到v-eIse指令的变化，培

18、养学生“精益求精”的工匠精神，引导学生在学习时，要“夯实知识、精技钱能”，方能在今后工作中本领过硬，不出批漏，工作成果令用户满意。引导学生认识到，作为职业人，其专注、敬业、责任担当对完成好本职工作，进而对促进软件行业整体的高水平、优质化发展具有重要意义。授课小结Vue.js内置指令v-if、v-showv-else-ifv-else%v-for,对比v-if和V-ShOW,分析其区别。注意v-for与v-if使用的优先级和使用场景。习题清览题库第3单元测验授课内容第3章Vue.js指令(3.33.5)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)掌握数据绑定的多种方式。(2)掌握表

19、单输入域绑定指令。(3)掌握事件处理指令及事件修饰符的使用方法。授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段类与样式绑定v-bind指令回重点口难点比较v-bind绑定class与style的其值的类型，结合案例进行讲解。事件处理V-On指令回重点口点通过侦听事件来执行处理程序。注意与JavaScript中侦听事件的差异性。表单输入绑定v-model回重点口点通过例子演示v-model双向传递数据的本质，对比data的单向传值。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PP

20、T课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程一、课程回顾简述条件渲染、条件展示和列表渲染等指令的使用场景及使用中注意事项，引入当需要动态改变数据时，可以通过绑定相关属性来实现动态渲染DOM的方法。二、授课内容3.3类和样式绑定v-bind指令【例3-6vue-3-6.html通常可以将“v-bind:aUribute”形式缩写为attribute”形式,将rtv-onreventw形式缩写为“evem”形式，这种形式称为“语法糖”。（1）在HTML元素上完成属性绑定，并定义其值的类型。（2）在Vue根对象的data选项中定

21、义相关属性的值。（3）在CSS部分需要定义相关类的样式。注意：ClaSS绑定时，其值可以是变通变量、对象、数组等。与StyIe绑定时，其值可以为对象、数组。3.4事件处理V-On指令【例3-7】vue-3-7.hlmlv-on指令主要用来监听DC）M事件，并在触发时运行一些JaVaSCriPl代码。v-on指令可以绑定事件处理函数、包含数据属性的表达式或赋值语句。语法：V-On:CliCk=melhodName”或CIiCk=handler（语法糖）。事件处理器的值可以是：内联事件处理器：事件被触发时执行的内联JavaScript语句（与onclick类似）。方法事件处理器：一个指向组件上定义

22、的方法的属性名或是路径。结合案例：讲解如何处分两种不同的事件处理器V-On指令绑定事件处理函数可以带参数，也可以不带参数。使用时需要注意以下3点：（1）普通方法。不使用圆括号，event被自动当作实参传人。（2）内联处理器中的方法。即方法里面调用其他的方法，如JS原生方法（如阻止冒泡）、自定义的方法。使用圆括号，必须显式的传入event对象。VUe提供了一个特殊变量$event,用于访问原生DOM事件。V-On指令绑定事件处理函数可以带参数，也可以不带参数。使用时需要注意以下3点。（1）普通方法。不使用圆括号,evenl被自动当作实参传入。（2）内联处理器中的方法,即方法中调用其他的方法,如J

23、aVaSCriPl原生方法（如阻止冒泡）、自定义的方法。使用圆括号,必须显式地传入evem对象。VUe提供了一个特殊变量Sevent,用于访问原生DoM事件。（3）v-on指令可以使用语法糖简写,格式为CIiCk,等同于V-Onxlicko事件修饰符、按键修饰符、系统修饰符等【例3-8】vue-3-8.html【例3-9】vue-3-9.html事件修饰符：.stop.prevent.captureself.once、.passive0按键修饰符：.enter、.esc、.down、.left、.right、.UP等。系统修饰符：.Ctr1、.alt、.Shift、meta3.5表单输入绑定（

24、v-model指令）【例3-10】vue-3-10.html【例3-13】vue-3-13.html在Vue.js中可以通过v-model指令在表单的input、IeXtarea及select元素上创建双向数据绑定。绑定不同的表单元素，其绑定值的类型是不同的。重点讲解表单元素值绑定、v-model修饰符相关知识。思政教学1.介绍VUe的语法糖。语法糖指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。通过语法糖的学习让学生明白学习不要固步自封，要灵活运用新技术简化自己的工作过程

25、。授课小结本节介绍了Vue.js指令中v-on的事件修饰符、按键修饰符和系统修饰符，以及v-model指令及其修饰符。习题清览题库第3单元测验，练习3授课内容第3章Vue.js指令(3.63.8)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)掌握其它内置指令的作用与使用方法。(2)掌握VUe自定义指令定义与注册的方法。授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段v-html与v-text指令业鼠换点通过案例操作演示指令的作用结果，从而加深对指令的理解，并区别两种指令作用效果。V-OnCe、v-c1oakv-pre指令回重点点通过案例讲解V-OnCe、v-cloakV

26、-Pre等指令的使用方法。Vue.js自定义指令回量点点在涉及普通元素的底层DOM访问的逻辑时，使用内部指令并不能很好地解决问题，引入自定义指令。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程一、课程回顾简要回顾一下已经学过的常用内部指令，还有一些特殊功能指令在实际工程也有需求。二、授课内容3.6v-html与v-text指令【例3-14vue-3-14.html【基本语法】

27、myText注意：v-text更新元素的textContent。v-htmI更新元素的InnerHTML01.7v-oncev-cloakV-Pre指令【例3T5】vue-3-15.html【基本语法】Wv-once：mylnputinformationmessage【语法说明】V-OnCe指令：只执行一次DOM渲染，渲染完成后视为静态内容，跳出以后的渲染过程。v-pre指令：在模板中跳过VUe的编译，直接输出原始值。这时并不会输出的message值，而是直接在网页中显示message)。v-cloak指令：保持在元素上直到关联实例结束编译。和CSS规则(v-cloakdisplay:none

28、;)一起用时，这个指令可以隐藏未编译的information,直到实例准备完毕。渲染时会出现变量闪烁。3.8Vue.js自定义指令3.8.1自定义指令注册【例3T6】VUe-3-16.html【基本语法】使用方式与内置指令相同(1)注册全局自定义指令v-my-directive。第1种定义方法如下：constapp=Ve.createApp();app.directive(my-directive/生命周期钩子函数)第2种定义方法如下：app.directive(my-directivezfunction(el,binding,vnode)()z其中el为dom,Vnode为VUe的虚拟dom

29、,binding为一较豆杂对象/使用箭头函数的形式来定义app.directive(colorz(el,binding)=这会在mounted和updated时都调用el.style.color=binding.value;console.Iog(el.style.color);)；(2)注册局部自定义指令my-directive。在组件内使用directives选项来定义。代码如下：directives:my-directive:beforeUpdateupdatedbeforeUnmountunmounted,不过它们都是可选的。定义如下：constmyDirective=/在绑定元素的a

30、ttribute前或事件监听器应用前调用created(el,binding,vnode,prevVnode)/下面会介绍各个参数的细节/在元素被插入到DOM前调用beforeMount(el,binding,vnode,prevVnode),/在绑定元素的父组件及他自己的所有子节点都挂载完成后调用mounted(el,binding,vnode,prevVnode),/绑定元素的父组件更新前调用beforeUpdate(el,binding,vnode,prevVnode),/在绑定元素的父组件及他自己的所有子节点都更新后调用updated(el,binding,vnode,prevVnod

31、e),/绑定元素的父组件卸载前调用beforenmount(el,binding,vnode,prevVnode),/绑定元素的父组件卸载后调用unmounted(el,binding,vnode,prevVnode)在使用时，钩子函数也会传入以下的参数。这些参数分别如下：(1) el：指令所绑定的元素，可以用来直接操作Do(2) binding：一个对象，包含以下属性：(3) vnode：代表绑定元素的底层VNOde。(4) prevNode：之前的渲染中代表指令所绑定元素的VNode,仅在beforeUpdate和updated钩子中可用。重点介绍一下binding对象的属性：ValueO

32、IdVaIue、argmodifiersinstancedir自定义指令的参数也可以是动态的。在V-Iny-directive:argument=z,value*中，argument参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。例如，示范如下：6. 8.2对象字面量【例3-17vue-3-17.html对象字面量是封闭在花括号对()中的一个对象的零个或多个“属性名：值”列表。若自定义指令需要多个值，可以传入一个JaVaSCriPt对象字面量。指令可以使用任意合法的JaVaSCriPt表达式。xdivapp.directive(my-directive,(el,bin

33、ding)=console.Iog(binding.value.color)/redconsole.log(binding.value.tet)/Vue简单易学!”)授课小结通过本章的学习能够掌握VUe内部指令和自定义指令的基本语法，学会使用VUe指令完成相关业务逻辑的设计，完成基本VUe项目的开发。授课内容第4章Vue3新特性应用(4.14.2)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)学会使用ref和reactive函数来创建响应式对象。(2)学会使用BRefs将响应式对象转换为普通对象。(3)学会使用COmPUted、WatCh和WatehEffeCt定义和监听响应式数据

34、。(4)学会使用ref引用DOM元素和组件实例。(5)理解Vue3生命周期钩子并学会定义钩子函数授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段响应式基础(setup()、ref0reactive()匚通点口难点在组合式APl编程模式下，SetUP()组件选项的生命周期中执行顺序；采用比较法讲解ref()与reactive()在使用上的区别。比较法讲解toRefs()与SRef()在使用上的区别。computed()、watch()和WatchEffect()及ref属性点口点与Vue2.X中选项API编程与Vue3.x中组合式API编程中ComPUted()、WatCh()和Wa

35、tChEffeCt()使用方式的异同点。通过ref属性xhetDOM元素。Vue3生命周期匚庭点口难点在组合式API编程模式下，如何使用Vue3.X中的生命周期钩子函数，与Vue2.X中使用生命周期钩子函数进行比较。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程一、课程回顾回顾前3章所讲述的Vue基础语法和Vue指令,主要采用选项式API编程：本章开始试用组合式APl编程，需

36、要学会使用VUe3.X新增加的新的特性。二、授课目标7. 1响应式基础4. 1.1组件选项SetUP()【例4T】VUC-4T.htmlSetUP()在created和beforeCreate之间执行。SetUP()钩子函数是在组件中使用组合式API的入口，通常只在以下情况使用。(1)需要在非单文件组件中使用组合式API时。(2)需要在基于选项式API的组件中集成基于组合式API的代码时。其他情况下,都应优先使用语法。setup(props,context)通过案例讲解2个参数的区别。props是响应式对象；context对象是普通的JaVaSCriPt对象，即它不是响应式对象。使用conte

37、xt,attrsxcontext,slotscontext,emit等代替this.Sattrsathis,$slotsthis.$cmit等。1. 1.2refO%reactiveOtoRefs()和toRef()【例4-2】vue-4-2.htmlref()函数接收一个参数值，返回一个响应式数据对象。reactive。函数根据给定的普通对象来创建一个响应式数据对象。toRefs()可以将reactive。创建出来的响应式对象，转换为普通的对象。toRef()基于响应式对象上的一个属性，创建一个对应的refo4. 1.3watch、WatchEffect和computed【例4-3vue-4

38、-3.htmlimportwatch,computed,WatchEffectfromvue;/在组件使用constwatchzcomputed,WatchEffect=Vue;/非组件中使用或类似VUe.watch()使用COmPlJted():接受一个getter函数，返回一个只读的响应式ref对象。WatCh():侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。WatChEffeCt():立即运行一-个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。4. 2Vue3生命周期【例4-4】VUe-4-4.html5. 2.1Vue3生命周期函数(组合式APl)与VUe2

39、.X中的生命周期钩子函数进行对比，弄清楚对应关系。学会在组合式APl模式下编程和使用钩子函数。6. 2.2生命周期钩子函数应用采用SetUP()编程，并在函数体内定义钩子函数，在并钩子函数中执行相关操作。思政教学通过组件选项 和生命周期钩 子函数的讲解， 让学生了解软 件也是有生命 周期的。软件的 生命周期指的 就是软件的最 初研制到最终 被废弃不用的 各个阶段要延 长软件的生命 周期就必须开 发功能强壮、健 康、满足用户长 远需求的软件。 要求学生从开 始学习软件开 发时，就必须认 真、严谨，一丝 不苟。授课小结重点介绍了VUe3中SetUP()、ref()reactive()toRefs(

40、)toRef()、WatCh()、computed()WatChEffeCt()等APl的应用，然后介绍Vuc3生命周期钩子及其应用，在实践中不断地加深理解和学会灵活应用。授课内容第5章Vue.js组件开发(5.15.2.2)授课日期、节次授课地点授课教师授课班级授课目的与要求(1)熟悉组件的命名规范。(2)掌握全局、局部注册组件的方法。(3)掌握组件间常用的通信方法。授课重点、难点、方法与手段主要知识点重难点标识授课方法与手段组件命名与注册匚恒点口难点比较法讲解三种组件命名规范，案例操作演示讲解两种组件注册方式父组件向子组件传值匚庭点回难点通过案例讲解父向子传递数据的过程，使用PrOPS传递

41、数据。子组件向父组件传值匚博点回难点子组件中使用this.$emit(,input*,this.子组件属性)向父传递数据。教改方案及实施要点整合教学内容，完备知识体系；重视实践环节，培养创新能力；艺术组织教学，优化教学手段。教学资源主要网站清览题库、学银在线辅助课件自作PPT课件参考教材Vue.js3.X前端开发技术与实战与实战，储久良，清华大学出版社，2024.3授课具体内容及实施过程思政教学1.通过组件命 名规则培养学 生良好的程序 开发规范，帮助 他们养成规范 的程序书写习 惯。提高学生作 为程序开发人 员的基本素养。2.通过组件间 通信的各种方 式对比，介绍每 种方法的优缺 点，加深学

42、生对 “组件化”的理 解，学会用合适 的方式处理具 体问题，锻炼自 己具体问题具 体分析的能力。一、课程回顾当我们想复用相同的HTML代码片段时，往往通过复制方式来重复这样的工作，但如果能够将相应的HTML代码片段封装在一起，做成一个新标记，那使用起来就十分方便。组件可以扩展HTML元素，封装可重用的代码。二、授课目标5.1组件基础5. 1.1组件命名(l)kcbab-casc-命名法、CamelCase(驼峰命名法)、PaSCalCaSe(帕斯卡命名)5. 1.2组件注册【例5-1】VUe-5-l.html(1)全局注册constapp=Vue.createApp()ponent(tagNamezoptions)(2)局部注册组件的定义constApp=定义根组件components:/局部注册子组件mycompl:Componen