Vue.js3.x前端开发技术与实战56课时教学大纲及授课计划.docx

《Vue.js3.x前端开发技术与实战56课时教学大纲及授课计划.docx》由会员分享，可在线阅读，更多相关《Vue.js3.x前端开发技术与实战56课时教学大纲及授课计划.docx（18页珍藏版）》请在三一办公上搜索。

1、VUCj、3.RFromEndDevelopmentTechnologyandPnKrtlCCVue.js3.x前端开发技术勺实战，鬲D1wW）fs）i） M风临：从海卬式APl自缭台式AH平过澧,由/*.系;MTiB 内喜构罐：MVbXx*ttWfcnt11W,脚口工怵ASXF *A*BadgeCalendar、CardCarousel组件11. 3.6Data数据展示一Table表格12. 3.7Data数据展示一VirtualizedTable虚拟化表格组件10. 3.8Navigation导航组件第11章VUe3.X构建工具Tite11. 1Vite构建项目11. 1.1Vite简介1

2、3. 1.2搭建第一个Vite项目11.2Vite创建惠民早点项目11.2.1 创建默认项目11.2.2 更新完善项目第12章网络请求库Axios与JSONServer12.1Axios概述12.1.1Axios简介12. 1.2AXiOS特性14. 1.3AXioS应用14.2 ZiAxios举例12.2.1执行get请求12.2.2执行post请求12.2.3一次执行多个请求12.3JSONServer与Postman12.3.1JSONServer简介12.3.2JSONServer应用12.3.3POSIInan-接口测试工具14.4 跨域请求数据12. 4.1VueCLl创建项目跨域

3、配置12. 4.2Vite创建项目跨域配置12.5AxiosAPI12. 5.1AXioS可以通过配置(config)来发送请求13. 5.2请求方式的别名。14. 5.3请求配置。15. 5.3AXioS实例12. 6Axios拦截器12.7AXiOS应用实战12. 7.1请求本地JSON数据13. 7.2请求远程天气预报数据第13章Vue3+ElementPIUS实战一简易图书管理系统13.1 简易图书管理系统需求14. 1.1简易图书管理系统功能15. 1.2简易图书管理系统实现技术13.2简易图书管理系统实现13. 2.1项目创建13. 2.2定义main.js13. 2.3修改pp.

4、vue组件13. 2.4定义BOokVieW组件13. 2.5定义Header.vue组件13. 2.6定义Footer.vue组件13. 2.7定义router/index.js13. 2.8定义store/index.js13. 2.9定义HomeView.vue组件13. 2.10定义SettingView.vue组件13. 2.11定义AboutView.VUe组件13. 2.12定义BookAdd.vue组件13. 2.13定义BookModify.vue组件13. 2.14定义BookQuery.vue组件四、时间分配分段标识序号教学内容教学环节（学时）讲课实训小计课时教学形式内容

5、课时教学形式1第1章Vue.js发展概述第2章Vue.js基础6讲授+实操演示实训1-22视频+上机演示82第3章Vue.js指令6讲授+实操演示实训32视频+上机演示83第4章Vue3新特性应用2讲授+实操演示实训40视频+自学24第5章Vue.js组件开发4趣+实操演示实训52视频+上机演示65第6章Vue.Js过渡与动画4讲授+实操演示实训62视频+上机演示66第7章VUe开发环境与SFC新特性6讲授+实操演示实训72视频+上机演示87第8章路由VueRouter4讲授+实操演示实训82视频+上机演示68第9章状态管理VUeX4讲授+实操演示实训92视频+上机演示69第10章Vue3UI

6、框架ElementPlus2讲授+实操演示实训100视频+上机演示210第11章VUe3.X构建工具-Vite第12章网络请求库Axios与JSONServer2讲授+实操演示实训11-120视频+上机演示211第13章Vue3+ElementPlus实战一简易图书管理系统0讲授+实操演示实训132视频+上机演示2总计401656五、课程说明课程英文名称Vue.js3.XFrontEndDevelopmentTechnologyAndPractice主要先修课程计算机导论、计算机网络、Web前端开发基础适用专业类别计算机科学与技术、软件工程、网络工程、信息管理与信息系统等相关专业主要教材（作者

7、、教材名称、出版社）（1）储久良.Vue.js3.X前端开发技术与实战.北京:清华大学出版社.2023.12.课程性质通识基础口学科基础口专业选修回集中实践环节口考核方式平时（平时成绩30%+实训20%）50%+期末考试50%其中平时成绩30%=课程实训视频10%+作业5%+签到5%+单元测验10%课程简介Vue.js3.X前端开发技术与实战课程是计算机类专业的一门专业（必修/选修）课程，通过对Vue.js3.X的新特性和开发环境配置的了解和Vue.js3.x基础语法、指令、组件、过渡与动画、Vuex4VueRouter4AXiOS和JSONSerVer、Vite4/5新前端构建工具和Elem

8、entPlus等周边生态系统的学习和研究，让学生理解和掌握Vue.js3.X这一渐进式框架的核心概念（组件化、模块化），通过项目实践培养学生开发和设计复杂的单页面SPA（SinglePagewebApplication）应用的基本技能和素质要求，适应互联网行业Web前端开发相关岗位的需要。必开实训项目序号项目名称实训内容提要学时1Vue3.X初步应用实战一V-Inodel绑定列表框（D学会引入Vue3.X版本对应的vue.global.js文件,完成VUe视图的定义。（2）学会定义Vue实例对象的选项,初步掌握data函数的定义方法。（3）学会使用v-model指令绑定select元素，通过列

9、表框选择相应的选项（专业名称）。（4）学会启用浏览器辅助项目调试（按“F12”进入）。1（任选1个项目，其余课外实践）2. Vue3. X基础应用实战一Vue组件内选项的配置（1）学会引入Vue.global.js,完成单页基本结构设计。（2）学会使用Vue3.X中的CreateAP学）来定义Vue实例,学会配置组件内的template和data的选项。（3）学会在template模板中使用data选项中的数据（如bookName）,并在模板的根div中嵌套2个子div,用于图书对应的图像和显示图书简介。（4）学会使用CSS定义相关div的样式。21.v-model指令&watch侦听实战一新

10、生报道信息核对1 .学会引入vue.global.js,在Vue视图中定义HTML5表单。2 .学会定义Vue组件（实例）,会配置组件（实例）的data选项。3 .学会配置methods和watch等选项，并完成相关函数的定义。4 .学会使用V-Inode1、v-bind、V-On等指令来完成表单绑定、属性绑定和事件绑定。5 .学会使用CSS定义fieldset、input等标记和属性的样式。1（任选1个项目，其余课外实践）2.计算属性、方法的综合实战一计算区间整数累加和1 .学会定义Vue组件，会配置组件data、methods、computed等选项。2 .学会引入vue.global.j

11、s,并完成Vue视图中的HT.ML5表单的定义。3 .学会使用v-modelV-On、v-for等指令来完成表单绑定、事件绑定、遍历数组。4 .学会使用CSS定义span、fieldset、input等标记的样式。31.内置指令实战一课程模块维护1 .学会引入vue.global.js,完成简易表单设计。2 .学会定义VUe组件对象，会配置data和methods等选项。3 .学会使用v-on、v-model及v-for等内部指令。4 .学会使用数组相关方法，完成课程增加与删除操作。22.自定义指令实战一自定义v-img指令1 .学会引入VUc.global.jsf完成HTML文档基本结构的定

12、义。2 .学会定义VUe组件对象，并配置data和directives等选项。3 .学会全局注册自定义指令VTmg。使用箭头函数定义指令相关参数(el,binding)o4 .学会使用el.style对象的相关D(W属性，完成图像加载等样式设置。41.Vue3组件选项及响应式APl实战一课程管理(D学会使用组件选项SetilP()来定义响应式对象和方法。(2)学会定义reactive()和ref()来定义响应式对象。(3)学会在SetUPo函数中定义方法，并暴露方法和所有属性。(4)学会在表单输入域上绑定响应式对象，实现双向数据绑定。(5)学会使用v-for指令来遍历courses课程对象，其

13、属性分别为nameteacher、classroom00(课外实践)2.Vue3中组合式APl实战一学生成绩管理-成绩预警(D学会引用vue.global.js文件，并完成视图和Vue实例。(2)学会在组件中使用SetUP()组件选项，并在其中定义响应式对象及相关方法。(3)学会使用Vue3.X新增的IoRefs()、WatChEffeCt()、computed()ref()reactive()等组合式API函数。(4)学会使用v-bind指令绑定class,改变信息的显示风格。(5)按照图4-10图4-11所示的页面效果，完成相关属性和方法的定义。51.父子组件间通信实战一计算任意区间连续整

14、数累加和。(1)学会定义VUe组件，并学会全局注册组件。(2)学会使用CSS定义div、button、input标记的样式。(3)学会使用父子组件通信实现两个组件间相互通信，能够使用ProPs、$cmit()来传递和发送数据。(4)学会在Vue3.X中使用OptionsAPT来定义选项。(5)学会在body中定义模板()供组件引用(通过ID号引用，如template:,)。22.插槽综合实战一父子组件数据传递(1)学会引用VUe.global.js,学会定义VUe组件，构建基本HTML文件。(2)学会使用CSS定义div、button、ul等标记的样式。(3)利用props属性实现父组件向子组

15、件传值，子组件通过$emit()向父组件发送数据。(4)学会定义匿名插槽、具名插槽和作用域插槽，利用作用域插槽向父组件提供数据。(5)学会定义创建Vue实例和配置相关选项，会定义相关方法实现相关功能。6L多组件过渡(1)学会使用CreateAPP()来创建Vue实例，并挂载到id为#app的视图上。(2)学会使用CSS定义超链接等标记的样式，学会使用2实战一三大前端框架技术简介过渡类名，并完成多组件过渡样式定义。(3)学会transition组件和内置组件+v-bind:is动态组件实现多个组件切换显示。(4)利用多组件过渡设计“tab选项卡”式导航菜单，默认渲染第一个组件(VUeCoInp)

16、。2.列表排序过渡实战一题库抽题题号添加、删除及重新排序(1)学会导入vue.global,js和Iodash.min.js,使用CreateAppO创建Vue实例，并挂载到指定#app视图上。(2)学会使用CSS3定义按钮、列表及列表项的样式效果。(3)学会使用Iodash.js(_.shuffle(arrayName)来定义列表项弹跳式动画(洗牌)屐果。(4)学会使用transition-group组件来实现列表的进入/离开的过渡、排序过渡的效果。71.webpack打包资源实战一计算某一区间内所有整数的累加和(1)学会使用WebPaCk打包项目。学会编写index.html、main,j

17、s、webpack,config,js、index,js等文件。(3)学会使用DoM操作创建、添加新元素。(4)学会使用WebPaCk编译和打包工程文件，并能在调试状态下运行项目。22.Vue-CIi创建项目实战一创建vue-cIi-e-2项目(1)学会使用VUeCreate创建工程项目。(2)学会手动创建项目，并保存为预设。(3)熟悉创建项目的步骤，学会编写简单的VUe单文件组件文件。(4)学会使用windows对象的定时执行函数和清除定时执行函数完成计数器“开始计数”“停止计数”的功能。(5)学会使用Vue3.2的scriptSetUp新特性来定义函数(defineProps()和响应式对

18、象(ref0)。81.Vue3.x+VueRouter4基础项目实战一选修课简介1 .学会使用VUecreate创建Vue项目。2 .学会在项目中导入vue-router的CreateRouter和CreateWebHistory等APIo3 .学会使用VueRouter设置导航、定义路由、定义路由组件、定义路由管理器实例。4 .使用VUeROUter4完成项目实战。22.VUeRouter应用实战一网1 .学会使用vuecreate创建Vue项目。2 .学会在项目中导入vue-router的CreateRouter和CreateWebIIistory等插件。3 .学会使用VueRouter定

19、义导航、路由及嵌套路由、定义路由组件、定义路由管理器实例。4 .学会使用devtools调试和观察VueRouter的路由、上商城产品简介嵌套路由及关联的路由组件。5.完成路由组件的定义、路由及嵌套路由的定义及项目所需要的其它功能。91.Vuex4基础项目实战一基于Vue3.2+VueX4的水果零星采购应用程序1 .学会使用vuecreate创建Vue项目。2 .学会在项目中安装和导入Vuexo3 .学会使用Vuex4的state、getters、mutationsactions等核心概念解决工程应用中状态共享问题。4 .学会在组件的scriptSetUp标记中使用Vuex状态和分发actio

20、n或提交mutation。5 .编程实现水果零星采购中采购数量的增加与减少(1或者many)功能，其中有两个按钮采用异步(SetTinleoUt()操作实现批量增加或减少数量的功能。22.VUCX多模块项目实战一出版社图书销售统计1 .学会使用vuecreate创建Vue项目。2 .学会在项目中安装和导入Vuexo3 .学会使用Vuex4的state、mutations、modules等核心概念解决工程应用问题。4 .学会在组件的scriptSetUp标记中使用Vuex状态和定义相关function来提交mutatio11o5 .编程实现“出版社图书销售统计”单页页面。101.Vue3.2+E

21、lementPlus导航+数据展示组件实战一Web技术大学简易网站(1)学会在ElementPlus(https:/element-plus,gitee.iozh-CN)官网上查看相关组件的使用方法，能够查看源代码，并将源代码粘贴到项目相关组件中进行页面调试(将TS代码改为JS代码)。(2)掌握COnlainter布局容器组件、LayoUl布局组件和Menu菜单组件的相关属性和组件的事件与使用方法。(3)学会使用VUCROUter定义路由、定义路由组件、定义路由管理器实例。(4)熟悉使用Vue3.2+VueCLI+VueRouter+ElementPlus组合构建项目，了解项目文件构成结构。(

22、5)学会在项目中安装EIeinentPlUS插件，并导入组件和样式文件。(6)完成项目实战要求。22.Vue3.2+VueRouter+ElementPlus表格组件实战一图书信息管理系统(1)学会使用多种方式引入EIementPIUS组件库。(2)熟悉FOnn表单组件、Data数据展示组件、BASIC基础组件和Feedback反馈组件的组成和基本使用方法。(3)重点学会使用表单组件中的el-formel-fornritem、el-inputel-date-pickerel-tableCl-table-column、el-button及ElMcssage消息提示等组件的使用方法。(4)掌握表格

23、组件中自定义表头和自定义列模板的方法。(5)项目功能：采用表单组件来采集图书信息并添加到表格。采用自定义表头和自定义列模板的表格组件显示图书信息，可以“查看、删除”图书信息，可以根据输入图书名称来检索图书信息。查看时采用ElMeSSage消息提示组件来显示图书基本信息(序号、图书名称、作者、出版社)。(6)学会使用vuecreateep-e-10-2来创建项目，使用VueRouter来构建页面。111.Vite创建简易项目实战一图书征订(1)熟悉Vite构建工具的组成与特性。学会安装Vite和使用Vite工具命令来创建VUe3.2简易项目。(2)学会使用scriptSCtUp新组件标记来定义组

24、件，在scriptSetU标记内导入组件、refCOmPUted等API,定义defineProps(),并完成相关响应式对象和函数的定义。(3)完成简易图书征订功能。任1项，余外,选个目其课实践2.Vite创建简易项目实战一图像缩放与旋转(1)熟悉Vite构建工具的组成与特性。学会安装Vite和使用Vite工具命令来创建VUC3.2简易项目。(2)学会使用scriptsetupstylev-bind组件新特性来定义组件，在scriptSetUp标记内导入组件、refprovide%inject等API,定义defineProps(),并完成相关响应式对象。在style标记上通过v-bind(

25、)CSS函数将CSS的值关联到动态的组件状态上。(3)实现图像缩放与旋转功能。121.Axios随机获取音乐一网易云音乐随机歌曲(1)熟悉Vite构建Vue3.2项目步骤。学会使用npminitvitevite-axios-ex-l-templateVUe创建项目，并启动本地开发服务。(2)学会导入axios和vue-axios,并配置全局可使用的axioso使用ProVide()和inject()函数实现全局提供和子组件中注入使用。(3)学会使用scriptSetUp新组件标记来定义组件，在scriptSetUp标记内调用axios的get()方法完成“网易云音乐随机点歌”的功能。在实战中掌

26、握的功能与Vue3.2在组件的定义上的不同。(4)学会从(5)编程实现单页面应用。1(任选1个项目，其余课外实践)2.Axios跨域请求JSON数据实战一手机号码归属地查询(1)熟悉Vite构建Vue3.2项目步骤。学会使用npmcreatevitevite-axios-e-2-templateVUe仓犍项目，并启动本地开发服务。(2)学会导入axios和vue-axios,并配置全局可使用的axioso使用PrOVide。和inject()函数实现全局提供和子组件中注入使用。(3)学会使用scriplSetUp新组件标记来定义组件，在scriptSetUp标记内调用axios的get()方法

27、完成“手机归属地查询”的功能。(4)学会在vite.config,js文件中配置跨域代理服务。其中SerVer属性的配置可以参照以下内容：server:proxy:,7api:target:接口前缀ChangeOrigin:true,开启代理secure:true,/设置支持htps协议的代理ws:true,/要代理websockets,配置这个参数rewrite:(path)=path.replace(api,),),(5)编程实现单页面应用。功能在文本输入框中输入正确的手机号码后，单击“查询”按钮，将在下面的div中显示手机归属地等相关信息。六、课程实施计划序号学式教方教学内容作业要求教学

28、目标1课堂讲课第1章Vue.js发展概述1. 1Vue.js简介1.1 .1Vue.js发展简史1.2 .2Vue3新特性简介1.2Vue.js生产环境配置1. 2.1VUe.js引入方法2. 2.2安装VueDevtools3. 2.3Node,js环境配置4. 2.4创建第一个VUe单页程序1. 3Vue.js开发工具1.3 .1VisualStudioCode1.3.2HBuilderX1.4 ECMAScript6.0基础1.4.1 4.1let和const1.4.2 解构赋值1.4.3 箭头函数1.4.4 展开运算符1.4.5 模板字符串第2章Vue.js基础2. 1MVVM模式2.

29、 1.1MVVM模式简介2.1.2 MVVM模式的前端框架发展趋势2.1.3 MVVM模式的应用2.2数据绑定与插值2.2.1文本绑定2.2.2HTML代码绑定2.2.3属性绑定2.2.4JavaScript表达式绑定练习1掌握常用的Vue.js开发工具。掌握Vuc.js页面的基本组成。学会使用Vue.js3.X编写简易的单页面应用。掌握ECMAScript基础语法。理解MVVU模式的工作机制。掌握多种类型数据绑定的方法。2课堂讲课第2章Vue.js基础2.3计算属性与方法练习2掌握计算属性与方法在使用上的区别。学会使用侦听属性处理数据变化的相关事2.3.1计算属性基础应用2.3.2计算属性的

30、setter和getter2.4侦听属性watch2.4.1watch属性基本用法2.4.2WatCh属性高级用法2.5生命周期钩子函数2.5.1生命周期钩子函数作用2.5.2生命周期钩子函数应用务。理解生命周期钩子函数在使用上的差异性。3课堂讲课第2章Vue.js基础2.6VUe中数组变动更新2.6.1变异方法2.6.2非变异方法2.7控制台ConSoie对象2.7.1显示信息的命令2.7.2占位符2.7.3分组显示console,group（）2.7.4查看对象的信息console,dir（）练习2掌握数据中数组对象的变异与非变异方法学会使用console对象的相关方法4上机实训实训1-实

31、训2练习2实训1（二选一）、实训2（二选一）5课堂讲课第3章Vue.js指令3. 1条件渲染3.1.1 v-if/v-ele-if/v-else指令3.1.2 2Vuc3.X中key值的应用3.1.3 V-ShoW指令3.2列表渲染(v-for指令)练习3理解Vue.js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方法及与key属性配合使用的方法。6课堂讲课第3章Vue.js指令3.3类与样式绑定（v-bind指令）3.4事件处理（v-on指令）3.5表单输入绑定（VFodel指令）练习3掌握数据绑定的多种方式。掌握表单输入域绑定指令。掌握事件处理指

32、令及事件修饰符的使用方法。7课堂讲课第3章VUe.js指令3.6v-html与v-text指令3.7V-OnCe、V-CIOak、V-Pre指令3.8Vue.js自定义指令3.8.1自定义指令注册3.8.2对象字面量练习3掌握其它内置指令的作用与使用方法。掌握Vue自定义指令定义与注册的方法。8上机实训I实训3-1、实训3-2完成实训3的实战任务9课堂讲课第4章Vue3新特性应用4. 1响应式基础4. 1.1组件选项setup()4.1 .2ref()、reactiveO、IORefS()和toRef()4.2 .3watch、WatchEffect和computed练习4学会使用r学和reactive函数来创建响应式对象。学会使用toRefs将响应式对象转换为普通对象。学会使用computedwatch和WatchEffect定义和监听响应式数据。学会使用ref引用DOM元素和组件实例。4.2Vue3生命周期4 .2.1Vue3生命周期函数（组合式API）5 .2.2生命周期钩子函数应用理解Vue3生命周期钩子并学会定义钩子函数10课堂讲课第5章Vue.js组件开发5. 1组件基础5.1 .1组件命名5.2 .2组件注册5.2组件间通信1 .2.1父组件向子组件传值5 .2.2子组件向父组件传值练习5熟悉组件的命名规范。掌握全局、局部注册组件的方法。掌握