Vue.js基础与应用开发实战（微课版）-教学大纲.docx

Vue. js基础与应用开发实战（微课版）教学大纲课程介绍：Vue.js是一套用于构建用户界面的渐进式框架，采用“模型一视图一视图模型”的模式， 支持数据驱动和组件化开发。本课程在模块化、层次化、活页式、在线式等方面做了大量的探索与实践，构建了独特 的模块化结构。本课程构建了 Vue.js应用开发的理论知识学习与编程技能训练的层次化结 构，由易到难、由浅入深，分为10个单元（包括9个教学单元和1个综合应用实战单元）, 分别为Vue.js起步、Vue网页模板制作、Vue数据绑定与样式绑定、Vue项目创建与运行、 Vue组件构建与应用、Vue过渡与动画实现、Vue路由配置与应用、Vuex状态管理、服务器 端渲染和Vue综合应用实战。学习层次：理论知识学习的3个层次： 入门知识：公共的基础知识，是学习必修知识和Vue.js项目开发的前提。 必修知识：Vue.js应用开发的重点内容，是必须理解、掌握，并能灵活应用的知识。 拓展知识：有的是难度较高的知识，有的是从知识的完整性、系统性等方面考虑而 列出的知识，有的是为学习能力较强的学习者提供的知识。编程技能训练的3个层次： 验证程序编写：以单条语句在命令行窗口中执行，或者编写简单程序代码，对相关 知识进行验证与讲解。 实例程序编写：以完整程序方式，对知识进行验证性训练，在Vue.js程序开发环境 中编写程序代码，运行后查看结果。 综合应用实战：根据待解决的实际问题或待实现的功能需求，应用相关知识编写程 序、实现要求的功能，运行程序并查看结果，主要训练知识应用能力和问题分析能 力。学习时间：64学时。学习内容：单元1 Vue.js起步Vue概述下载、安装与引入VueVue应用入门v2.x 的 APIVuc实例的生命周期认知MVVM模式实战： 编写程序代码计算金额 反向输出字符串 编写程序代码实现图片轮播单元2 Vue网页模板制作Vue的指令模板内容渲染模板逻辑控制Vue数组更新及过滤排序Vue事件处理template模板制作鼠标修饰符与键值修饰符实战： 使用带有v-for指令的template标签渲染多个元素块 使用v-for和v-if指令循环显示嵌套的对象单元3 Vue数据绑定与样式绑定Vue表单控件的数据绑定绑定value修饰符class笏B定style绑定定义与使用过滤器实战： 编写程序代码实现英寸与毫米之间的单位换算 编写程序代码实现图片自动播放与单击播放功能 编写程序代码实现图片自动缩放与图片播放功能单元4 Vue项目创建与运行熟悉创建Vue项目的多种方法认知Vue项目的组成结构与自定义配置认知Vue项目的运行流程实战： 基于"Node.js+Vue.js+MySQL”实现前后端分离的登录与注册功能 创建Vite项目实现多种方式浏览与操作图片单元5 Vue组件构建与应用组件基础组件注册与使用组件构建Vue组件选项props组件之间的通信Vue自定义事件Vue组件动态切换Vue插槽应用Vue混合实战： 在自定义组件中利用Vue的transition属性实现图片轮换功能 在 Element UI 中实现 Table 与 Pagination 组件化单元6 Vue过渡与动画实现通过CSS方式实现过渡效果通过JavaScript方式实现Vue的过渡效果实现Vue多元素与多组件过渡实现Vue列表的过渡效果实战： 使用data属性与JavaScript通信以实现列表的渐进过渡效果 使用CSS实现列表的渐进过渡效果 使用Vue的transition属性实现图片轮播功能 使用Vue的transition-group组件实现图片轮播功能单元7 Vue路由配置与应用vue-router的基本使用重定向和使用别名设置与使用根路径设置与使用嵌套路由设置与使用命名路由设置与使用命名视图设置与使用动态路由实现编程式导航使用导航钩子函数使用懒加载vue-router 的 API实战： 实现用户登录与应用路由切换页面基于" Vue.js+Axios+axios-mock-adapter”实现用户登录单元8 Vuex状态管理Vuex概述简单的store应用Vuex的配置选项Vuex 的 API实战： 使用Vuex在单个HTML文件中实现计数器功能 使用Vuex的属性与方法实现人员列表查询功能 使用Vuex结合vue-cli实现计数器功能单元9服务器端渲染区分服务器端渲染和客户端渲染手动搭建项目实现简单的服务器端渲染使用Nuxt.js框架实现服务器端渲染Vue-SSR的工作原理实战： 创建一个简单的vue-ssr服务器端渲染项目 创建vue-cli改造而成的vue-ssr服务器端渲染项目 基于Nuxt.js创建一个服务器端渲染应用一一旅游网站单元10 Vue综合应用实战编写程序实现简单的登录注册评论功能编写程序实现简单的购物车功能综合应用多项技术实现前后端分离的移动版网上商城项目综合应用多项技术实现前后端分离的网上商城项目