VUE.JS从入门到项目实战PDF电子书下载

第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