Ｖｕｅ．ｊｓ 前端开发
编制：Ｖｕｅ．ｊｓ研发群１６５８６２１９９
目 录
Contents
第1章 Vue.js简介
1.1 Vue.js是什么 ………………………… 1
1.2 为什么要用Vue.js …………………… 2
1.3 Vue.js的Hello world ……………… 2
第2章 基础特性
2.1 实例及选项 …………………………… 5
2.1.1 模板 ……………………………… 6
2.1.2 数据 ……………………………… 7
2.1.3 方法 ……………………………… 9
2.1.4 生命周期 ……………………… 10
2.2 数据绑定 …………………………… 12
2.2.1 数据绑定语法 ………………… 13
2.2.2 计算属性 ……………………… 17
2.2.3 表单控件 ……………………… 18
2.2.4 Class与Style绑定 …………… 21
2.3 模板渲染 …………………………… 22
2.3.1 前后端渲染对比 ……………… 23
2.3.2 条件渲染 ……………………… 23
2.3.3 列表渲染 ……………………… 25
2.3.4 template标签用法 …………… 27
2.4 事件绑定与监听 …………………… 28
2.4.1 方法及内联语句处理器 ……… 28
2.4.2 修饰符 ………………………… 29
2.4.3 与传统事件绑定的区别 ……… 30
2.5 Vue.extend() …………………… 31
第3章 指令
3.1 内置指令 …………………………… 32
3.1.1 v-bind ………………………… 32
3.1.2 v-model ……………………… 33
3.1.3 v-if/v-else/v-show ………… 33
3.1.4 v-for …………………………… 33
3.1.5 v-on …………………………… 34
3.1.6 v-text ………………………… 34
3.1.7 v-HTML ……………………… 35
3.1.8 v-el …………………………… 35
3.1.9 v-ref …………………………… 35
3.1.10 v-pre ………………………… 36
3.1.11 v-cloak ……………………… 36
3.1.12 v-once ……………………… 37
3.2 自定义指令基础 …………………… 37
3.2.1 指令的注册 …………………… 37
3.2.2 指令的定义对象 ……………… 37
3.2.3 指令实例属性 ………………… 39
3.2.4 元素指令 ……………………… 40
3.3 指令的高级选项 …………………… 41
3.3.1 params ……………………… 41
3.3.2 deep ………………………… 42
3.3.3 twoWay ……………………… 43
3.3.4 acceptStatement …………… 44
3.3.5 terminal ……………………… 44
3.3.6 priority ………………………… 45
3.4 指令在Vue.js 2.0中的变化 ……… 46
3.4.1 新的钩子函数 ………………… 46
3.4.2 钩子函数实例和参数变化 …… 46
3.4.3 update函数触发变化 ………… 47
3.4.4 参数binding对象 …………… 47
第4章 过滤器
4.1 过滤器注册 ………………………… 48
4.2 双向过滤器 ………………………… 49
4.3 动态参数 …………………………… 50
4.4 过滤器在Vue.js 2.0中的变化 … … 51
第5章 过渡
5.1 CSS过渡 …………………………… 52
5.1.1 CSS过渡的用法 ……………… 52
5.1.2 CSS过渡钩子函数 …………… 54
5.1.3 显示声明过渡类型 …………… 57
5.1.4 自定义过渡类名 ……………… 57
2
目 录
目 录
5.2 JavaScript过渡 ………………… 58
5.2.1 Velocity.js …………………… 58
5.2.2 JavaScript过渡使用 ………… 58
5.3 过渡系统在Vue.js 2.0中的变化 … 59
5.3.1 用法变化 ……………………… 59
5.3.2 类名变化 ……………………… 60
5.3.3 钩子函数变化 ………………… 61
5.3.4 transition-group …………… 63
第6章 组件
6.1 组件注册 …………………………… 65
6.1.1 全局注册 ……………………… 65
6.1.2 局部注册 ……………………… 66
6.1.3 注册语法糖 …………………… 67
6.2 组件选项 …………………………… 67
6.2.1 组件选项中与Vue选项的区别 67
6.2.2 组件Props …………………… 68
6.3 组件间通信 ………………………… 71
6.3.1 直接访问 ……………………… 71
6.3.2 自定义事件监听 ……………… 72
6.3.3 自定义事件触发机制 ………… 72
6.3.4 子组件索引 …………………… 75
6.4 内容分发 …………………………… 76
6.4.1 基础用法 ……………………… 76
6.4.2 编译作用域 …………………… 77
6.4.3 默认slot ……………………… 78
6.4.4 slot属性相同 ………………… 79
6.4.5 Modal实例 …………………… 79
6.5 动态组件 …………………………… 82
6.5.1 基础用法 …………………… 82
6.5.2 keep-alive …………………… 83
6.5.3 activate 钩子函数 …………… 84
6.6 Vue.js 2.0中的变化 ……………… 85
6.6.1 event ………………………… 85
6.6.2 keep-alive …………………… 86
6.6.3 slot …………………………… 87
6.6.4 refs …………………………… 87
第7章 Vue.js常用插件
7.1 Vue-router ……………………… 88
7.1.1 引用方式 ……………………… 88
7.1.2 基本用法 ……………………… 89
7.1.3 嵌套路由 ……………………… 90
7.1.4 路由匹配 ……………………… 92
7.1.5 具名路由 ……………………… 93
7.1.6 路由对象 ……………………… 93
7.1.7 v-link ………………………… 94
7.1.8 路由配置项 …………………… 95
7.1.9 route钩子函数 ……………… 96
7.1.10 路由实例属性及方法 ………… 99
7.1.11 vue-router 2.0 的变化 …… 100
7.2 Vue-resource ………………… 104
7.2.1 引用方式 ……………………… 104
7.2.2 使用方式 ……………………… 105
7.2.3 $http的api方法和选项参数 … 105
7.2.4 拦截器 ………………………… 107
7.2.5 $resource用法 ……………… 107
7.2.6 封装Service层 ……………… 109
7.3 Vue-devtools …………………… 109
7.3.1 安装方式 ……………………… 110
7.3.2 使用效果 ……………………… 110
第8章 Vue.js工程实例
8.1 准备工作 …………………………… 111
8.1.1 webpack ……………………… 111
8.1.2 vue-loader …………………… 113
8.2 目录结构 …………………………… 115
8.3 前端开发 …………………………… 117
8.4 后端联调 …………………………… 122
8.5 部署上线 …………………………… 124
8.5.1 生成线上文件 ………………… 124
8.5.2 nginx ………………………… 125
8.5.3 gitlab ………………………… 126
8.5.4 jenkins ……………………… 127
第9章 状态管理：Vuex
9.1 概述 ………………………………… 130
9.2 简单实例 …………………………… 131
9.2.1 所需组件 ……………………… 131
9.2.2 创建并注入store …………… 132
9.2.3 创建action及组件调用方式 … 133
9.2.4 创建mutation ………………… 134
9.2.5 组件获取state ……………… 135
9.3 严格模式 …………………………… 137
9.4 中间件 ……………………………… 137
9.4.1 快照 …………………………… 138
9.4.2 logger ………………………… 138
9.5 表单处理 …………………………… 139
9.6 目录结构 …………………………… 142
9.6.1 简单项目 ……………………… 142
9.6.2 大型项目 ……………………… 143
9.7 实例 ………………………………… 145
9.7.1 state结构 ……………………… 146
9.7.2 actions.js …………………… 148
3
目 录
目 录
9.7.3 app.js ………………………… 148
9.7.4 组件结构 ……………………… 148
9.7.5 base组件 …………………… 152
9.7.6 展示结果 ……………………… 154
9.8 Vue.js 2.0的变化 ………………… 155
9.8.1 State ………………………… 155
9.8.2 Getters ……………………… 156
9.8.3 Mutations …………………… 157
9.8.4 Actions ……………………… 157
9.8.5 Modules ……………………… 159
第10章 跨平台开发：Weex
10.1 Weex简介 ………………………… 161
10.2 Weex安装 ………………………… 162
10.2.1 ios环境安装 ………………… 162
10.2.2 android环境安装 …………… 163
10.2.3 web端运行 ………………… 164
10.3 Weex实例与运行………………… 164
10.4 Weex基础语法 ………………… 168
10.4.1 数据绑定 ……………………… 168
10.4.2 事件绑定 …………………… 169
10.4.3 模板逻辑 …………………… 169
10.5 Weex内置组件…………………… 170
10.5.1 scroller ……………………… 170
10.5.2 list …………………………… 171
10.5.3 Switch ……………………… 172
10.5.4 Slider ………………………… 172
10.5.5 wxc-tabbar ………………… 174
10.5.6 wxc-navpage ……………… 175
10.6 Weex内置模块…………………… 176
10.6.1 dom ………………………… 176
10.6.2 steam ……………………… 177
10.6.3 modal ……………………… 178
10.6.4 animation …………………… 179
10.6.5 webview …………………… 180
10.6.6 navigator …………………… 181
10.6.7 storage ……………………… 182
第11章 Vue.js 2.0新特性
11.1 Render函数 ……………………… 183
11.1.1 createElement用法 ………… 184
11.1.2 使用案例 ……………………… 185
11.1.3 函数化组件 …………………… 186
11.1.4 JSX …………………………… 187
11.2 服务端渲染 ………………………… 188
11.2.1 vue-server-renderer …… 188
11.2.2 简单实例 ……………………… 189
11.2.3 缓存和流式响应 ……………… 191
11.2.4 SPA实例 …………………… 193
编制：Ｖｕｅ．ｊｓ研发群１６５８６２１９９
Vue.js简介
1
第 章
近几年，互联网前端行业发展得依旧迅猛，涌现出了很多优秀的框架，同时这些框架也
正在逐渐改变我们传统的前端开发方式。Google 的 AngularJS、Facebook 的 ReactJS，这些
前端 MVC（MVVM）框架的出现和组件化开发的普及和规范化，既改变了原有的开发思维和
方式，也使得前端开发者加快脚步，更新自己的知识结构。2014 年 2 月，原 Google 员工尤雨
溪公开发布了自己的前端库——Vue.js，时至今日，Vue.js 在 GitHub 上已经收获超过 30000star，
而且也有越来越多的开发者在实际的生产环境中运用它。
本书主要以 Vue.js 1.0.26 版本为基准进行说明，Vue.js 2.0 版本与之不同的地方，会在
对应章节中说明。
1.1 Vue.js是什么
单独来讲，Vue.js 被定义成一个用来开发 Web 界面的前端库，是个非常轻量级的工具。
Vue.js 本身具有响应式编程和组件化的特点。
所谓响应式编程 , 即为保持状态和视图的同步，这个在大多数前端 MV*（MVC/MVVM/
MVW）框架，不管是早期的 backbone.js 还是现在 AngularJS 都对这一特性进行了实现（也
称之为数据绑定），但这几者的实现方式和使用方式都不相同。相比而言，Vue.js 使用起来更
为简单，也无需引入太多的新概念，声明实例 new Vue({ data : data }) 后自然对 data 里面
的数据进行了视图上的绑定。修改 data 的数据，视图中对应数据也会随之更改。
Vue.js 的组件化理念和 ReactJS 异曲同工——“一切都是组件”，可以将任意封装好的代
