《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概述
下载、安装与引入Vue
Vue应用入门
v2.x的API
编程入门先学js
Vue实例的生命周期
认知MVVM模式
实战：
●编写程序代码计算金额
●反向输出字符串
●编写程序代码实现图片轮播
单元2 Vue网页模板制作
Vue的指令
模板内容渲染
模板逻辑控制
Vue数组更新及过滤排序
Vue事件处理
template模板制作
鼠标修饰符与键值修饰符
实战：
●使用带有v-for指令的template标签渲染多个元素块
●使用v-for和v-if指令循环显示嵌套的对象
单元3 Vue数据绑定与样式绑定
Vue表单控件的数据绑定
绑定value
修饰符
class绑定
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综合应用实战
编写程序实现简单的登录注册评论功能
编写程序实现简单的购物车功能
综合应用多项技术实现前后端分离的移动版网上商城项目综合应用多项技术实现前后端分离的网上商城项目

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。