Vue.js 实战

本文目录结构

编辑推荐

适读人群 ：Vue.js 初学者 Vue.js 开发者 Vues.js 培训机构使用教材

Vue.js 作者尤雨溪作推荐序

业界前端大腕 TalkingData 研发副总裁，马骥；w3cplus.com 站长，大漠；在线回声前端技术专家，justjavac（迷渡）;laravel-china.org 站长，Summer 联袂推荐！ Vue 社区 iView 组件贡献者，前端大神梁灏执笔编撰，突出实战，应用为王。

内容简介

《 Vue.js 实战》以 Vue.js 2 为基础，以项目实战的方式来引导读者渐进式学习 Vue.js。《Vue.js 实战》分为基础篇、进阶篇和实战篇三部分。基础篇主要是对 Vue.js 核心功能的介绍；进阶篇主要讲解前端工程化 Vue.js 的组件化、插件的使用；实战篇着重开发了两个完整的示例，所涉及的内容涵盖 Vue.js 绝大部分 API。通过阅读《 Vue.js 实战》，读者能够掌握 Vue.js 框架主要 API 的使用方法、自定义指令、组件开发、单文件组件、Render 函数、使用 webpack 开发可复用的单页面富应用等。 《 Vue.js 实战》示例丰富、侧重实战，适用于刚接触或即将接触 Vue.js 的开发者，也适用于对 Vue.js 有过开发经验，但需要进一步提升的开发者。

作者简介

梁灏：网名 Aresn，基于 Vue.js 的开源 UI 组件库 iView 的作者。目前在大数据公司 TalkingData 负责可视化基础架构。创办了程序员社区 TalkingCoder。

目录

• 目 录

第 1 篇 基础篇

第 1 章 初识 Vue.js 3

• 1.1 Vue.js 是什么 3
• 1.1.1 MVVM 模式 3
• 1.1.2 Vue.js 有什么不同 4
• 1.2 如何使用 Vue.js 5
• 1.2.1 传统的前端开发模式 5
• 1.2.2 Vue.js 的开发模式 5

第 2 章 数据绑定和第一个 Vue 应用 8

• 2.1 Vue 实例与数据绑定 9
• 2.1.1 实例与数据 9
• 2.1.2 生命周期 10
• 2.1.3 插值与表达式 11
• 2.1.4 过滤器 13
• 2.2 指令与事件 15
• 2.3 语法糖 18

第 3 章 计算属性 19

• 3.1 什么是计算属性 19
• 3.2 计算属性用法 20
• 3.3 计算属性缓存 23

第 4 章 v-bind 及 class 与 style 绑定 25

• 4.1 了解 v-bind 指令 25
• 4.2 绑定 class 的几种方式 26
• 4.2.1 对象语法 26
• 4.2.2 数组语法 27
• 4.2.3 在组件上使用 29
• 4.3 绑定内联样式 30

第 5 章 内置指令 32

• 5.1 基本指令 32
• 5.1.1 v-cloak 32
• 5.1.2 v-once 33
• 5.2 条件渲染指令 33
• 5.2.1 v-if、v-else-if、v-else 33
• 5.2.2 v-show 36
• 5.2.3 v-if 与 v-show 的选择 36
• 5.3 列表渲染指令 v-for 37
• 5.3.1 基本用法 37
• 5.3.2 数组更新 41
• 5.3.3 过滤与排序 43
• 5.4 方法与事件 44
• 5.4.1 基本用法 44
• 5.4.2 修饰符 46
• 5.5 实战：利用计算属性、指令等知识开发购物车 47

第 6 章 表单与 v-model 55

• 6.1 基本用法 55
• 6.2 绑定值 61
• 6.3 修饰符 63

第 7 章 组件详解 65

• 7.1 组件与复用 65
• 7.1.1 为什么使用组件 65
• 7.1.2 组件用法 66
• 7.2 使用 props 传递数据 70
• 7.2.1 基本用法 70
• 7.2.2 单向数据流 72
• 7.2.3 数据验证 74
• 7.3 组件通信 75
• 7.3.1 自定义事件 75
• 7.3.2 使用 v-model 77
• 7.3.3 非父子组件通信 79
• 7.4 使用 slot 分发内容 83
• 7.4.1 什么是 slot 83
• 7.4.2 作用域 84
• 7.4.3 slot 用法 85
• 7.4.4 作用域插槽 87
• 7.4.5 访问 slot 89
• 7.5 组件高级用法 90
• 7.5.1 递归组件 90
• 7.5.2 内联模板 92
• 7.5.3 动态组件 93
• 7.5.4 异步组件 94
• 7.6 其他 95
• 7.6.1 $nextTick 95
• 7.6.2 X-Templates 96
• 7.6.3 手动挂载实例 97
• 7.7 实战：两个常用组件的开发 98
• 7.7.1 开发一个数字输入框组件 98
• 7.7.2 开发一个标签页组件 106

第 8 章 自定义指令 118

• 8.1 基本用法 118
• 8.2 实战 121
• 8.2.1 开发一个可从外部关闭的下拉菜单 121
• 8.2.2 开发一个实时时间转换指令 v-time 126

第 2 篇 进阶篇

第 9 章 Render 函数 133

• 9.1 什么是 Virtual Dom 133
• 9.2 什么是 Render 函数 136
• 9.3 createElement 用法 140
• 9.3.1 基本参数 140
• 9.3.2 约束 143
• 9.3.3 使用 JavaScript 代替模板功能 147
• 9.4 函数化组件 153
• 9.5 JSX 157
• 9.6 实战：使用 Render 函数开发可排序的表格组件 159
• 9.7 实战：留言列表 172
• 9.8 总结 183

第 10 章 使用 webpack 184

• 10.1 前端工程化与 webpack 184
• 10.2 webpack 基础配置 187
• 10.2.1 安装 webpack 与 webpack-dev-server 187
• 10.2.2 就是一个 js 文件而已 188
• 10.2.3 逐步完善配置文件 191
• 10.3 单文件组件与 vue-loader 194
• 10.4 用于生产环境 201

第 11 章 插件 206

• 11.1 前端路由与 vue-router 207
• 11.1.1 什么是前端路由 207
• 11.1.2 vue-router 基本用法 208
• 11.1.3 跳转 212
• 11.1.4 高级用法 213
• 11.2 状态管理与 Vuex 216
• 11.2.1 状态管理与使用场景 216
• 11.2.2 Vuex 基本用法 217
• 11.2.3 高级用法 221
• 11.3 实战：中央事件总线插件 vue-bus 227

第 3 篇 实战篇

第 12 章 iView 经典组件剖析 235

• 12.1 级联选择组件 Cascader 236
• 12.2 折叠面板组件 Collapse 249
• 12.3 iView 内置工具函数 257

第 13 章 实战：知乎日报项目开发 261

• 13.1 分析与准备 261
• 13.2 推荐列表与分类 265
• 13.2.1 搭建基本结构 265
• 13.2.2 主题日报 267
• 13.2.3 每日推荐 271
• 13.2.4 自动加载更多推荐列表 276
• 13.3 文章详情页 278
• 13.3.1 加载内容 278
• 13.3.2 加载评论 281
• 13.4 总结 286

第 14 章 实战：电商网站项目开发 288

• 14.1 项目工程搭建 288
• 14.2 商品列表页 290
• 14.2.1 需求分析与模块拆分 290
• 14.2.2 商品简介组件 291
• 14.2.3 列表按照价格、销量排序 297
• 14.2.4 列表按照品牌、颜色筛选 306
• 14.3 商品详情页 309
• 14.4 购 物 车 313
• 14.4.1 准备数据 314
• 14.4.2 显示和操作数据 316
• 14.4.3 使用优惠码 320
• 14.5 总结 324

第 15 章 相关开源项目介绍 325

• 15.1 服务端渲染与 Nuxt.js 325
• 15.1.1 是否需要服务端渲染 325
• 15.1.2 Nuxt.js 326
• 15.2 HTTP 库 axios 327
• 15.3 多语言插件 vue-i18n 329