第1章 Vue.js简介与安装 1
1.1 Vue概述 1
1.1.1 MVVM模式 2
1.1.2 Vue是什么 2
1.1.3 Vue有什么不同 3
1.2 如何使用Vue.js 5
1.2.1 传统的前端开发模式 5
1.2.2 Vue.js的开发模式 5
1.3 安装Vue 6
1.3.1 直接用<script>引入 6
1.3.2 NPM 7
1.3.3 命令行工具 7
1.4 第一个Vue程序 7
1.5 疑难解惑 10
第2章 Vue实例和模板语法 11
2.1 Vue实例 11
2.1.1 创建一个Vue实例 11
2.1.2 数据与方法 12
2.1.3 实例生命周期钩子 14
2.1.4 实例化多个对象 14
2.2 模板语法 18
2.2.1 插值 18
2.2.2 指令 21
2.2.3 缩写 21
2.3 疑难解惑 22
第3章 计算属性、侦听器和过滤器 23
3.1 计算属性 23
3.2 计算属性与方法 24
3.3 侦听属性 27
3.3.1 回调值为函数方法 27
3.3.2 回调值为对象 28
3.4 过滤器 30
3.5 疑难解惑 33
第4章 内置指令 35
4.1 基本指令 35
4.1.1 v-cloak 35
4.1.2 v-once 36
4.1.3 v-text与v-html 37
4.1.4 v-bind 37
4.1.5 v-on 38
4.2 条件渲染 40
4.2.1 v-if 40
4.2.2 在<template>元素上使用v-if条件渲染分组 42
4.2.3 v-else 43
4.2.4 v-else-if 44
4.2.5 用key管理可复用的元素 45
4.2.6 v-show 47
4.2.7 v-if与v-show的区别 48
4.3 列表渲染 50
4.3.1 使用v-for指令遍历元素 50
4.3.2 维护状态 53
4.3.3 数组更新检测 53
4.3.4 对象变更检测注意事项 56
4.3.5 在<template>上使用v-for 57
4.3.6 v-for与v-if一同使用 58
4.4 自定义指令 60
4.5 疑难解惑 62
第5章 页面元素样式的绑定 64
5.1 绑定HTML样式 64
5.1.1 数组语法 64
5.1.2 对象语法 66
5.1.3 在自定义组件上使用class 68
5.2 绑定内联样式 69
5.2.1 对象语法 69
5.2.2 数组语法 71
5.3 疑难解惑 72
第6章 事件处理 74
6.1 监听事件 74
6.2 事件处理方法 75
6.3 事件修饰符 80
6.3.1 stop修饰符 80
6.3.2 capture修饰符 82
6.3.3 self修饰符 83
6.3.4 once修饰符 85
6.3.5 prevent修饰符 85
6.3.6 passive修饰符 86
6.4 按键修饰符 87
6.5 系统修饰键 89
6.6 案例实战——仿淘宝Tab栏切换 90
6.7 疑难解惑 92
第7章 表单输入绑定(双向数据绑定) 94
7.1 双向绑定 94
7.2 基本用法 95
7.2.1 文本 95
7.2.2 多行文本 96
7.2.3 复选框 96
7.2.4 单选按钮 97
7.2.5 选择框 98
7.3 值绑定 101
7.3.1 绑定复选框 101
7.3.2 绑定单选按钮 101
7.3.3 绑定选择框 102
7.4 修饰符 103
7.4.1 lazy修饰符 103
7.4.2 number修饰符 103
7.4.3 trim修饰符 104
7.5 案例实战1——小游戏破坏瓶子 105
7.6 案例实战2——设计动态表格 107
7.7 疑难解惑 110
第8章 组件技术 113
8.1 组件是什么 113
8.2 组件的注册 114
8.2.1 全局注册 114
8.2.2 局部注册 117
8.3 组件中的data选项 119
8.4 组件中的props选项 121
8.5 组件的复用 124
8.6 组件间的数据通信 126
8.6.1 父组件向子组件通信 126
8.6.2 子组件向父组件通信 127
8.7 插槽 129
8.7.1 认识插槽 129
8.7.2 具名插槽 132
8.7.3 作用域插槽 135
8.7.4 解构插槽 137
8.8 案例实战——设计照片相册 139
8.9 疑难解惑 143
第9章 使用webpack打包 145
9.1 前端工程化与webpack 145
9.2 webpack基础配置 148
9.2.1 安装webpack与webpack-dev-server 148
9.2.2 webpack的核心概念 149
9.2.3 完善配置文件 152
9.3 单文件组件与vue-loader 154
9.4 疑难解惑 160
第10章 项目脚手架vue-cli 161
10.1 脚手架的组件 161
10.2 脚手架环境搭建 162
10.3 安装脚手架 164
10.4 创建项目 165
10.4.1 使用命令 165
10.4.2 使用图形化界面 167
10.5 疑难解惑 171
第11章 前端路由技术 172
11.1 实现Vue前端路由控制 172
11.1.1 前端路由的实现方式 172
11.1.2 路由实现步骤 173
11.2 命名路由、命名视图和路由传参 177
11.2.1 命名路由 177
11.2.2 命名视图 179
11.2.3 路由传参 183
11.3 编程式导航 191
11.4 组件与Vue Router间解耦 194
11.4.1 布尔模式解耦 194
11.4.2 对象模式解耦 197
11.4.3 函数模式解耦 198
11.5 疑难解惑 198
第12章 状态管理 200
12.1 Vuex概述 200
12.1.1 状态管理模式 200
12.1.2 Vuex的应用场合 202
12.2 Vuex的安装与使用 202
12.2.1 安装Vuex 202
12.2.2 Promise对象 203
12.2.3 使用Vuex 203
12.3 在项目中使用Vuex 205
12.3.1 使用脚手架搭建一个项目 205
12.3.2 state对象 209
12.3.3 getter对象 210
12.3.4 mutation对象 212
12.3.5 Action对象 213
12.4 疑难解惑 215
第13章 项目实训1——神影视频App 216
13.1 准备工作 216
13.1.1 开发环境 216
13.1.2 搭建Vue脚手架 216
13.2 网站概述 219
13.2.1 网站结构 219
13.2.2 初始化项目文件 220
13.3 设计项目组件 221
13.3.1 设计头部和底部导航组件 222
13.3.2 设计电影页面组件 224
13.3.3 设计影院页面组件 235
13.3.4 设计我的页面组件 238
13.4 设计项目页面组件及路由配置 239
13.4.1 电影页面组件及路由 239
13.4.2 影院页面组件及路由 242
13.4.3 我的页面组件及路由 244
第14章 项目实训2——音乐之家App 246
14.1 项目概述 246
14.1.1 开发环境 246
14.1.2 技术概括 247
14.1.3 项目结构 247
14.2 入口文件 248
14.2.1 项目入口页面(index.html) 248
14.2.2 程序入口文件(main.js) 249
14.2.3 组件入口文件(App.vue) 249
14.3 状态管理 252
14.3.1 store/api.js 252
14.3.2 store/index.js 253
14.4 项目组件设计 254
14.4.1 欢迎组件 255
14.4.2 播放组件 256
14.4.3 歌曲信息组件 259
14.4.4 歌曲列表组件 261
14.4.5 歌曲详情组件 262
第15章 项目实训3——仿手机QQ页面 266
15.1 项目概述 266
15.1.1 开发环境 266
15.1.2 技术概括 267
15.1.3 项目结构 267
15.2 入口文件 268
15.2.1 项目入口页面 268
15.2.2 程序入口文件 269
15.2.3 组件入口文件 269
15.3 状态管理 272
15.3.1 action.js 272
15.3.2 getters.js 273
15.3.3 mutations.js 273
15.3.4 store.js 275
15.4 项目组件及路由 276
15.4.1 配置路由 276
15.4.2 顶部导航栏组件 277
15.4.3 侧边栏导航组件 278
15.4.4 搜索组件 280
15.4.5 个人信息页面组件 283
15.4.6 底部tab栏组件 286
15.4.7 消息页面组件 288
15.4.8 聊天组件 291
15.4.9 朋友页面组件 295
15.4.10 动态页面组件 298
15.5 模拟请求数据 300
第16章 项目实训4——仿饿了么App 302
16.1 项目概述 302
16.1.1 开发环境 302
16.1.2 项目结构 303
16.2 入口文件 304
16.2.1 项目入口页面 304
16.2.2 程序入口文件 304
16.2.3 组件入口文件 305
16.3 项目组件 306
16.3.1 头部组件 306
16.3.2 商品数量控制组件 309
16.3.3 购物车组件 310
16.3.4 评论内容组件 314
16.3.5 商品详情组件 317
16.3.6 星级组件 320
16.3.7 商品组件 321
16.3.8 评论组件 324
16.3.9 商家信息组件 326