第1章 Vue.js基础入门 1
教学导航 1
1.1 初识Vue 1
1.1.1 前端技术的发展 1
1.1.2 什么是Vue 2
1.1.3 Vue的优势 2
1.2 搭建Vue开发环境 3
1.2.1 Visual Studio Code编辑器 3
1.2.2 Vue的下载和引入 4
1.2.3 git-bash命令行工具 4
1.2.4 Node.js环境 5
1.2.5 npm包管理工具 6
1.2.6 Chrome浏览器和vue-devtools扩展 7
1.2.7 Hello World案例 8
1.3 webpack打包工具 9
1.3.1 安装webpack 9
1.3.2 webpack简单使用 9
1.3.3 构建Vue项目 10
本章小结 11
课后习题 11
第2章 Vue开发基础(上) 13
教学导航 13
2.1 Vue实例 13
2.1.1 创建Vue实例 13
2.1.2 el唯一根标签 14
2.1.3 data初始数据 15
2.1.4 methods定义方法 15
2.1.5 computed计算属性 16
2.1.6 watch状态监听 17
2.1.7 filters过滤器 18
2.2 Vue数据绑定 20
2.2.1 绑定样式 20
2.2.2 内置指令 22
2.2.3 学生列表案例 27
2.3 Vue事件 28
2.3.1 事件监听 28
2.3.2 事件修饰符 29
2.4 Vue组件 33
2.4.1 什么是组件 33
2.4.2 局部注册组件 34
2.4.3 template模板 35
2.4.4 组件之间的数据传递 36
2.4.5 组件切换 38
2.5 Vue的生命周期 39
2.5.1 钩子函数 39
2.5.2 实例创建 40
2.5.3 页面挂载 40
2.5.4 数据更新 41
2.5.5 实例销毁 42
本章小结 43
课后习题 43
第3章 Vue开发基础(下) 45
教学导航 45
3.1 全局API 45
3.1.1 Vue.directive 45
3.1.2 Vue.use 46
3.1.3 Vue.extend 47
3.1.4 Vue.set 48
3.1.5 Vue.mixin 49
3.2 实例属性 49
3.2.1 vm.$props 50
3.2.2 vm.$options 52
3.2.3 vm.$el 52
3.2.4 vm.$children 53
3.2.5 vm.$root 54
3.2.6 vm.$slots 54
3.2.7 vm.$attrs 56
3.3 全局配置 56
3.3.1 productionTip 56
3.3.2 silent 57
3.3.3 devtools 58
3.4 组件进阶 58
3.4.1 mixins 59
3.4.2 render 60
3.4.3 createElement 61
本章小结 62
课后习题 62
第4章 Vue过渡和动画 64
教学导航 64
4.1 过渡和动画基础 64
4.1.1 什么是过渡和动画 64
4.1.2 transition组件 65
4.1.3 自定义类名 67
4.1.4 使用@keyframes创建CSS动画 69
4.1.5 钩子函数实现动画 70
4.1.6 Vue结合Velocity.js实现动画 71
4.2 多个元素过渡 72
4.2.1 不同标签名元素的过渡 72
4.2.2 相同标签名元素的过渡 73
4.2.3 过渡模式 75
4.3 多个组件过渡 76
4.4 列表过渡 77
4.4.1 什么是列表过渡 77
4.4.2 列表的进入和离开过渡 77
4.4.3 列表的排序过渡 78
4.4.4 列表的交错过渡 80
4.4.5 可复用的过渡 82
本章小结 85
课后习题 86
第5章 Vue路由 87
教学导航 87
5.1 初识路由 87
5.2 vue-router 89
5.2.1 vue-router的工作原理 89
5.2.2 vue-router的基本使用 90
5.2.3 路由对象的属性 91
5.3 用户登录注册案例 92
5.3.1 案例分析 92
5.3.2 准备工作 93
5.3.3 代码实现 96
5.4 动态路由 101
5.4.1 什么是动态路由 101
5.4.2 query方式传参 102
5.4.3 params方式传参 103
5.5 嵌套路由 104
5.5.1 什么是嵌套路由 104
5.5.2 嵌套路由案例 105
5.6 命名路由 107
5.6.1 什么是命名路由 107
5.6.2 命名路由案例 108
5.7 命名视图 109
5.7.1 什么是命名视图 109
5.7.2 命名视图案例 109
5.8 编程式导航 110
5.8.1 router.push() 110
5.8.2 router.replace() 113
5.8.3 router.go() 113
本章小结 114
课后习题 114
第6章 Vuex状态管理 116
教学导航 116
6.1 初识Vuex 116
6.1.1 什么是Vuex 116
6.1.2 Vuex的下载和安装 117
6.1.3 计数器案例 120
6.1.4 Vuex状态管理模式 121
6.2 Vuex配置选项 122
6.2.1 actions 122
6.2.2 mutations 125
6.2.3 getters 128
6.2.4 modules 130
6.2.5 plugins 131
6.2.6 devtools 132
6.3 Vuex中的API 133
6.3.1 模块注册 133
6.3.2 状态替换 134
6.4 购物车案例 135
6.4.1 案例分析 135
6.4.2 代码实现 136
本章小结 142
课后习题 143
第7章 Vue开发环境 144
教学导航 144
7.1 Vue CLI脚手架工具 144
7.1.1 安装前的注意事项 144
7.1.2 全局安装@vue/cli 145
7.1.3 使用vue create命令创建项目 145
7.1.4 使用GUI创建项目 147
7.2 插件 149
7.2.1 CLI插件 150
7.2.2 安装插件 150
7.3 CLI服务和配置文件 151
7.3.1 CLI服务 151
7.3.2 配置文件 152
7.3.3 配置多页应用 154
7.4 环境变量和模式 157
7.4.1 环境变量 157
7.4.2 模式 158
7.5 静态资源管理 158
本章小结 160
课后习题 160
第8章 服务器端渲染 162
教学导航 162
8.1 初识服务器端渲染 162
8.1.1 客户端渲染与服务器端渲染的区别 162
8.1.2 服务器端渲染的注意事项 163
8.2 服务器端渲染的简单实现 164
8.2.1 创建vue-ssr项目 164
8.2.2 渲染Vue实例 164
8.2.3 Express搭建SSR 165
8.2.4 Koa搭建SSR 166
8.3 webpack搭建服务器端渲染 167
8.3.1 基本流程 167
8.3.2 项目搭建 168
8.4 Nuxt.js服务器端渲染框架 172
8.4.1 创建Nuxt.js项目 172
8.4.2 页面和路由 173
8.4.3 页面跳转 174
本章小结 174
课后习题 175
第9章 “微商城”项目 176
教学导航 176
9.1 开发前准备 176
9.1.1 项目展示 176
9.1.2 技术方案 179
9.1.3 项目开发流程 180
9.2 项目搭建 180
9.2.1 创建项目 180
9.2.2 配置路由 181
9.2.3 配置Vuex 181
9.2.4 配置axios 182
9.2.5 目录结构 182
9.3 商城首页 182
9.3.1 页面结构 183
9.3.2 顶部标题栏 183
9.3.3 轮播图 185
9.3.4 九宫格展示区域 187
9.3.5 底部导航栏 187
9.4 新闻资讯 188
9.4.1 新闻资讯列表 188
9.4.2 新闻详情 189
9.5 图片分享 189
9.5.1 图片列表 190
9.5.2 图片详情 190
9.6 商品购买 192
9.6.1 商品详情页 192
9.6.2 购物车 194
9.7 分类列表 196
9.7.1 页面结构搭建 196
9.7.2 better-scroll的运用 197
本章小结 197
课后习题 197