本书从Vue框架的基础语法讲起，逐步深入Vue进阶实战，并在最后配合项目实战案例，重点演示了Vue在项目开发中的一些应用。在系统地讲解Vue的相关知识之余，本书力图使读者对Vue项目开发产生更深入的理解。
　　本书共分为11章，涵盖的主要内容有前端的发展历程、Vue的基本介绍、Vue的语法、Vue中的选项、Vue中的内置组件、Vue项目化、使用Vue开发电商类网站、使用Vue开发企业官网、使用Vue开发移动端资讯类网站、使用Vue开发工具类网站。
　　本书内容通俗易懂、案例丰富、实用性强，特别适合Vue的初学者和从业人员阅读，同时也适合职业生涯遇到“瓶颈”的前端从业人员和其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材。

　　1.4.4 学习曲线
　　最后一点，广为人知且津津乐道的是，Angular的学习曲线十分陡峭，初学者可能会有一种坐过山车的感觉。不过，笔者在2016年，接触过一个使用Angular 1进行开发的项目，当时感觉坡度是有的，但没有那么夸张，也可能是因为应用比较浅吧。
　　Vue的学习曲线则较为平缓，在Ember、Knockout、Angular、React等前辈踏平的道路上，Vue有更多趋于成熟的最佳实践可以拿来使用，也有更多的经验教训可以参考，从而设计出更简便的API来实现更复杂的功能。同时，这也有效降低了团队开发成本，并使得大型Web项目的构建变得更加容易。
　　当然也可以用NPM［Node Package Manager，Node 包（依赖）管理工具］安装。
　　NPM最初用于管理和分发Node.js的依赖，它自动化的机制使得层层嵌套的依赖管理变得十分简单，因此后来被广泛应用于前端依赖的管理中。你需要在Node的官网下载Node客户端，同时，你会得到一个“附送的”NPM工具。
　　由于NPM的仓库源布置在国外，资源传输速度较慢且可能受制，这里，笔者不建议直接使用NPM安装其他依赖，而是使用淘宝镜像源的cnpm。
　　（1）安装cnpm：
　　npm install -g cnpm --registry=https://registry.npm.taobao.org
　　（2）之后，使用cnpm安装Vue.js：
　　cnpm install vue
　　（3）引入Vue模块：
　　import Vue from 'vue'
　　2.1.2 安装Vue Devtools
　　在Vue学习和开发之前，笔者建议在你的浏览器（推荐使用Google Chrome）上先安装Vue Devtools拓展程序。Vue Devtools提供了一个界面，可以帮助我们查看Vue组件和全局状态管理器Vuex中记录的数据。
　　有条件访问国外受限网站的读者，可以直接访问Google Web Store，搜索vuejs-devtools进行安装。
　　没有条件的同学只好跟着笔者手动安装了。
　　（1）下载Vue Devtools（不了解Git的同学可以查看附录相关内容）。
　　git clone https://github.com/vuejs/vue-devtools.git
　　（2）进入vue-devtools目录下，安装构建工具所需要的依赖。
　　cnpm install
　　（3）构建工具，出现类似如图2.2中的信息即表示构建成功。
　　npm run build
　　C:\Users\Administrator\Desktop\vue.book\Vue.js 2 从入门到项目实战\images\02\图2.2 构建vue-devtools.png图2.2 构建vue-devtools
　　图2.2 构建vue-devtools
　　（4）打开Chrome扩展程序，如图2.3所示。
　　图1.3 拓展程序
　　图2.3 Google Chrome拓展程序
　　（5）在扩展程序界面中，开启“开发者模式”（“开发者模式”为关闭状态时，搜索栏下的按钮将被隐藏），并点击“加载已解压的扩展程序”，选择“shell/chome”文件夹进行安装，如图2.4所示。
　　图2.3 加载vue-devtools
　　图2.4 安装vue-devtools
　　（6）再次打开Vue项目时，我们就可以在Chrome调试工具中通过vue-devtools查看组件状态了，如图2.5所示。
　　……

第一篇 概念篇——扎根于基础
第1章 引言 002
1.1 前端技术的发展002
1.1.1 从静态走向动态 002
1.1.2 从后端走向前端 003
1.1.3 从前端走向全端 005
1.2 MVVM族员——Vue.js 008
1.2.1 从MVC到MVVM 008
1.2.2 Vue.js简介 009
1.3 Vue与React 010
1.3.1 虚拟DOM 010
1.3.2 功能性组件 011
1.3.3 轻量级——将与核心库无关的业务封装成独立库 011
1.3.4 视图模板 011
1.3.5 其他 012
1.4 Vue与Angular 013
1.4.1 模板语法 013
1.4.2 脏检测 013
1.4.3 双向数据绑定 014
1.4.4 学习曲线 015
第2章 基本介绍 016
2.1 安装和引入016
2.1.1 如何引入Vue.js 016
2.1.2 安装Vue Devtools 017
2.2 Vue实例介绍 019
2.2.1 简单实例 019
2.2.2 生命周期 020
目录
VIII
Vue. js从入门到项目实战
2.3 数据响应式原理024
2.3.1 初识数据链 024
2.3.2 函数式编程 025
2.3.3 Vue中的数据链 026
2.3.4 数据绑定视图 028
第3章 Vue语法 030
3.1 插值绑定030
3.1.1 文本插值 030
3.1.2 HTML插值 031
3.2 属性绑定033
3.2.1 指令v-bind 033
3.2.2 类名和样式绑定 034
3.3 事件绑定037
3.3.1 指令v-on 037
3.3.2 常见修饰符 039
3.3.3 按键修饰符 041
3.3.4 组合修饰符 042
3.4 双向绑定044
3.4.1 指令v-model 044
3.4.2 v-model与修饰符 047
3.4.3 v-model与自定义组件 048
3.5 条件渲染和列表渲染050
3.5.1 指令v-if和v-show 050
3.5.2 指令v-for 053
3.5.3 列表渲染中的key 057
第4章 Vue选项 059
4.1 数据和方法059
4.1.1 数据选项 059
IX
目 录
4.1.2 属性选项 065
4.1.3 方法选项 067
4.1.4 计算属性 068
4.1.5 侦听属性 072
4.2 DOM渲染 074
4.2.1 指定被挂载元素 074
4.2.2 视图的字符串模板 075
4.2.3 渲染函数render 076
4.2.4 选项的优先级 083
4.3 封装复用085
4.3.1 过滤器 085
4.3.2 自定义指令 086
4.3.3 组件的注册 090
4.3.4 混入的使用 091
第5章 Vue内置组件 095
5.1 组件服务095
5.1.1 动态组件 095
5.1.2 使用插槽分发内容 097
5.1.3 组件的缓存 103
5.2 过渡效果104
5.2.1 单节点的过渡 104
5.2.2 多节点的过渡 113
第6章 Vue项目化 117
6.1 快速构建项目117
6.1.1 Vue CLI简介 117
6.1.2 使用Vue CLI构建项目 118
6.1.3 项目目录介绍 119
6.2 前端路由123
6.2.1 前端路由的简单实现 123
6.2.2 Vue中的前端路由 127
6.3 状态管理132
6.3.1 对象引用 133
6.3.2 状态管理器Vuex 133
6.3.3 在项目中使用Vuex 138
第二篇 实战篇 —— 提升于项目
第7章 打造线上商城（一） 144
7.1 项目规划144
7.1.1 需求分析 144
7.1.2 流程分析 146
7.2 项目展示147
7.2.1 首页 147
7.2.2 商品详情 150
7.2.3 购物车 151
7.2.4 订单 152
第8章 打造线上商城（二） 154
8.1 项目构建154
8.1.1 目录结构 154
8.1.2 webpack是什么？ 155
8.1.3 Font Awesome图标库 157
8.2 动态资源和数据159
8.2.1 关于配置 159
8.2.2 动态资源 162
8.2.3 动态数据的存储 163
8.3 自定义组件164
8.3.1 幻灯片 164
8.3.2 复选框 168
第9章 企业官网的建设 171
9.1 响应式设计171
9.1.1 响应式设计 171
9.1.2 媒体查询 172
9.1.3 JS布局 174
9.2 页面开发175
9.2.1 页面切换 175
9.2.2 Swiper组件 176
9.2.3 划分内容区 177
9.3 多语种网站的建设179
9.3.1 将一切纳入配置 180
9.3.2 将配置绑定到视图 183
第10章 我的掌上新闻 186
10.1 应用介绍186
10.1.1 应用首屏 186
10.1.2 应用首页 187
10.1.3 新闻详情 189
10.1.4 搜索页面 190
10.1.5 搜索结果 193
10.2 项目构建193
10.2.1 项目结构 193
10.2.2 数据流图 198
第11章 SVG画图板 199
11.1 SVG简介 199
11.1.1 有关SVG的三个问题 199
11.1.2 基本图形的使用 201
11.1.3 SVG中的渐变 202
11.2 项目介绍 204
11.2.1 页面介绍 204
11.2.2 代码简析 208
附录 拓 展 篇
附录A Git入门 218
附录B NPM入门 221
附录C Webpack入门 224
附录D 闭包和对象引用 230
附录E 常见的ECMAScript 6语法 233