《Vue 3基础入门》教学大纲

《Vue3基础入门》课程教学大纲（课程英文名称）课程编号：学分：学分学时72学时（其中：讲课学时36上机学时36）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《Vue3基础入门》是一本讲解如何利用Vue.js框架进行Web前端组件化开发的教材，内容涉及Vue的基本概念以及优势、Vue开发环境的搭建、Vue实例对象、内置指令、组件、事件、生命周期、全局API以及实例属性、过渡动画、路由、状态管理等。通过本课程的讲解，让学生掌握如何使用Vue快速创建单页面应用，如何实现页面的交互效果以及购物车功能等。本课程提供了丰富的案例，让学生能够根据不同的业务需求开发出不同的功能，如组件过渡效果、购物车等，对于案例的实现思路进行了细致地分析和总结，让学生理解复杂案例的实现过程。最后一章还讲解了综合实战项目“红色旅游APP项目”的开发过程，让学生学会使用vue-cli脚手架工具快速搭建项目，把学习的理论知识灵活地运用到实际项目的开发过程中。二、教学条件要求操作系统：Windows7/8/10开发工具：Chrome、VisualStudioCode编辑器等工具三、课程的主要内容及基本要求第一章Vue3简介学习单元第一章Vue3简介学时2学习目标了解Web前端框架认识Vue3选择IDE掌握配置Node.js环境安装Vue3熟悉vue-devtools调试工具学习内容知识点了解掌握重点难点前端框架的诞生√MVC模式√从MVC模式到MVVM模式√什么是Vue3√Vue3的优势√选择IDE√配置Node.js环境√√独立版本安装√CDN方式安装√npm方式安装√√使用前端脚手架安装√√√vue-devtools调试工具√√第二章HelloWord与Vue3的基础特性学习单元第二章HelloWord与Vue3的基础特性学时2学习目标掌握HelloWord示例掌握Vue3组件的生命周期掌握Vue生命周期钩子函数的使用掌握Vue组件之间的数据传递的方法掌握Vue的数据绑定学习内容知识点了解掌握重点难点HelloWord示例√Vue3应用的核心对象√√Vue3的组件结构√√认识生命周期√√√Vue生命周期的钩子函数√√√文本插值√插入原始HTML√利用表单实现简单登录页面√利用过滤器过滤指定字符√第三章Vue基本指令学习单元第三章Vue3基本指令学时4学习目标掌握Vue条件渲染指令掌握Vue列表渲染指令v-for掌握数据绑定指令v-bind掌握v-model与表单掌握vue方法、计算属性与监听属性掌握vue事件处理掌握vue其他基本指令掌握vue自定义指令学习内容知识点了解掌握重点难点条件渲染v-if、v-else-if、v-else√条件渲染v-show√v-show与v-if的选择√列表渲染指令v-for√数组更新√v-for的其他操作√数据绑定指令v-bind√√V-bind动态绑定√√v-model与表单√√表单修饰符√Vue3中的方法√√√计算属性√√√监听属性√√方法、计算属性与监听属性的区别√√监听事件v-on√事件处理函数√内联处理函数√多事件监听√事件修饰符√按键修饰符√系统修饰键√首次渲染指令v-once√注册自定义指令√钩子函数√动态指令参数√函数简写与对象字面量√第四章Vue组件应用学习单元第四章组件应用学时4学习目标了解组件基础概念掌握组件间数据传递掌握Vue3提供了一套内容分发的API掌握vue3其他应用掌握列表过渡的实现掌握封装可复用过渡动画的方法学习内容知识点了解掌握重点难点基本使用方法√组件复用√组织结构√钩子函数√通过props属性传递数据√√通过“总线”传递数据√√√通过监听事件传递数据√√√内容分发api基本使用方法√√√编译作用域√后备内容√具名插槽√√√作用域插槽√动态插槽名√动态组件√异步组件√√实现日历组件√利用组件实现“弹出层”√第五章样式绑定学习单元第五章样式绑定学时2学习目标掌握绑定HTML样式熟练绑定内联样式[实例]实现列表的奇偶行不同样式学习内容知识点了解掌握重点难点对象控制样式√数组控制样式√在组件中的应用√√√对象描述样式√√数组描述样式√自动添加前缀√多重值样式√代码实现√【案例】实现列表的奇偶行不同样式√第六章组件复用学习单元第六章组件复用学时2学习目标掌握DOM渲染函数实现复用掌握混入对象掌握插件复用【案例】使用渲染函数渲染列表学习内容知识点了解掌握重点难点DOM基础√JavaScript动态生成DOM对象√√引入JSX语法√函数式组件√√模版编译√√选项合并复用√自定义选项合并策略√编写插件√使用插件√√【案例】使用渲染函数渲染列表√第七章Vue路由学习单元第七章Vue路由学时4学习目标掌握路由基础掌握动态路由熟悉路由进阶使用掌握History模式掌握导航守卫了解路由元信息了解过渡动效掌握数据获取掌握路由懒加载掌握滚动行为学习内容知识点了解掌握重点难点什么是VueRouter√在HTML中使用VueRouter√√在JavaScript代码中使用VueRouter√√参数响应√√捕获所有路由√高级匹配模式和匹配优先级√√√嵌套路由√√编程式导航√router.push()函数√√router.replace()√√router.go()√√命名路由√√命名视图√√重定向与别名√路由组件参数传递√√√HTML5HistoryAPI√后端配置√全局守卫√路由独享守卫√组件内守卫√导航解析流程√路由元信息√单路由过渡√路由动态过渡√导航完成后获取数据√在导航完成前获取数据√路由懒加载√滚动行为√第八章axios异步请求学习单元第八章axios异步请求学时2学习目标掌握axios基础理解API介绍掌握适配网络请求掌握拦截器介绍学习内容知识点了解掌握重点难点axios简介√安装axios√基本使用方法√√API介绍√√√适配网络请求√√√拦截器介绍√第九章VueCLI部署项目学习单元VueCLI部署项目学时2学习目标了解VueCLI的简介了解webpack概述掌握构建与部署VueCLI项目学习内容知识点了解掌握重点难点什么是VueCLI√安装VueCLI√创建HelloWord项目√√了解VueCLI项目结构√了解webpack√配置webpack√链式操作√√替换一个规则里的loader√√√审查项目的webpack配置√以一个文件的方式使用解析好的配置√构建目标√√部署√本地浏览√第十章Vuex组件状态管理学习单元第十章Vuex组件状态管理学时2学习目标了解Vuex介绍熟练Vuex安装掌握Vuex状态管理熟练Vuex状态获取方法掌握Vuex状态同步更改方法掌握Vuex状态异步更改方法掌握Vuex状态模块化管理学习内容知识点了解掌握重点难点Vuex是什么√Vuex特点√通过npm或yarn安装√独立构建√组件中获取Vuex状态√√辅助函数mapstate()√对象展开运算符√√属性访问√√函数访问√√辅助函数mapGetters()√通过提交mutation更改Vuex状态√√√提交payload√对象风格提交方式√分发action√√√在组件中分发action√组合action√模块局部状态√模块命名空间√模块动态注册√模块重用√第十一章红色旅游App综合项目学习单元第十一章红色旅游App综合项目学时8学习目标红色旅游App总体规划脚手架及项目搭建第三方依赖的安装首页功能开发产品列表页功能开发搜索页面功能开发产品详情页功能开发购物车页面开发个人中心页面的实现路由配置项目调试学习内容知识点了解掌握重点难点功能结构的说明√安装axios√安装ElementPlus√构建统一头部√广告轮播组件√实现推荐内容列表√√√首页组件√√底部导航组件√√搜索框组件√√瀑布流组件改造√√√产品详情组件√√用户评价组件√√购物车页面开发√√√个人中心页面的实现√√路由配置√项目调试√√VisualStudioCode环境中调试√浏览器中调试√第十二章Vue3项目部署学习单元第十二章Vue3项目部署学时2学习目标了解构建发布版本掌握部署学习内容知识点了解掌握重点难点构建发布版本√√√项目部署√√√四、学时分配 章目 讲课上机合计第一章Vue3简介224第二章HelloWord与Vue3的基础特性224第三章Vue基本指令448第四章Vue组件应用448第五章样式绑定224第六章组件复用224第七章Vue路由448第八章axios异步请求224第九章VueCLI部署项目224第十章Vuex组件状态管理224第十一章红色旅游App综合项目8816第十二章Vue3项目部署224合计363672五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、上机成绩（20%）。六、选用教材和主要参考书本大纲是根据教材《Vue3基础入门》所设计的。参考资料：Vue官方网站《Vue.js官方使用