《VUE.JS前端开发实战》求取 ⇩

第1章Vue.js基础入门1

教学导航1

1.1初识Vue1

1.1.1 前端技术的发展1

1.1.2 什么是Vue2

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.3webpack打包工具9

1.3.1 安装webpack9

1.3.2 webpack简单使用9

1.3.3 构建Vue项目10

本章小结11

课后习题11

第2章Vue开发基础（上）13

教学导航13

2.1Vue实例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.2Vue数据绑定20

2.2.1 绑定样式20

2.2.2 内置指令22

2.2.3 学生列表案例27

2.3Vue事件28

2.3.1 事件监听28

2.3.2 事件修饰符29

2.4Vue组件33

2.4.1 什么是组件33

2.4.2 局部注册组件34

2.4.3 template模板35

2.4.4 组件之间的数据传递36

2.4.5 组件切换38

2.5Vue的生命周期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全局API45

3.1.1 Vue.directive45

3.1.2 Vue.use46

3.1.3 Vue.extend47

3.1.4 Vue.set48

3.1.5 Vue.mixin49

3.2实例属性49

3.2.1 vm.＄props50

3.2.2 vm.＄options52

3.2.3 vm.＄el52

3.2.4 vm.＄children53

3.2.5 vm.＄root54

3.2.6 vm.＄slots54

3.2.7 vm.＄attrs56

3.3全局配置56

3.3.1 productionTip56

3.3.2 silent57

3.3.3 devtools58

3.4组件进阶58

3.4.1 mixins59

3.4.2 render60

3.4.3 createElement61

本章小结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.2vue-router89

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初识Vuex116

6.1.1 什么是Vuex116

6.1.2 Vuex的下载和安装117

6.1.3 计数器案例120

6.1.4 Vuex状态管理模式121

6.2Vuex配置选项122

6.2.1 actions122

6.2.2 mutations125

6.2.3 getters128

6.2.4 modules130

6.2.5 plugins131

6.2.6 devtools132

6.3Vuex中的API133

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.1Vue CLI脚手架工具144

7.1.1 安装前的注意事项144

7.1.2 全局安装＠vue/cli145

7.1.3 使用vue create命令创建项目145

7.1.4 使用GUI创建项目147

7.2插件149

7.2.1 CLI插件150

7.2.2 安装插件150

7.3CLI服务和配置文件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搭建SSR165

8.2.4 Koa搭建SSR166

8.3webpack搭建服务器端渲染167

8.3.1 基本流程167

8.3.2 项目搭建168

8.4Nuxt.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 配置Vuex181

9.2.4 配置axios182

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