目 录
第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<p>目 录</p> <p>第1篇 基础篇</p> <p>第1章 初识Vue.js 3</p> <p>1.1 Vue.js是什么 3</p> <p>1.1.1 MVVM模式 3</p> <p>1.1.2 Vue.js有什么不同 4</p> <p>1.2 如何使用Vue.js 5</p> <p>1.2.1 传统的前端开发模式 5</p> <p>1.2.2 Vue.js的开发模式 5</p> <p>第2章 数据绑定和**个Vue应用 8</p> <p>2.1 Vue实例与数据绑定 9</p> <p>2.1.1 实例与数据 9</p> <p>2.1.2 生命周期 10</p> <p>2.1.3 插值与表达式 11</p> <p>2.1.4 过滤器 13</p> <p>2.2 指令与事件 15</p> <p>2.3 语法糖 18</p> <p>第3章 计算属性 19</p> <p>3.1 什么是计算属性 19</p> <p>3.2 计算属性用法 20</p> <p>3.3 计算属性缓存 23</p> <p>第4章 v-bind及class与style绑定 25</p> <p>4.1 了解v-bind指令 25</p> <p>4.2 绑定class的几种方式 26</p> <p>4.2.1 对象语法 26</p> <p>4.2.2 数组语法 27</p> <p>4.2.3 在组件上使用 29</p> <p>4.3 绑定内联样式 30</p> <p>第5章 内置指令 32</p> <p>5.1 基本指令 32</p> <p>5.1.1 v-cloak 32</p> <p>5.1.2 v-once 33</p> <p>5.2 条件渲染指令 33</p> <p>5.2.1 v-if、v-else-if、v-else 33</p> <p>5.2.2 v-show 36</p> <p>5.2.3 v-if与v-show的选择 36</p> <p>5.3 列表渲染指令v-for 37</p> <p>5.3.1 基本用法 37</p> <p>5.3.2 数组更新 41</p> <p>5.3.3 过滤与排序 43</p> <p>5.4 方法与事件 44</p> <p>5.4.1 基本用法 44</p> <p>5.4.2 修饰符 46</p> <p>5.5 实战:利用计算属性、指令等知识开发购物车 47</p> <p>第6章 表单与v-model 55</p> <p>6.1 基本用法 55</p> <p>6.2 绑定值 61</p> <p>6.3 修饰符 63</p> <p>第7章 组件详解 65</p> <p>7.1 组件与复用 65</p> <p>7.1.1 为什么使用组件 65</p> <p>7.1.2 组件用法 66</p> <p>7.2 使用props传递数据 70</p> <p>7.2.1 基本用法 70</p> <p>7.2.2 单向数据流 72</p> <p>7.2.3 数据验证 74</p> <p>7.3 组件通信 75</p> <p>7.3.1 自定义事件 75</p> <p>7.3.2 使用v-model 77</p> <p>7.3.3 非父子组件通信 79</p> <p>7.4 使用slot分发内容 83</p> <p>7.4.1 什么是slot 83</p> <p>7.4.2 作用域 84</p> <p>7.4.3 slot用法 85</p> <p>7.4.4 作用域插槽 87</p> <p>7.4.5 访问slot 89</p> <p>7.5 组件**用法 90</p> <p>7.5.1 递归组件 90</p> <p>7.5.2 内联模板 92</p> <p>7.5.3 动态组件 93</p> <p>7.5.4 异步组件 94</p> <p>7.6 其他 95</p> <p>7.6.1 $nextTick 95</p> <p>7.6.2 X-Templates 96</p> <p>7.6.3 手动挂载实例 97</p> <p>7.7 实战:两个常用组件的开发 98</p> <p>7.7.1 开发一个数字输入框组件 98</p> <p>7.7.2 开发一个标签页组件 106</p> <p>第8章 自定义指令 118</p> <p>8.1 基本用法 118</p> <p>8.2 实战 121</p> <p>8.2.1 开发一个可从外部关闭的下拉菜单 121</p> <p>8.2.2 开发一个实时时间转换指令v-time 126</p> <p>第2篇 进阶篇</p> <p>第9章 Render函数 133</p> <p>9.1 什么是Virtual Dom 133</p> <p>9.2 什么是Render函数 136</p> <p>9.3 createElement用法 140</p> <p>9.3.1 基本参数 140</p> <p>9.3.2 约束 143</p> <p>9.3.3 使用JavaScript代替模板功能 147</p> <p>9.4 函数化组件 153</p> <p>9.5 JSX 157</p> <p>9.6 实战:使用Render函数开发可排序的表格组件 159</p> <p>9.7 实战:留言列表 172</p> <p>9.8 总结 183</p> <p>第10章 使用webpack 184</p> <p>10.1 前端工程化与webpack 184</p> <p>10.2 webpack基础配置 187</p> <p>10.2.1 安装webpack与webpack-dev-server 187</p> <p>10.2.2 就是一个js文件而已 188</p> <p>10.2.3 逐步完善配置文件 191</p> <p>10.3 单文件组件与vue-loader 194</p> <p>10.4 用于生产环境 201</p> <p>第11章 插件 206</p> <p>11.1 前端路由与vue-router 207</p> <p>11.1.1 什么是前端路由 207</p> <p>11.1.2 vue-router基本用法 208</p> <p>11.1.3 跳转 212</p> <p>11.1.4 **用法 213</p> <p>11.2 状态管理与Vuex 216</p> <p>11.2.1 状态管理与使用场景 216</p> <p>11.2.2 Vuex基本用法 217</p> <p>11.2.3 **用法 221</p> <p>11.3 实战:**事件总线插件vue-bus 227</p> <p>第3篇 实战篇</p> <p>第12章 iView经典组件剖析 235</p> <p>12.1 级联选择组件Cascader 236</p> <p>12.2 折叠面板组件Collapse 249</p> <p>12.3 iView内置工具函数 257</p> <p>第13章 实战:知乎日报项目开发 261</p> <p>13.1 分析与准备 261</p> <p>13.2 **列表与分类 265</p> <p>13.2.1 搭建基本结构 265</p> <p>13.2.2 主题日报 267</p> <p>13.2.3 每日** 271</p> <p>13.2.4 自动加载更多**列表 276</p> <p>13.3 文章详情页 278</p> <p>13.3.1 加载内容 278</p> <p>13.3.2 加载评论 281</p> <p>13.4 总结 286</p> <p>第14章 实战:电商网站项目开发 288</p> <p>14.1 项目工程搭建 288</p> <p>14.2 商品列表页 290</p> <p>14.2.1 需求分析与模块拆分 290</p> <p>14.2.2 商品简介组件 291</p> <p>14.2.3 列表按照价格、**排序 297</p> <p>14.2.4 列表按照品牌、颜色筛选 306</p> <p>14.3 商品详情页 309</p> <p>14.4 购 物 车 313</p> <p>14.4.1 准备数据 314</p> <p>14.4.2 显示和操作数据 316</p> <p>14.4.3 使用优惠码 320</p> <p>14.5 总结 324</p> <p>第15章 相关开源项目介绍 325</p> <p>15.1 服务端渲染与Nuxt.js 325</p> <p>15.1.1 是否需要服务端渲染 325</p> <p>15.1.2 Nuxt.js 326</p> <p>15.2 HTTP库axios 327</p> <p>15.3 多语言插件vue-i18n 329</p>显示全部信息前 言引 言
两年前,我开始接触Vue.js框架,当时就被它的轻量、组件化和友好的API所吸引。之后我将Vue.js和webpack技术栈引入我的公司(TalkingData)可视化团队,并经过一年多的实践,现已成为整个公司的前端开发规范。
与此同时,我开源了iView 项目,它是基于 Vue.js的一套高质量 UI 组件库,从设计规范、工程构建到国际化都提供了完整的解决方案,并支持 SSR。在许多志愿者的帮助下,将文档全部翻译为英文,在Vue***社区颇受欢迎。
如今,前端框架可谓百家争鸣,但每一个框架的产生都是为了解决具体问题的。Vue.js以渐进式切入,对不同阶段的***提供了不同的开发模式,由浅入深。Vue.js 提供了友好的API和强大的功能,包括双向数据绑定、路由、状态管理、动画、组件化、SSR,无论是简单的页面还是复杂的系统,从可复用性、便捷性和维护性上都精益求精。
有幸完成此书,希望能给Vue.js社区带来一点帮助。
<p>引 言</p> <p>两年前,我开始接触Vue.js框架,当时就被它的轻量、组件化和友好的API所吸引。之后我将Vue.js和webpack技术栈引入我的公司(TalkingData)可视化团队,并经过一年多的实践,现已成为整个公司的前端开发规范。</p> <p>与此同时,我开源了iView 项目,它是基于 Vue.js的一套高质量 UI 组件库,从设计规范、工程构建到国际化都提供了完整的解决方案,并支持 SSR。在许多志愿者的帮助下,将文档全部翻译为英文,在Vue***社区颇受欢迎。</p> <p>如今,前端框架可谓百家争鸣,但每一个框架的产生都是为了解决具体问题的。Vue.js以渐进式切入,对不同阶段的***提供了不同的开发模式,由浅入深。Vue.js 提供了友好的API和强大的功能,包括双向数据绑定、路由、状态管理、动画、组件化、SSR,无论是简单的页面还是复杂的系统,从可复用性、便捷性和维护性上都精益求精。</p> <p>有幸完成此书,希望能给Vue.js社区带来一点帮助。</p> <p> </p> <p> </p> <p> </p> <p> </p> <p>梁灏(Aresn)</p> <p>2017年7月10日</p>显示全部信息媒体评论推 荐 序在撰写Vue文档的过程中,出于篇幅和精力的限制,主要着力于对Vue本身API的解释。对于缺乏实战经验的读者来说,虽然可能明白了API的用法,但对于如何将它使用在实际项目中仍然会感到困惑。而这本书的优点,正是在于对重要的知识点结合了一些实战范例来帮助读者更好地理解API设计的初衷和使用场景,并且在GitHub有对应的源码可以下载研究。本书的作者梁灏是**的开源Vue组件库iView的作者,也为Vue社区的活跃做出了很多贡献。同时,对开源的投入也使得他对Vue的设计和底层实现有相当深入的理解。如果你喜欢通过实例来学习,那么这本书会是你上手Vue的一个好选择。





尤雨溪 2017年6月免费在线读

目 录
第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

Vue.js作者尤雨溪作**序,业界前端大腕(TalkingData 研发副总裁,马骥;w3cplus.com站长,大漠;在线回声前端技术专家,justjavac(迷渡);laravel-china.org站长,Summer)联袂**! Vue社区iView组件贡献者,前端大神梁灏执笔编撰,突出实战,应用为王。