Vue.js前端开发实战（第2版）-教学大纲.docx

《Vue.js前端开发实战（第2版）-教学大纲.docx》由会员分享，可在线阅读，更多相关《Vue.js前端开发实战（第2版）-教学大纲.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Vuejs前端开发实战（第2版）课程教学大纲（课程英文名称）课程编号：学 分：学分课 时：80课时（其中：讲课48课时 上机32课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript 适用专业：信息技术及其计算机相关专一业一、课程的性质与目标本课程是一门面向Web前端开发人员的课程，用于快速掌握Vue框架的开发。本课程主要讲解了前端技术发展、Vue简介、Vue开发环境、使用Vite创建Vue 3项目、 单文件组件、数据绑定、指令、事件对象、事件修饰符、计算属性、侦听器、样式绑定、 选项式API和组合式API、生命周期函数、组件的注册和引用、解决组件之间的样式冲突、 父组

2、件向子组件传递数据、子组件向父组件传递数据、跨级组件之间的数据传递、动态组 件、插槽、自定义指令、引用静态资源、路由、常用UI组件库、网络请求和状态管理等内 容以及一个综合项目。另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内 容。通过本课程的学习，不仅可以让学生掌握Vuejs的核心知识，还可以培养学生的家国 情怀、责任担当、敬业精神。二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将Vue.js与项目开发相结合。按照 学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从 而培养学生分析问题和解决问题的能力。课程设计思路：本课程根据知识

3、点难易的先后顺序进行讲解。依次讲解初识Vue.js、 Vue.js基础知识、组件基础、路由、常用的UI组件库、网络请求和状态管理等，并结合示 例代码帮助学生进行理解。在每个章节中，通过阶段案例的实现，帮助学生学以致用，将 基础知识转化为解决实际问题的能力。在学习了 Vuejs基础知识后，通过实践项目，进一 步巩固知识，并提高学生的分析和解决问题的能力。操作系统：Windows 7或更高版本开发工具：Visual Studio Code Node.js、Chrome三、课程的主要内容及基本要求第1章初识Vue.js学习单元初识Vue.js课时5课时学习目标1 . 了解前端技术的发展，能够说出使用

4、框架开发项目的优势2 . 了解什么是Vue,能够说出Vue的基本概念3 . 了解Vue的特性，能够说出Vue的4个特性4 . 了解Vue的版本，能够说出Vue 2和Vue 3的区别5 .掌握Visual Studio Code编辑器的使用方法，能够完成中文语言扩展、Volar 扩展的安装，以及使用Visual Studio Code编辑器打开项目并在项目中创建 一个HTML5文档6 .掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装7 .掌握常见的包管理工具的使用方法，能够应用npm和yam相关命令下载、 升级、卸载包8 .掌握Vite的使用方法，能够使用Vite创建Vue

5、 3项目学习内容知识点掌握程度重点难点前端技术的发展了解什么是Vue了解Vue的特性了解Vue的版本了解Visual Studio Code 编辑器掌握Node.js 环境掌握常见的包管理工具掌握什么是Vite了解创建Vue 3项目掌握VVue3项目的目录结构熟悉Vue 3项目的运行过程了解第2章Vuejs开发基础学习单元Vue.js开发基础课时13课时学习目标1 .掌握单文件组件，能够创建并使用单文件组件2 .掌握数据绑定，能够定义数据并将数据渲染到页面中3 .掌握内容渲染指令，能够灵活运用v-text和v-html指令将字符串渲染到页 面中4 .掌握属性绑定指令，能够灵活运用v-bind指

6、令给目标元素的属性动态绑定 值5 .掌握事件绑定指令，能够灵活运用v-on指令给目标元素绑定事件6 .掌握双向数据绑定指令，能够灵活运用v-model指令在表单元素上实现数 据的双向绑定7 .掌握条件渲染指令，能够灵活运用v-if、v-show指令根据不同的条件渲染 不同的标签8 .掌握列表渲染指令，能够灵活运用v-for指令将数组、对象等中的数据渲 染到页面中9 .掌握事件对象，能够灵活运用事件对象获取和修改D0M元素的属性10 .熟悉事件修饰符，能够阐述常见的事件修饰符11 .掌握计算属性，能够灵活运用计算属性实时监听数据的变化，当所依赖的 数据发生变化时重新计算值12 .掌握侦听器，能够

7、灵活运用侦听器监听数据的变化并进行相应的操作13 .掌握样式绑定，能够灵活运用v-bind绑定class和style属性实现元素样式 的设置学习内容知识点掌握程度重点难点单文件组件掌握初识数据绑定掌握响应式数据绑定掌握V内容渲染指令掌握属性绑定指令掌握V事件绑定指令掌握V双向数据绑定指令掌握V条件渲染指令掌握V列表渲染指令掌握V事件对象掌握事件修饰符熟悉计算属性掌握侦听器掌握绑定class属性掌握绑定style属性掌握阶段案例一一学习计划表掌握第3章组件基础（上）学习单元组件基础（上）课时11课时学习目标1 .熟悉选项式API和组合式APL能够说出选项式API和组合式API的区别2 .掌握生命

8、周期函数的使用方法，能够灵活运用生命周期函数在特定时间执 行特定的操作3 .掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成组件的注册4 .掌握引用组件的方法，能够在Vue项目中以标签的形式引用组件5 .掌握组件之间样式冲突问题的解决方法，能够运用style标签的scoped 属性和深度选择器解决组件之间样式冲突的问题6 .掌握父组件向子组件传递数据的方法，能够使用props实现数据传递7 .掌握子组件向父组件传递数据的方法，能够使用自定义事件实现数据传递8 .掌握跨级组件之间的传递数据的方法，能够使用依赖注入实现数据共享学习内容知识点掌握程度重点难点选项式API和组合式API熟悉生

9、命周期函数掌握注册组件掌握引用组件掌握解决组件之间的样式冲突掌握声明props掌握静态绑定props掌握动态绑定props掌握验证props掌握在子组件中声明自定义事件掌握在子组件中触发自定义事件掌握在父组件中监听自定义事件掌握跨级组件之间的数据传递掌握阶段案例一一待办事项掌握第4章组件基础（下）学习单元组件基础（下）课时8课时学习目标1 .掌握动态组件的使用方法，能够实现动态组件的渲染2 .掌握KeepAlive组件的使用方法，能够使用Ke叩Alive,标签完成组件缓存3 .掌握组件缓存相关的生命周期函数，能够在对应的生命周期函数中执行相 应的动作4 .熟悉KeepAlive组件的常用属性，

10、能够说明各个属性的作用5 .掌握什么是插槽，能够定义和使用插槽6 .掌握具名插槽的使用方法，能够通过name属性定义具名插槽7 .掌握作用域插槽的使用方法，能够在父组件中使用子组件中的数据8 . 了解什么是自定义指令，能够说出自定义指令的概念和分类9 .掌握私有自定义指令的使用方法，能够独立完成私有自定义指令的声明和 使用10 .掌握全局自定义指令的使用方法，能够使用对象形式和函数形式来声明全 局自定义指令11 .掌握为自定义指令绑定参数的使用方法，能够通过等号（=）的方式，为 当前指令绑定参数12 .掌握自定义指令的函数形式，能够使用函数形式简化自定义指令的声明13 .掌握引用静态资源的方法

11、,能够引用public和srcassets目录下的静态资源学习内容知识点掌握程度重点难点定义动态组件掌握利用KeepAlive组件实现组件缓存掌握组件缓存相关的生命周期函数掌握KeepAlive组件的常用属性熟悉什么是插槽掌握具名插槽掌握V作用域插槽掌握V什么是自定义指令了解私有自定义指令的声明与使用掌握全局自定义指令的声明与使用掌握为自定义指令绑定参数掌握自定义指令的函数形式掌握引用静态资源掌握阶段案例一一商品管理掌握第5章路由学习单元路由课时10课时学习目标1 . 了解什么是路由，能够说出前后端路由的基本工作原理2 .掌握Vue Router的安装，能够独立安装Vue Router3 .掌

12、握Vue Router的基本使用方法，能够在项目中配置Vue Router4 .掌握路由重定向的使用方法，能够解释路由重定向的实现5 .掌握嵌套路由的使用方法，能够实现路由的嵌套6 .掌握动态路由的使用方法，能够实现动态路由的匹配7 .掌握命名路由的使用方法，能够解释命名路由的实现8 .掌握编程式导航的使用方法，能够灵活应用编程式导航9 .掌握导航守卫的使用方法，能够实现路由访问权限的控制学习内容知识点掌握程度重点难点初识路由了解Vue Router的安装掌握Vue Router的基本使用掌握路由重定向掌握嵌套路由掌握动态路由概述了解获取动态路径参数值掌握V命名路由掌握编程式导航掌握V导航守卫

13、掌握阶段案例一一后台管理系统掌握第6章常用UI组件库学习单元常用UI组件库课时9课时学习目标1 .掌握Element Plus组件库的安装方法，能够独乂安装、配置Element Plus2 .掌握Element Plus中常用组件的使用方法，能够实现按钮、表格、表单和 菜单效果3 .掌握Vant组件库的安装方法，能够独立安装、配置Vant4 .掌握Vant中常用组件的使用方法，能够实现按钮、轮播、标签页、表单、 网格和标签栏效果5 .掌握Ant Design Vue组件库的安装方法，能够独立安装、配置Ant Design Vue6 .掌握Ant Design Vue中常用组件的使用方法，能够实

14、现按钮和布局效果学习内容知识点掌握程度重点难点安装 Element Plus掌握Element Plus中的常用组件-Button组件掌握Element Plus中的常用组件-Table组件掌握Element Plus中的常用组件-Form组件掌握VElement Plus中的常用组件-Menu组件掌握V安装Vant掌握Vant中的常用组件-Button组件掌握VVant中的常用组件-Swipe组件掌握Vant中的常用组件-Tab组件掌握VVant中的常用组件-Form组件掌握VVant中的常用组件-Grid组件掌握VVant中的常用组件-Tabbar组件掌握V安装 Ant Design Vu

15、e掌握Ant Design Vue中的常用组件-Button组件掌握Ant Design Vue中的常用组件-Layout组件掌握V第7章网络请求和状态管理学习单元网络请求和状态管理课时8课时学习目标1 . 了解Axios的基本概念，能够说出Axios的功能和主要特性2 .掌握Axios的安装和使用方法，能够在项目中安装并使用Axios3 .掌握Axios图书列表案例的实现，能够使用Axios完成网络请求4 . 了解Vuex的基本概念，能够说出Vuex的工作原理5 .掌握Vuex的安装和使用方法，能够在项目中安装并使用Vuex6 .掌握Vuex计数器案例的实现，能够运用Vuex完成计数器效果7

16、 . 了解Pinia的基本概念，能够说出Pinia的功能和优点8 .掌握Pinia的安装和使用方法，能够在项目中安装并使用Pinia9 .掌握Pinia计数器案例的实现，能够运用Pinia完成计数器效果10 .熟悉Pinia模块化，能够阐述Pinia模块化的实现原理11 .掌握Pinia持久化存储，能够运用Pinia实现全部数据或部分数据的持久化 存储学习内容知识点掌握程度重点难点Axios概述了解安装Axios掌握使用Axios掌握VAxios图书列表案例掌握Vuex概述了解安装Vuex掌握使用Vuex掌握VVVuex计数器案例掌握Pinia概述了解安装Pinia掌握使用Pinia掌握VPi

17、nia计数器案例掌握Pinia模块化熟悉Pinia持久化存储掌握第8章项目实战“微商城”前后台开发学习单元项目实战一一“微商城”前后台开发课时16课时学习目标1 .熟悉项目的前台页面效果，能够说出前台项目包含的页面和主要功能2 .熟悉项目的后台页面效果，能够说出后台项目包含的页面和主要功能3 .掌握项目的具体实现，能够独立完成项目各个页面的编写学习内容知识点掌握程度重点难点项目前台分析熟悉项目后台分析熟悉项目前台一首页掌握项目前台一分类掌握项目前台一商品详情掌握项目前台一消息掌握项目前台一购物车掌握V项目前台一我的掌握项目后台一登录页掌握VV项目后台一首页掌握项目后台一分类管理页掌握项目后台一

18、商品管理页掌握项口后台一个人中心页掌握课时分配章目讲课上机合计第1章初识Vue.js325见黑马程序员传翼教育旗下I高端IT教育品牌第2章Vue.js开发基础7613第3章组件基础（上）6511第4章组件基础（下）448第5章路由6410第6章常用UI组件库639第7章网络请求和状态管理448第8章项目实战一一“微商城”前后台开发12416合计483280五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成 绩（30%）和期末考试（70%）组成，其中，平时成绩包括出勤（5%）、作业（5%）、上 机成绩（20%） o六、选用教材和主要参考书本大纲是根据教材Vue.js前端开发实战（第2版）所设计的。七、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课， 并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指 定的程序设计或验证。撰写人：审定人：批准人：执行时间：