《Vue.js前端框架技术与实战》教学大纲与实训大纲

《Vuejs前端框架技术与实战》

教学大纲与实训大纲学分:4学时：64（48时理论/16时上机）一、课程的性质、地位与任务《Vue.js前端框架技术与实战》课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体技术、物联网工程等专业的一门专业（必修/选修）课程，也是其他计算机相关专业的普及型课程，通过对Vue.js的特性和开发环境配置的了解和Vue.js基础语法、指令、组件、过渡与动画、Vuex.VueRouter以及周边生态系统的学习和研究，让学生理解和掌握Vue.js这一渐进式框架的核心概念（组件化、模块化），通过项目实践培养学生开发和设计复杂的单页面应用的基本技能和素质要求，适应目前Web前端工程师的岗位需要。二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Vue.js渐进式框架的核心概念，熟练掌握Vue.js前端项目开发基本流程、开发环境部署与配置、单页面应用项目目录结构定义等基础知识。掌握Vue.js基础语法、指令、组件开发、过渡与动画等关键概念；掌握使用VueRouter实现单页面内导航与路由设置，结合Vuex解决大中型Web前端项目数据共享问题，初步熟悉Vue3.0新特性，能够使用Vue3.0新特性解决简易的web前端项目，通过比较法来加深对Vue3.0新特性的理解。本课程的教学目标是让学生运用HTML5、CSS3、JavaScript熟悉地理解和掌握Vue.js核心概念和基础语法，掌握Vue指令、组件、过渡与动画等语法与使用方法。熟练地使得VueRouter来构建单页面导航并渲染路由组件。在中小型项目中使用Vuex解决多组件状态数据共享的问题。让学生使用VueCLI脚手架来搭建Vue2.6和Vue3.0项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功能于一体的中小型Web单页面的能力。三、课程内容（重点△,难点★）第1章.Vue.js概述.1了解Vue.js简介△学会Vue.js生产环境配置2.1Vue.js引入方法2.2安装VueDevtools△掌握VUE页面基本结构3.1template标t己3.2script标记3.3style标记熟悉Vue.js开发工具（会熟练使用一种主流开发工具）4.1掌握VisualStudioCode【推荐】4.2SublimeText4.3WebStorm51.组件间通信(1)学会定义Vue组件，并学会注册组件。(2)学会使用CSS定义div>button>input及img标记的样式。(3)学会使用事件总线来实现任意组件间相互通信，能够使用$emil()和$on()来发送和接收消息。(4)学会定义Vue实例和配置相关选项，会定义相关方法。学会定义HTML5表单。22.插槽综合实训一页面布局换肤(1)学会全局定义Vue组件，并完成组件的设计。(2)学会使用CSS定义div、button.h3及slot等标记的样式。(3)利用props属性实现父组件向子组件传值。(4)学会定义具名插槽来展示传递信息，利用动态插槽名的变更实现内容和样式的更新传递。(5)学会定义Vue实例和配置相关选项，会定义相关方法实现相关功能。61.多组件过渡(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS定义超链接等标记的样式，学会使用过渡类名，并完成多组件过渡样式定义。(3)学会trsnaition组件及动态组件实现多个组件切换显示。22.列表过渡实训一列表添加、删除及重新排序(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS3定义按钮、列表及列表项的样式效果。(3)学会使用lodash.js来定义列表项弹跳式动画(洗牌(_.shuffle(arrayName))效果。(4)学会使用transition-group组件来实现列表的进入/离开的过渡、排序过渡的效果。71.webpack打包资源(1)学会使用Vue创建工程项目。(2)学会编写index,html、main,js、webpack,config,js等文件。(3)学会使用DOM操作创建、添加新元素。(4)学会导入CSS样式文件、图像文件到JavaScript文件中。(5)学会使用webpack编译和打包工程文件，并能在调试状态下运行项目。22.Vue-cli可视化创建项目实训一创建webpack-ex-2项目(1)学会使用VueUI启动图形化界面创建工程项目。(2)学会使用VueUI创建与管理Vue项目(创建、预设、配置等)。81.Vue+VueRouter+webpack组合实训(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由、定义路由组件、定义路由管理器实例。(4)参照天猫中”服饰主会场”中部分页面效果。使用Vue+VueRouter+Webpack完成项目实训。22.VueRouter+webpack(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由及嵌套路由、定义路由组件、定义路由管理器实例。9LVuex项目实训一计数器counter(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入Vuexo(3)学会使用Vuex的state>getters>mutations、actions等核心概念解决工程应用中状态共享问题。(4)学会使用计算属性和辅助函数获取Vuex状态。(5)学会在组件中使用this.$store.state获取状态，使用this.$store.commit触发mutation及使用this.$store.dispatch分发actiono(6)学会编写action和mutation函数，并习惯使用action去触发mutation。22.Vuex项目实战综合运用Vuex的五大核心概念，使用多module来分割store,同时使用命名空间来区分使用不同模块的action。以“IT管理学院信息管理系统”为例，简易实现教师和学生的管理。(1)教师端。主要功能是输入教师信息，并添加到教师列表中，然后可能给指定ID的教师增加薪酬，并将增加薪酬的教师信息添加背景颜色来标识一下。⑵学生端。主要功能是给学生增加成绩，每次递增5分，最高成绩为100分，成绩范围：30〜95。101.Vant官方示例合集实训一使用Vant搭建应用(1)学会从GitHub上下载相关项目资源(https://github.com/youzan/vant-demo),并能够按照README,md提示的步骤进行项目部署。(2)熟悉Vant-Demo(vant-demo-master)项目中vant/base子项目所采用的技术栈(Vue、VueCli>VueRouter>Vant)。(3)学会使用VueRouter定义路由、定义路由组件、定义路由管理器实例。(4)熟悉使用Vue+VueRouter+Vant构建项目，了解项目文件构成结构。0(课外实践)2.Vue+Element表格组件实训一带搜索功能的表格数据分页显示(1)学会使用CDN或本地引入Vue和ElementUI。(2)熟悉ElementUI组件库中组件的分类，重点掌握输入框组件(el-input),表格组件(el-table>el-table-column)>行/列组件(el-row、el-col)和按钮(el-button)等组件的使用方法。(3)掌握分页组件(el-pagination)的layout、backgroundssize、pager-count>total、small等属性的含义与设置方法。11l.Vue.js高级应用实训一友联通讯录自己动手，完成“友联通讯录”的所有功能实训练习。并尝试对友联通讯录主页面addressBook.vue文件进行修改，使用ElementUI中Pagination分页组件实现通讯录按设定的“行/页”格式显示。0(课外实践)2.Vue.js高级应用实训一通用登录/注册管理系统熟悉Vue前后端分离项目的开发流程，自己动手，完成“通用登录/注册管理系统”的所有功能实训练习。(1)在数据库login中增加一个数据表books,设置bookno(字符，13位)、bookname(字符，50位)、pubpress(字符，30位)、bookdate(日期,如“2020-09-21")、price(浮点)、count(整数，库存)等字段。(2)参照user表，编写图书操作的CRUD的sqlMap.js和bookApi.js,并在左侧导航中增加相应的图书操作的菜单和编写相对应的Vue组件。121.Vue3.0提供/注入实训一父组件操控子组件中div样式(1)掌握使用VueCLI创建Vue3.0简易工程项目的方法。(2)掌握Vue3.0中的提供/注入provideO/inject()函数的使用方法。(3)学会定义setup。函数和创建ref响应式对象。2(4)学会使用provide。函数提供普通数据共享和ref响应式数据共享。(5)学会按需导入项目中所需要的函数。(1)学会使用VueCLI创建集成Vuex和VueRouter功能的Vue3.0工程项目。会使用手动或自动方式进行项目初始选项的设置。(2)熟悉默认初始创建项目的文件结构，并会与Vue2.x项目文件结构进行比较，总结Vue3.0项目文件结构的特点。2.Vue3.0中Vuex和VueRouter实训一简易图书选购(3)学会使用VueRouter定义路由、定义路由组件。会使用createRouter、createWebllistory两个API2.Vue3.0中Vuex和VueRouter实训一简易图书选购(4)学会使用createStore创建store对象。根据状态数据的操作需要编写相关的mutations和actionso(5)学会在组件中导入useStoreAPI函数，并在setup()函数内触发相关的mutations或分发actions。学会导入useRouterAPI函数，并在setup。函数中使用路由器来切换路由。(6)完成项目的开发任务。六、课内实训(一)本课程实训的目的与要求通过本课程的课堂学习和实训，使学生加深理解Vue.js核心概念和基本语法，掌握内部指令和自定义指令、组件定义与通讯和过渡与动画等基础知识。能够熟练地运用VueRouter和Vuex组件技术解决实际工程中单页面导航和组件渲染及多组件状态数据共享。通过项目实训，让学生使用VueCLI脚手架来搭建Vue2.6和Vue3.0项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功肯汗一体的中小型Web单页面的能力。基本要求：.熟练掌握Vue.js前端框架技术主流开发工具和环境部署方法。.掌握Vue项目的组件化和模块化构建技术的核心思想与方法。.深入学习VueRouter和Vuex组件技术，解决实际项目中路由导航和状态数据共享问题。.学会使用VueCLI构建Vue2.6和Vue3.0项目。(二)本课程实训的项目和主要内容序号项目名称学时主要内容类型11-1.内置指令v-model实训--下拉列表框绑定0(课外实践)(1)学会定义Vue根实例对象及el和data选项。(2)学会引入Vue,完成Vue视图的定义。(3)学会使用v-model指令绑zeselect儿系。设计性21-2.模板中v-bind指令实训—Vue实例中选项的配置⑴学会引入Vue、定义Vue实例及配置el、template和data的选项。(3)学会在template模板中使用data中的数据，并在模板中绑定classo设计性32T.侦听属性的综合实训一动态观察学生信息采集。2(1)学会引入Vue.js及定义Vue实例对象、配置el和data等选项。(2)学会配置methods和watch等选项，并完成函数的定义。(3)学会使用v-model>v-bind、v-on等指令来完成表单绑定、属性绑定和事件绑定。设计性42-2.计算属性、方法、过滤器的综合实训一邮购商品业务(1)学会定义Vue实例对象、配置el和data、methods、computed等选项。(2)学会引入Vue.js,使用v-model、v-on、v-for等指令来完成表单绑定、事件绑定、遍历商品。(3)学会定义filters和methods属性。设计性53-1.内置指令实训一人员添加并输出2(1)学会引入Vue,定义Vue实例对象及配置el>data和methods等选项。(2)学会使用v-on、v-model>v-bind及v-for等内部指令。设计性63-2.自定义指令实训一自定义字符装饰(1)学会引入Vue,同时定义2个Vue实例对象，分别解决不同的应用需求，并配置el>data和directives等选项。(2)学会使用自定义指令的注册方法。会用全局注册和局部注册的方式定义相关的指令。(3)学会使用v-bind指令绑定style,给div设置相应的样式。设计性74-l.Vue.js基础案例实训一简易图书管理0(课外实践)使用HTML5表单元素，设计图书信息添加界面完成图书添加、图书搜索、图书删除。图书信息包含：图书ID、图书名称、出版社、作者、插入日期等字段。综合性84-2.Vue.js基础案例实训--我的待办事项使用HTML5表单完成界面设计。按“添加”按钮将待办事项添加到展示项目中。在复选框中打上勾号“ 标记一下完成的待办事项，单击“X”符号册U除该事项。完成状态显示栏设置。剩余项目数/项目数、全部、待完成、已完成、清除完成等功能。综合性95T.组件间通信实训一友谊聊吧2(1)学会定义Vue组件，并学会注册组件。(2)学会使用事件总线来实现任意组件间相互通信，能够使用$emit()和$on()来发送和接收消息。(3)学会定义Vue实例和配置相关选项，会定义相关方法。学会定义HTML5表单。设计性105-2.插槽综合实训一页面布局换肤(1)学会全局定义Vue组件，并完成组件的设计。(2)利用props属性实现父组件向子组件传值。(3)学会定义具名插槽来展示传递信息，利用动态插槽名的变更实现内容和样式的更新传递。设计性116-1.多组件过渡实训一京东一智能生活-部分菜单仿真设计2(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS定义超链接等标记的样式，学会使用过渡类名，并完成多组件过渡样式定义。(3)学会trsnaition组件及动态组件实现多个组件切换显示。设计性126-2.列表过渡实训一列表添加、删除及重新排序(1)学会定义Vue实例，并完成相关选项的配置。(2)学会使用CSS3定义按钮、列表及列表项的样式效果。(3)学会使用lodash.js来定义列表项弹跳式动画(洗牌(_.shuffle(arrayName))效果。(4)学会使用transition-group组件来实现列表的进入/离开的过渡、排序过渡的效果。设计性137-1.webpack打包资源2(1)学会使用Vue创建工程项目。(2)学会编写index.html>main.js>webpack,config.js等文件。(3)学会使用DOM操作创建、添加新元素。学会导入CSS样式文件、图像文件到JavaScript文件中。(4)学会使用webpack编译和打包工程文件，并能在调试状态下运行项目。设计性147-2.Vue-cli可视化创建项目实训一创建webpack-ex-2项目(1)学会使用VueUI启动图形化界面创建工程项目。(2)学会使用VueUI创建与管理Vue项目(创建、预设、配置等)。验证性/操作性158-1.Vue+VueRouter+webpack组合2(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由、定义路由组件、定义路由管理器实例。(4)参照天猫中”服饰主会场”中部分页面效果。使用Vue+VueRouter+Webpack完成项目实训。设计性168-2.VueRouter+webpack项目(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入vue-router插件。(3)学会使用VueRouter设置导航、定义路由及嵌套路由、定义路由组件、定义路由管理器实例。(4)参照“百度推广”首页导航(.baidu.com/ebaidu/home)。使用Vue+VueRouter+Webpack完成项目实训。设计性179-LVuex项目实训一计数器counter2(1)学会使用webpack模板创建Vue项目。(2)学会在项目中安装和导入Vuexo(3)学会使用Vuex的state、getters、mutations、actions等核心概念解决工程应用中状态共享问题。(4)学会使用计算属性和辅助函数获取Vuex状态。(5)学会在组件中使用this.$store.state获取状态，使用this.$store.commit触发mutation及使用this.$store.dispatch分发actiono(6)学会编写action和mutation函数，并习惯使用action去触发mutation。设计性189-2.Vuex项目实战—Vuex-IT管理学院信息管理系统综合运用Vuex的五大核心概念，使用多module来分割store,同时使用命名空间来区分使用不同模块的action。以“IT管理学院信息管理系统”为例，简易实现教师和学生的管理。教师端。主要功能是输入教师信息，并添加到教师列表中，然后可能给指定ID的教师增加薪酬，并将增加薪酬的教师信息添加背景颜色来标识一下。学生端。主要功能是给学生增加成绩，每次递增5分，最高成绩为100分，成绩范围：30〜95o综合性1910-1.Vant官方示例合集实训一使用Vant搭建应用0(课外实践)(1)学会从Gitllub上下载相关项目资源(https://github.com/youzan/vant-demo),并能够按照README,md提示的步骤进行项目部署。(2)熟悉Vant-Demo(vant-demo-master)项目中vant/base子项目所采用的技术栈(Vue、VueCli>VueRouter、Vant)。(3)学会使用VueRouter定义路由、定义路由组件、定义路由管理器实例。(4)熟悉使用Vue+VueRouter+Vant构建项目，了解项目文件构成结构。验证性2010-2.Vue+Element表格组件实训一带搜索功能的表格数据分页显示(1)学会使用CDN或本地引入Vue和ElementUI。(2)熟悉ElementUI组件库中组件的分类，重点掌握输入框组件(el-input)>表格组件(el-table、el-table-column)>行/列组件(el-row、el-col)和按钮(el-button)等组件的使用方法。(3)掌握分页组件(el-pagination)的layout、backgroundssize、pager-count>total、small等属性的含义与设置方法。设计性2111-1.Vue.js高级应用实训一友联通讯录0(课外实践)自己动手，完成“友联通讯录”的所有功能实训练习。并尝试对友联通讯录主页面addressBook.vue文件进行修改，使用ElementUI中Pagination分页组件实现通讯录按设定的“行/页”格式显示。综合性2211-2.Vue.js高级应用实训一通用登录/注册管理系统熟悉Vue前后端分离项目的开发流程，自己动手，完成“通用登录/注册管理系统”的所有功能实训练习。(1)在数据库login中增加一个数据表books,设置bookno(字符，13位)、bookname(字符，50位)、pubpress(字符，30位)、bookdate(日期，如“2020-09-21")、price(浮点)、count(整数，库存)等字段。(2)参照user表，编写图书操作的CRUD的sqlMap.js和bookApi.js,并在左侧导航中增加相应的图书操作的菜单和编写相对应的Vue组件。综合性2312-1.Vue3.0提供/注入实训一父组件操控子组件中div样式2(1)掌握使用VueCLI创建Vue3.0简易工程项目的方法。(2)掌握Vue3.0中的提供/注入provideO/inject()函数的使用方法。(3)学会定义setup()函数和创建ref响应式对象。(4)学会使用provide()函数提供普通数据共享和ref响应式数据共享。(5)学会按需导入项目中所需要的函数。综合性2412-22.Vue3.0中Vuex和VueRouter实训一简易图书选购(1)学会使用VueCLI创建集成Vuex和VueRouter功能的Vue3.0工程项目。会使用手动或自动方式进行项目初始选项的设置。(2)熟悉默认初始创建项目的文件结构，并会与Vue2.x项目文件结构进行比较，总结Vue3.0项目文件结构的综合性特点。⑶学会使用VueRouter定义路由、定义路由组件。会使用createRouter>createWebHistory两个API创建路由管理器router和history对象。(4)学会使用createStore创建store对象。根据状态数据的操作需要编写相关的mutations和actionso(5)学会在组件中导入useStoreAPI函数，并在setup。函数内触发相关的mutations或分发actions。学会导入useRouterAPI函数，并在setup()函数中使用路由器来切换路由。(6)完成项目的开发任务。(三)实验说明课程总学分4实验学时数16实验项目数24考核方式日常考核团操作技能考核口卷面考核口提交实验结果回面试口适用专业与年级：计算机科学与技术、软件工程、信息管理与信息系统、网络工程、数字媒体技术、物联网工程等相关专业1-3年级七、课程实施计划序号教学方式教学内容作业要求教学目标1课堂讲课第1章Vue.js概述1了解Vue.js简介△学会Vue.js生产环境配置△掌握VUE页面基本结构4熟悉Vue.js开发工具第2章Vue.js基础1理解MVC与MWM模式1.1MVC模式1.2MVVM模式2.2△掌握数据绑定与插值2.2.1文本绑定2.2.2HTML代码绑定2.2.3属性绑定2.2.4JavaScript表iA式绑7E练习1掌握常用的Vue.js开发工具。学会配置Vue.js生产环境。掌握Vue.js页面的基本组成。学会编写最基本的Vue.js页面。理解MVC、MVVM模式的工作机制。掌握多种类型数据绑定的方法。2课堂讲课第2章Vue.js基础△掌握计算属性与方法3.1计算属性基础应用3.2△计算属性缓存与方法比较3.3计算属性的setter和getter★掌握侦听属性WATCH掌握计算属性与方法在使用上的区别。学会使用侦听属性处理数据变化的相关事务。学会基本的控制台输出语句【根据学时和教学要求自选确定教学内容】2.4.1★watch属性基本用法2.4.2★watch属性高级用法2.5★理解生命周期钩子函数2.5.1生命周期钩子函数作用2.5.2生命周期钩子函数应用2.6学会使用控制台CONSOLE对象2.6.1△显示信息的命令占位符2.6.3console,group()分组显示2.6.4△查看对象的信息console,dir()【选学】显示某个节点的内容console,dirxml()【选学】2.6.6判断变量是否为真console,assert()【选学】2.6.7追踪函数的调用轨迹console,trace()【选学】2.6・8计时功能【选学】性能分析【选学】表格形式输出数组和对象console,table()理解生命周期钩子函数在使用上的差异性。3课堂讲课第2章Vue.js基础2.7掌握数据与方法2.7.1△数据对象的定义与使用7.2△Vue实例属性与方法2.8★掌握Vue中数组变动更新检测2.8.1★变异方法2.8.2★非变异方法2.9理解并掌握Vue中过滤器学会定义及使用数据对象掌握数据实例的相关方法掌握数据中数组对象的变异与非变异方法学会定义与使用过滤器4上机实训实训2-1、实训2-2练习25课堂讲课3.1△掌握Vue.js内置指令3.1.1△条件渲染△用key管理可复用的元素△根据条件展示元素v-show1.4△列表渲染v-for指令理解Vue.js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方法6课堂讲课第3章Vue.js指令3.1.5△绑定属性v-bind指令3.1.6△事件处理v-on指令3.1.7事件修饰符3.1.8按键修饰符v-for指令及v-bind:key属性配合使用的方法。掌握数据绑定的多种方式。掌握事件处理指令及事件修饰符的使用方法。掌握HBuilderX【推荐】第2章Vue.js基础1理解MVC与MWM模式1.1MVC模式1.2MVVM模式2.2△掌握数据绑定与插值2.1文本绑定2.2HTML代码绑定2.3属性绑定2.4JavaScript表达式绑定△掌握计算属性与方法3.1计算属性基础应用3.2△计算属性缓存与方法比较3.3计算属性的setter和getter★掌握侦听属性WATCH4.1★watch属性基本用法4.2★watch属性高级用法★理解生命周期钩子函数5.1生命周期钩子函数作用5.2生命周期钩子函数应用学会使用控制台CONSOLE对象2.6.1△显示信息的命令占位符2.6.3分组显示console,group()2.6.4△查看对象的信息console,dir()2.6.5显示某个节点的内容console,dirxml()2.6.6判断变量是否为真console,assert()2.6.7追踪函数的调用轨迹console,trace()2.6.8计时功能2.6.9性能分析6.10表格形式输出数组和对象console,table()掌握数据与方法7.1△数据对象的定义与使用7.2△Vue实例属性与方法★掌握Vue中数组变动更新检测8.1★变异方法8.2★非变异方法2.9理解并掌握Vue中过滤器7课堂讲课第3章Vue.js指令3.1.9Av-model表单输入绑定表单元素值绑定3.1.11v-model与修饰符3.1.12v-text与v-html指令3.1.13 △v-cloak、v-once、v-pre指令掌握v-model>v-text>v-html等内置指令的作用与使用方法。掌握V-cloak、v-once>v-pre等其它内置指令的作用与使用方法。8课堂讲课第3章Vue.js指令3.2△★掌握Vue.js自定义指令3.2.1△自定义指令注册3.2.2对象字面量3.2.3★动态指令参数3.2.4自定义指令实际应用掌握Vue自定义指令定义与注册的方法。9上机实训实训3-1、实训3-2练习310课堂讲课第4章Vue.js基础案例实战简易图书管理.1.1简易图书管理项目需求.1.2简易图书管理项目实现我的待办事项MyToDos.2.1我的待办事项项目需求.2.2我的待办事项项目实现课外实训4-1、4-2掌握Vue简易项目基本组成。学会在项目中引入Vue.js。掌握常用v-for>v-bind>v-on>v-model>v-show等指令的使用方法。掌握Vue过滤器的定义方法。11课堂讲课第5章Vue.js组件开发5.1掌握组件基础5.1.1组件命名5.1.2组件注册5.2★掌握组件间通信5.2.1★父组件向子组件传值5.2.2★子组件向父组件传值熟悉组件的命名规范。掌握全局、局部注册组件的方法。掌握组件间常用的通信方法。12上机实训第5章Vue.js组件开发5.2.3★兄弟组件之间通信5.2.4★父链与子组件索引5.3掌握单文件组件掌握兄弟组件间通信方法。学会使用父链this.$parent和子组件索引this.$refs来使用组件的数据理解单文件组件的构成。13课堂讲课第5章Vue.js组件开发5.4★掌握插槽5.4.1★匿名插槽5.4.2★具名插槽5.4.3★作用域插槽5.4.4★动态插槽名掌握插槽的分类和定义方法。14上机实训实训5-1、实训5-2练习515课堂讲课第6章Vue.js过渡与动画△掌握单元素/组件的过渡1.1△过渡的类名1.2Z\CSS过渡1.3ZkCSS动画1.4自定义过渡的类名1.5同时使用过渡和动画.6显性的过渡持续时间1.7JavaScript钩子6.2掌握初始渲染的过渡熟悉过渡类名的含义和命名规范。掌握单元素/单组件的过渡方法。掌握初始渲染过渡的方法。16课堂讲课第6章Vue.js过渡与动画△掌握多个元素的过渡△掌握多个组件的过渡6.5掌握列表过渡6.5.1★列表的进入/离开过渡6.5.2★列表的排序过渡6.5.3列表的交错过渡掌握列表进入/离开、排序和交错过渡的实现方法。学会编写带有Vue.js过渡和动画效果的页面。17上机实训实训6-1、实训6-2练习618课堂讲课第7章Vue项目开发环境与辅助工具部署理解部署node,js7.1.1Node,js简介7.1.2Node,js部署7.1.3△Node,js模块系统7.1.4Node,js创建第一个应用7.2掌握Node包管理器npm7.2.1npm简介7.2.2△npm常用命令7.3△掌握Node,js环境配置熟悉Vue项目基本开发环境和常用的辅助工具。掌握常用NPM包管理器命令。19课堂讲课第7章Vue项目开发环境与辅助工具部署7.4掌握webpack打包工具7.4.1webpack简介7.4.2△webpack使用与基本配置7.4.3△★webpack配置加载器loaders7.4.4★webpack配置插件7.4.5△webpack配置开发服务器7.5掌握VUECLI7.5.1VueCLI安装7.5.2AVueCLI创建Vue项目7.5.3AVueCLI可视化创建Vue项目学会webpack安装和配置。学会VueCLI安装与项目创建。20上机实训实训7T、实训7-1练习721课堂讲课第8章前端路由VueRouter8.1△掌握VueRouter概述8.1.1VueRouter安装与使用8.1.2VueRouter基础应用8.2△掌握VueRouter高级应用8.2.1△★动态路由匹配学会安装和配置VueRoutero学会定义路由表和路由。掌握router-link和router-view标记的基本语法。理解VueRouter的各种高级应用-动态路由。22课堂讲课第8章前端路由VueRouter8.2.2△嵌套路由8.2.3△编程式导航8.2.4△命名路由8.2.5△命名视图8.2.6△重定向和别名8.2.7★路由组件传参8.2.8Z\HTML5History模式理解VueRouter的各种高级应用。学会使用VueRouter实现单页应用中的导航。23上机实训实训8-1、实训8-1练习824上机实训第9章状态管理模式Vuex9.1掌握Vuex概述9.1.1Vuex定义简单状态管理-store模式△掌握Vuex基本使用△掌握Vuex核心概念9.3.1一个完整的store结构9.3.2最简单的store9.3.3Vuex中state9.3.4Vuex中getter掌握Vuex的工作原理。掌握Vuex五个核心概念。25课堂讲课第9章状态管理模式Vuex9.3.5△★Vuex中mutation9.3.6△★Vuex中action9.3.7△★Vuex中module9.4理解并掌握Vuex多模块实战案例掌握Vuex中mutation和action的定义与使用方法。熟悉多模块的应用场景。26上机实训实训9-1、实训9-1练习927课堂讲课第10章VueUI组件库10.1理解并掌握VuePC端组件库10.1.1△ElementUI10.1.2iViewUI10.1.3其它PC端UI组件库10.2理解并掌握Vue移动端UI组件库10.2.1MintUI10.2.2AVantUI掌握Element桌面端UI框架的引入与组件使用方法。掌握iView桌面端UI框架的引入与组件使用方法。掌握Mint移动端UI框架的引入与组件使用方法。掌握Vant桌面端U1框架的引入与组件使用方法。28课堂讲课第11章Vue高级项目实战11.1理解并掌握友联通讯录项目需求实现技术11.1.3环境配置11.1.4★项目实现课外实-VII11-1学会Vue-Router安装与路由的配置方法。掌握WebStorage对象的常用方法。29课堂讲课第11章Vue高级项目实战11.2★理解并掌握通用登录/注册管理系统1项目需求实现技术环境配置★项目实现课外实UH11-2学会使用ElementUI相关组件解决实际工程问题。学会安装与配置MySQL、Express、axios、body-parser等模块。30课堂讲课第12章Vue3.0基础应用1了解Vue3.0新特性新特性简介下一阶段工作1.3Vue3.0学习参考12.2学会Vue3.0初步体验12.2.1Vue3.0下载与引用12.2.2Vue3.0创建简易应用12.2.3Vue3.0发布文档的使用12.3△★掌握Vue3.0新特性应用12.3.1使用脚手架创建项目12.3.2△组件选项setup()12.3.3ref()、reactive()和toRefs()12.3.4△watch、watchEffect和computed学会使用VueCLI脚手架创建Vue3.0工程项目学会使用crateApp函数创建实例对象。学会在Vue文件中script标记中定义setup()函数学会使用ref和reactive函数来创建响应式对象。学会使用toRefs将响应式对象转换为普通对象。学会使用computed、watch和watchEffect定义和监听响应式数据。31课堂讲课第12章Vue3.0基础应用12.3.5△ref引用DOM元素和组件实例12.3.6AVueRouter和Vuex12.3.7AVue3.0生命周期12.3.8△提供provide()和注入inject()12.3.9★组合式API12.3.10★模板refs12.4理解并掌握VUE3.0购物车实战12.4.1项目设计要求12.4.2△★项目实现学会使用ref引用D0M元素和组件实例。学会使用Vue3.0中集成的Vuex和VueRouter来开发项目。学会使用Vue3.0中的provide和inject来解决数据共享问题。学会使用其它Vue3.0新特性。32上机实训实训12-1、实训12T练习12八、教学工具软件教学工具软件：建议使用VSCode.IIBuilderX等主流开发工具。浏览器工具：建议使用Chrome、Firefox等。调试工具：Vue2.x建议使用vue-devtoolsv5.x.x。Vue3.x建议使用Vue-devtoolsv6.0.0beta10以上。如果是混合开发，建议使用Vue-devtoolsv6.0.0beta10以上。执笔人： 审核人:时间:第3章Vue.js指令1△掌握Vue.js内置指令3.1.1△条件渲染3.1.2△用key管理可复用的元素3.1.3△根据条件展示元素v-show3.1.4△列表渲染v-for指令3.1.5△绑定属性v-bind指令3.1.6△事件处理v-on指令3.1.7事件修饰符3.1.8按键修饰符3.1.9Av-model表单输入绑定表单元素值绑定3.1.11v-model与修饰符3.1.12v-text与v-html指令3.1.13△v-cloak、v-once>v-pre指令3.2△★掌握Vue.js自定义指令3.2.1△自定义指令注册3.2.2对象字面量3.2.3★动态指令参数2.4自定义指令实际应用第4章Vue.js基础案例实战掌握简易图书管理.1.1简易图书管理项目需求.1.2简易图书管理项目实现掌握我的待办事项MyToDos2.1我的待办事项项目需求2.2我的待办事项项目实现第5章Vue.js组件开发5.1掌握组件基础1.1组件命名1.2组件注册★掌握组件间通信2.1★父组件向子组件传值2.2★子组件向父组件传值2.3★兄弟组件之间通信2.4★父链与子组件索引掌握单文件组件★掌握插槽5.4.1★匿名插槽5.4.2★具名插槽5.4.3★作用域插槽5.4.4★动态插槽名第6章Vue.js过渡与动画△掌握单元素/组件的过渡1.1△过渡的类名ZXCSS过渡1.3ZSCSS动画自定义过渡的类名同时使用过渡和动画显性的过渡持续时间1.7JavaScript钩子2掌握初始渲染的过渡△掌握多个元素的过渡△掌握多个组件的过渡5掌握列表过渡5.1★列表的进入/离开过渡5.2★列表的排序过渡5.3列表的交错过渡第7章Vue项目开发环境与辅助工具部署7.1理解部署node,js1.1Node,js简介1.2Node,js部署1.3ZXNode.js模块系统1.4Node,js创建第一个应用2掌握Node包管理器npm2.1npm简介2.2△npm常用命令7.3△掌握Node,js环境配置7.4掌握webpack打包工具4.1webpack简介4.2△webpack使用与基本配置4.3△★webpack配置加载器loaders4.4★webpack配置插件4.5△webpack配置开发服务器5掌握VUECLI7.5.1VueCLI安装7.5.2AVueCLI创建Vue项目7.5.3AVueCLI可视化创建Vue项目第8章前端路由VueRouter8.1△掌握VueRouter概述1.1VueRouter安装与使用1.2VueRouter基础应用2△掌握VueRouter高级应用2.1△★动态路由匹配2.2△嵌套路由2.3△编程式导航2.4△命名路由2.5△命名视图2.6△重定向和别名2.7★路由组件传参2.8AHTML5History模式第9章状态管理模式Vuex1掌握Vuex概述9.1.1Vuex定义简单状态管理-store模式9.2△掌握Vuex基本使用9.3△掌握Vuex核心概念9.3.1一个完整的store结构3.2最简单的store3.3Vuex中state3.4Vuex中getter3.5△★Vuex中mutation3.6△★Vuex中action3.7△★Vuex中module4理解并掌握Vuex多模块实战案例第10章VueUI组件库10.1理解并掌握VuePC端组件库1.1△ElementUI1.2iViewUI1.3其它PC端UI组件库2理解并掌握Vue移动端UI组件库2.1MintUI2.2AVantUI第11章Vue高级项目实战理解并掌握友联通讯录项目需求1.2实现技术1.3环境配置1.4★项目实现11.2★理解并掌握通用登录/注册管理系统1项目需求实现技术环境配置★项目实现第12章Vue3.0基础应用12.1了解Vue3.0新特性12.1.1新特性简介下一阶段工作12.1.3Vue3.0学习参考2学会Vue3.0初步体验2.1Vue3.0下载与引用2.2Vue3.0创建简易应用2.3Vue3.0发布文档的使用3△★掌握Vue3.0新特性应用3.1使用脚手架创建项目3.2△组件选项setup()3.4△watch、watchEffect和computed3.5△ref引用DOM元素和组件实例3.6AVueRouter和Vuex3.7△Vue3.0生命周期3.8△提供provide。和注入inject()3.9★组合式API3.10★模板refs12.4理解并掌握VUE3.0购物车实战12.4.1项目设计要求12.4.2△★项目实现四、时间分配（以64学时为例）序号教学内容教学环节（学时）讲课实训小计课时教学形式内容课时教学形式1第1章Vue.js概述第2章Vue.js基础6讲授+实操演示实训1-实训22视频+上机演示82第3章Vue.js指令8讲授+实操演示实训32视频+上机演示103第4章Vue.js基础案例实战2讲授+实操演示实训40视频+自学24第5章Vue.js组件开发6讲授+实操演示实训52视频+上机演示85第6章Vue.js过渡与动画4讲授+实操演示实训62视频+上机演示66第7章Vue项目开发环境与辅助工具部署4讲授+实操演示实训72视频+上机演示67第8章前端路由VueRouter4讲授+实操演示实训82视频+上机演示68第9章状态管理模式Vuex4讲授+实操演示实训92视频+上机演示69第10章VueUI组件库2讲授+实操演示实训1100视频+上机演示210第11章Vue高级项目实战4讲授+实操演示实训110自学411第12章Vue3.0基础应用4讲授+实操演示实训122视