chapter-1 review1

Author: hiscc

chapter-1/Going Shopping with Vue.js.md

@@ -4,7 +4,7 @@
 JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of
 MVVM architecture."
 
-这是来自 Jargon 的建议， Vue.js 是一款 JavaScript 库， 它基于数据模型来创建用户界面(Viewss) http://jargon.js.org/_glossary/VUEJS.md 。
+这是来自 Jargon 的建议， Vue.js 是一款 JavaScript 库， 它基于数据模型来创建用户界面(Views) http://jargon.js.org/_glossary/VUEJS.md 。
 
 Vue.js 官方站点( https://vuejs.org/ ) 在几个月前说 Vue.js 像是为现代 web 用户界面的响应式组件。
 
@@ -28,23 +28,25 @@ Vue.js 官方站点( https://vuejs.org/ ) 在几个月前说 Vue.js 像是为现
 
 ## Vue.js 历史
 
-当时 Evan You， Vue.js 的创建者 ( http://evanyou.me/ )， 在 Google Creative 实验室搞一个项目， 它们需要一款制作快速原型而不是大的 UI 界面。 书写大量重复的 HTML 是很耗时耗资源的， 所以 Evan 开始寻找一些已有的工具。 出乎意料的是， 这里没有一款工具， 库， 或是框架可以很好地制作快速原型！ 在那时， Angular 被广泛使用， React.js 才刚刚起步， 例如 Backbone.js 的 MVC 框架被用于大型方程式。 对于这种需要弹性及轻量级的快速原型项目来说， 这些复杂的框架无法胜任。
+当时 Evan You， Vue.js 的创建者 ( http://evanyou.me/ )， 在 Google Creative 实验室搞一个项目， 它们需要一款制作快速原型而不是大型的 UI 视图的工具。 书写大量重复的 HTML 是很耗时耗资源的， 所以 Evan 开始寻找一些已有的工具。 出乎意料的是， 这里没有一款工具， 库， 或是框架可以很好地制作快速原型！ 在那时， Angular 被广泛使用， React.js 才刚刚起步， 像 Backbone.js 这样的 MVC 框架被用于大型方程式。 对于这种需要弹性及轻量级的快速原型项目来说， 这些复杂的框架无法胜任。
 
 当你意识到这些东东很酷且不存在时， 你可能自己动手创造它 -- just do it！
 
 ### 注意
 
-Vue.js 以制作快速原型工具的身份诞生。 现在它可悲用于构建复杂大规模响应式 web 方程式。
+Vue.js 以制作快速原型工具的身份诞生。 现在它可被用于构建复杂大规模响应式 web 方程式。
 
-这就是 Evan 所做的。 这就是他想出创造一个库通过简单， 弹性的响应式数据和可重用组件的方式帮助制造快速原型的事。
+这就是 Evan 所做的。 他通过简单， 弹性的响应式数据和可重用组件的方式帮助制造快速原型进而创造一个库的故事。
 
-就像每个库一样， Vue.js 也不断成长发展， 因此提供了越来越多的功能。 现在， 它提供了一种简单的方式来添加创建插件， 书写和使用混入， 为整体添加自定义行为。 Vue 可以像框架一样以弹性灵活的方式构建 web 方程式。
+就像每个库一样， Vue.js 也不断成长发展， 因此提供了越来越多的功能。 现在， 它提供了一种简单的方式来添加创建插件， 书写和使用混入， 为方程式整体添加自定义行为。 Vue 可以像框架一样以弹性灵活的方式构建 web 方程式。
 
 ## 关于 Vue.js 最重要的事
 
 Vue.js 允许你简单绑定你的数据模型给呈现层。 它也允许你在整个方程式内简单地重用组件。
 
-在这你不需要创建特殊的模型或者集合来注册事件对象。 你不需要遵循一些特别的语法。 你不需要安装无止境的依赖。
+在这儿你不需要创建特殊的模型或者集合来注册事件对象。 你不需要遵循一些特别的语法。 你不需要安装无止境的依赖。
+
+<这三句话都在说谁， 你们知道的！(￣o￣) . >
 
 你的模型是原生 JavaScript 对象。 它们可以被绑定给任意视图(text， inputtext， classes， attributes 等)。
 
@@ -54,7 +56,7 @@ Vue.js 允许你简单绑定你的数据模型给呈现层。 它也允许你在
 
 我知道你的周末又近了， 你想去杂货店为下周采购一些东东。 除非你记忆力超群， 否则在出发前你一定需要一个购物清单。 你可能已经在使用了一些方程式来这样做了， 但我们为啥不自己也做一个呢？ 你觉得我们自己创建设计一个购物清单方程式怎么样？ 还等啥， 我们动手吧！ 我们来创建自己的购物清单方程式。 这非常简单只需为购物清单构建交互原型。
 
-这个方程式允许我们增加删除选项并展示我们的购物列表。 实际上呢， 这个 ToDo 列表有点像。 我们以经典的 HTML + CSS + JS + jQuery 来实现它。 我们将使用 Bootstrap 框架来添加一些赏心悦目的样式。
+这个方程式允许我们增加删除选项并展示我们的购物列表。 实际上呢， 这和 ToDo 列表有点像。 我们以经典的 HTML + CSS + JS + jQuery 组合来实现它。 我们将使用 Bootstrap 框架来添加一些赏心悦目的样式。
 
 ## 用 jQuery 实现一个购物清单
 
@@ -66,7 +68,7 @@ Vue.js 允许你简单绑定你的数据模型给呈现层。 它也允许你在
  <div class="input-group">
  <input placeholder="add shopping list item" type="text" class="js-new-item form-control">
  <span class="input-group-btn">
- <button @click="addItem" class="js-add btn btn-default"
+ <button class="js-add btn btn-default"
  type="button">Add!</button>
  </span>
  </div>
@@ -209,7 +211,7 @@ $('.js-change-title').keyup(onChangeTitle);
 
 ## 用 Vue.js 完成购物清单
 
-这是个非常简单的事例。 我们试着用 Vue.js 一步步完成它。 这里有许多用方法引入 *vue.js*， 在本章， 我们将通过 NPM 添加 Vue 文件的方式引入：
+这是个非常简单的事例。 我们试着用 Vue.js 一步步完成它。 这里有许多用方法引入 *vue.js*， 在本章， 我们将通过 CDN 添加 Vue 文件的方式引入：
 
 ```html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js">
@@ -252,15 +254,15 @@ new Vue({
 
 我们来分析一下这个事例。 Vue 方程式以 *new Vue* 关键字开始。 我们是怎么绑定这些标记给方程式数据的呢？ 我们 *vue* 实例传入绑定的 DOM 元素而其它页面中的标记将不受 Vue 影响。
 
-正如你所见， 我们的标记包围在 *#app* 元素内并以第一个参数传入 Vue 选项内。 *data* 参数包含着被应用于双花括号内的内容标记的对象。 如果你了解一些模板预处理器， 将会对这种语法很熟悉。
+正如你所见， 我们的标记包围在 *#app* 元素内并以第一个参数传入 Vue 配置选项内。 *data* 参数包含着被应用于双花括号内的内容。 如果你了解一些模板预处理器， 将会对这种语法很熟悉。
 
-那又如何？ 你可能惊呼起来。 你要叫我啥？ 如何使用模板预处理器？ 谢谢， 手动再见！
+那又如何？ 你可能惊呼起来。 你要教我啥？ 如何使用模板预处理器？ 谢谢， 手动再见 \(•ω•)o！
 
-别， 我亲爱的读者朋友， 耐心点， 我们继续来完成我们的事例。 有趣的就在后面！
+别， ＞﹏＜ 我亲爱的读者朋友， 耐心点， 我们继续来完成我们的事例。 有趣的就在后面！
 
 ## 用开发者工具分析数据绑定
 
-我们来看看数据绑定是怎么回事。 打开你浏览器的开发者工具， 找到 JavaScript 代码， 在断点脚本前面添加一个断点。 现在分析下 *data* 对象在 Vue 初始化前后的变化。 如你所见， 变化很大。 现在 *data* 对象已经绑定为响应式数据了：
+我们来看看数据绑定是怎么回事。 打开你浏览器的开发者工具， 找到 JavaScript 代码， 在脚本开始前添加一个断点。 现在分析下 *data* 对象在 Vue 初始化前后的变化。 如你所见， 变化很大。 现在 *data* 对象已经绑定为响应式数据了：
 
 ![](imgs/1-5.png)
 
@@ -270,11 +272,11 @@ data 对象在 Vue 初始化前后的变化
 
 ![](imgs/1-6.png)
 
-数据绑定： 变化对象的属性将迅速影响到视图上
+数据绑定： 变化对象的属性将迅速影响视图
 
 ## 用双向绑定把用户输入带给 data
 
-所以， 在我们额事例中， 我们可以用原生的 JavaScript 数据模型传递到页面中。 我们提供了一种方程式数据通向视图的单向方式。 你不觉得如果我们提供一种双向的数据绑定会更好吗？
+所以， 在我们的事例中， 我们可以把原生的 JavaScript 数据模型传递到页面中。 我们提供了一种方程式数据通向视图的单向方式。 你不觉得如果我们提供一种双向的数据绑定会更好吗？
 
 我们现在就看看怎么实现双向的数据绑定， 怎样在页面上改变 *data* 的属性值。
 
@@ -307,15 +309,15 @@ data 对象在 Vue 初始化前后的变化
 
 ![](imgs/1-7.png)
 
-数据绑定： 改变绑定在模型属性上的文本将影响绑定的相同属性
+数据绑定： 改变绑定在模型属性上的文本将影响被绑定的相同属性
 
 很棒吧； 但是这个事例仅仅有两个列表项。 我们需要渲染更多的列表项。
 
 ## 用 v-for 指令渲染更多的列表项
 
-我们需要一种机制来遍历 *items* 数组并在 *<ul>* 中渲染每一个列表项。
+我们需要一种机制来遍历 *items* 数组并在 *ul* 中渲染每一个列表项。
 
-幸运的是， Vue.js 提供一种很棒的指令来做这件事。 它就是 *v-for*。 我们将在 *<li>* 上使用它。 修改我们的标记：
+幸运的是， Vue.js 提供一种很棒的指令来做这件事。 它就是 *v-for*。 我们将在 *li* 上使用它。 修改我们的标记：
 
 ```html
 <ul>
@@ -348,7 +350,7 @@ var data = {
 };
 ```
 
-我们的标记看起来时这样的：
+我们的标记看起来是这样的：
 
 ```html
 <ul>
@@ -364,7 +366,7 @@ var data = {
 </ul>
 ```
 
-刷新页面查看 *items* 的 *checked* 属性， 观察效果。 每个 *<li>* 的状态都被绑定到复选框的布尔值上了。
+刷新页面查看 *items* 的 *checked* 属性， 观察效果。 每个 *li* 的状态都被绑定到复选框的布尔值上了。
 
 ## 使用 v-on 指令添加新的购物清单
 
@@ -400,7 +402,7 @@ new Vue({
 });
 ```
 
-我们为 *data* 对象添加了一个新属性叫 *newItem*。 然后我们加了一个新的 *methods* 给 Vue 初始化设置对象并添加了 *addItem* 方法。 所有的 *data* 属性都可以在 *methods* 内通过 *this* 关键字访问到。 因此， 在这个方法内， 我们取得 *this.newItem* 并添加它到 *this.items* 数组。 现在我们必须这个方法的调用绑定到用户操作上。 就像前面提及的， 我们将使用 *v-on* 指令并应用 *enter* 键盘事件给 **Add!** 点击按钮。
+我们为 *data* 对象添加了一个新属性叫 *newItem*。 然后我们加了一个新的 *methods* 给 Vue 初始化设置对象并添加了 *addItem* 方法。 所有的 *data* 属性都可以在 *methods* 内通过 *this* 关键字访问到。 因此， 在这个方法内， 我们取得 *this.newItem* 并添加它到 *this.items* 数组。 现在我们必须把这个方法的调用绑定到用户操作上。 就像前面提及的， 我们将使用 *v-on* 指令并应用 *enter* 键盘事件给 **Add!** 点击按钮。
 
 我们的标记是这样的：
 
@@ -484,9 +486,9 @@ JSFiddle： https://jsfiddle.net/chudaol/vxfkxjzk/3/。
 
 ## 在已有的项目中使用 Vue.js
 
-我知道你现在感觉绑定模型属性给视图是多么容易， 你看是思考如何在你的项目内使用它了。 但是你可能会觉得使用 Vue.js 很麻烦需要安装一堆文件。
+我知道你现在感觉绑定模型属性给视图是多么容易， 你开始思考如何在你的项目内使用它了。 但是你可能会觉得使用 Vue.js 很麻烦需要安装一堆文件。
 
-在这我告诉你： 完全不需要！ 不需要任何安装， 仅仅引入 *vue.js* 文件就可以了。 就这么简单。
+在这儿我告诉你： 完全不需要！ 不需要任何安装， 仅仅引入 *vue.js* 文件就可以了。 就这么简单。
 
 ## Vue.js 2.0!
 
@@ -495,7 +497,7 @@ JSFiddle： https://jsfiddle.net/chudaol/vxfkxjzk/3/。
 * http://www.infoworld.com/article/3063615/javascript/vuejs-lead-our-javascriptframework-is-faster-than-react.html
 * https://www.reddit.com/r/vuejs/comments/4gq2r1/announcing_vuejs_20/
 
-第二版的 Vue.js 比前前面的版本有了很大的变化， 数据绑定的方式变化了并被写入 API。 运用轻量级的虚拟 DOM 来进行渲染， 支持服务端渲染， 更快更精简。
+第二版的 Vue.js 比起前面的版本有了很大的变化， 数据绑定的方式变化了并被写入 API。 运用轻量级的虚拟 DOM 来进行渲染， 支持服务端渲染， 更快更精简。
 
 写作此书时， Vue 2.0 还是 alpha 阶段。 别担心， 尽管如此，我们在本书中所有的事例都将基于最新稳定版的 Vue 2.0， 并完全支持这两个版本。
 
@@ -511,24 +513,24 @@ JSFiddle： https://jsfiddle.net/chudaol/vxfkxjzk/3/。
 本书组织结构如下：
 * 第二章， 基础 -- 安装使用， 理论性的知识， 将解释 Vue.js 背后的机制及主要组成部分。 所以， 你对理论不感冒可以跳过本章。 本章我们将经过安装使用和启动步骤。
 * 从第三章至第八章， 我们将以构建方程式的方式来浏览 Vue.js 主要功能：
- * 在第三章， 组件 -- 理解与使用， 我们将介绍 Vue 组件并在我们的方程式内应用。
- * 在第四章， 响应式 -- 为你的方程式绑定数据， 我们将使用 Vue 提供的所有数据绑定机制。
- * 在第五章， Vuex -- 在方程式内管理状态， 我们将介绍 Vuex 状态管理系统并解释如何在我们的方程式内使用
- * 在第六章， 插件 -- 自己动手，丰衣足食， 我们将学习如何为 Vue 方程式通过创建使用插件来添加功能。
- * 在第七章， 测试 -- 测试我们所做的一切， 我们将覆盖并浏览 Vue.js 的自定义指令并我们的方程式创建一些指令。
- * 在第八章， 部署 -- 上线！， 我们将学习如何测试并部署我们的 Vue.js 方程式
+  * 在第三章， 组件 -- 理解与使用， 我们将介绍 Vue 组件并在我们的方程式内应用。
+  * 在第四章， 响应式 -- 为你的方程式绑定数据， 我们将使用 Vue 提供的所有数据绑定机制。
+  * 在第五章， Vuex -- 在方程式内管理状态， 我们将介绍 Vuex 状态管理系统并解释如何在我们的方程式内使用
+  * 在第六章， 插件 -- 自己动手，丰衣足食， 我们将学习如何为 Vue 方程式通过创建使用插件来添加功能。
+  * 在第七章， 测试 -- 测试我们所做的一切， 我们将覆盖并浏览 Vue.js 的自定义指令并我们的方程式创建一些指令。
+  * 在第八章， 部署 -- 上线！， 我们将学习如何测试并部署我们的 Vue.js 方程式
 * 在第九章， 下一步？， 我们将总结我们所学并看看我们还需要做哪些。
 
 ## 我们来管理时间！
 
 此时， 我已经知道你已经迫不及待地想通读此书了。 这样可不好， 我们需要管理我们的时间， 劳逸结合。 所以我们来创建一个简单的方程式来实现番茄工作法。
 
 ### 注意
-番茄工作法是一款事件管理技术以厨房番茄计时器。 这种技术以把工作时间打碎为小块的工作时段而组成。 更多番茄工作法信息： http://pomodorotechnique.com/ 。
+番茄工作法是一种时间管理技术以厨房番茄计时器命名。 这种技术以把工作时间打碎为小块的工作时段而组成。 更多番茄工作法信息： http://pomodorotechnique.com/ 。
 
 因此， 我们的目的非常简单。 我们仅仅需要创建一个非常简单的时间计时器， 它将不断递减计时器来轮换工作时间和休息时间。
 
-我们动手吧！
+我们动手吧o(*￣▽￣*)ブ！
 
 我们将引入两个 Vue data 变量， *minute， second*， 显示到我们的页面上。 秒数持续递减直到递减为零时， 分数递减； 当秒数和分数都为零时， 方程式切换工作时间与休息时间：
 
@@ -617,7 +619,7 @@ new Vue({
 我们用计算属性来修复第一个问题。
 
 ### 注意
-计算属性是在 *data* 对象内允许我们避免用额外的逻辑过度扰乱模板的属性。 你可以在在 Vue 的官方站点找到更多信息： http://vuejs.org/guide/computed.html 。
+计算属性是在 *data* 对象内允许我们避免用额外的逻辑过度扰乱模板的属性。 你可以在 Vue 的官方站点找到更多信息： http://vuejs.org/guide/computed.html 。
 
 在 Vue 的配置对象内添加计算部分和标题属性：
 
@@ -647,7 +649,7 @@ methods: {
 <div class="well">
 ```
 
-好棒！ 现在我们有了在番茄钟状态变化时自动变化的标题了：
+好棒！q(≧▽≦q) 现在我们有了在番茄钟状态变化时自动变化的标题了：
 
 ![](imgs/1-10.png)
 
@@ -657,7 +659,7 @@ methods: {
 
 ## 使用计算属性制造左间距
 
-现在解决第二个问题。 我们添加两个计算属性， *min* 和 *sec*， 在 *data* 选项的计算部分并运用简单的算法在零的左边制造一个边距。 当然， 我们我们可以使用一个非常著名的项目 ( https://github.com/stevemao/left-pad)， 但是为了更简单并不破坏整个互联网 ( http://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/)， 我们自己添加一个简单的逻辑：
+现在解决第二个问题。 我们添加两个计算属性， *min* 和 *sec*， 在 *data* 选项的计算部分并运用简单的算法在零的左边制造一个边距。 当然， 我们可以使用一个非常著名的项目 ( https://github.com/stevemao/left-pad )， 但是为了更简单并不破坏整个互联网 ( http://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/ )， 我们自己添加一个简单的逻辑：
 
 ```js
 computed: {
@@ -776,4 +778,4 @@ new Vue({
 
 我非常高兴你看到这里了， 这意味着你已经知道 Vue.js 是什么， 如果有人问你它是一个工具还是库还是框架时， 你可以准确地找出答案。 你也知道如何用 Vue.js 来启动一个方程式并在已有的项目内使用 Vue 的功能。 你看了那些用 Vue.js 写的项目并开始开发一个自己的项目！ 现在你在采购时有了一个自己用 Vue.js 创建的购物清单方程式了！ 也有了自己的番茄钟。 还有最重要的是， 你可以在番茄钟内放入一只随机的猫咪了(>^ω^<)。
 
-在下一章， 我们将探究 Vue 的幕后， 它是如何运作的， 它的使用的架构模式又是怎样的。 对于事例中的每个概念我们将以 demo 的形式来演示它。 然后我们将准备深入代码并完善我们的方程式， 让它们变得更棒。
+在下一章， 我们将探究 Vue 的幕后， 它是如何运作的， 它使用的架构模式又是怎样的。 对于事例中的每个概念我们将以 demo 的形式来演示它。 然后我们将深入代码并完善我们的方程式， 让它们变得更棒。