Merge pull request #91 from 70data/2.0-cn

Update Guide 4 5 6

Author: dingyiming

src/guide/class-and-style.md

@@ -4,23 +4,22 @@ type: guide
 order: 6
 ---
 
-数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用` v-bind` 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 `v-bind `用于` class `和 `style `时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
-
+数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute ，我们可以用` v-bind` 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 `v-bind ` 用于 ` class ` 和 `style ` 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
 
 ## 绑定 HTML Class
 
 ### 对象语法
 
-我们可以传给 `v-bind:class` 一个对象，以动态地切换 class。
+我们可以传给 `v-bind:class` 一个对象，以动态地切换 class 。
 
 ``` html
 <div v-bind:class="{ active: isActive }"></div>
 ```
-上面的语法表示class`active`的更新将取决于数据属性`isActive`是否为[truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) 。
+上面的语法表示 class`active` 的更新将取决于数据属性 `isActive` 是否为 [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) 。
 
-我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存
+我们可以传给 v-bind:class 一个对象，以动态地切换 class 。注意 v-bind:class 指令可以与普通的 class 特性共存
 
-我们也可以在对象中传入多个属性用来动态切换多个class.注意 `v-bind:class` 指令可以与普通的 class 特性共存.如下模板:
+我们也可以在对象中传入多个属性用来动态切换多个 class 。注意 `v-bind:class` 指令可以与普通的 class 特性共存。如下模板:
 
 ``` html
 <div class="static"
@@ -43,7 +42,7 @@ data: {
 <div class="static active"></div>
 ```
 
-当 `isActive` 或者 `hasError` 变化时, class列表将相应地更新。例如，如果 `hasError` 的值为 `true`, class列表将变为 `"static active text-danger"`.
+当 `isActive` 或者 `hasError` 变化时，class列表将相应地更新。例如，如果 `hasError` 的值为 `true` ， class列表将变为 `"static active text-danger"`。
 
 你也可以直接绑定数据里的一个对象：
 
@@ -81,7 +80,7 @@ computed: {
 
 ### 数组语法
 
-我们可以把一个数组传给  `v-bind:class`，以应用一个 class 列表：
+我们可以把一个数组传给  `v-bind:class` ，以应用一个 class 列表：
 
 ``` html
 <div v-bind:class="[activeClass, errorClass]">
@@ -99,12 +98,12 @@ data: {
 <div class="active text-danger"></div>
 ```
 
-如果你也想根据条件切换列表中的 class，可以用三元表达式：
+如果你也想根据条件切换列表中的 class ，可以用三元表达式：
 
 ``` html
 <div v-bind:class="[isActive ? activeClass : '', errorClass]">
 ```
-此例始终添加 `errorClass`，但是只有在 `isActive` 是 true 时添加`activeClass` 。
+此例始终添加 `errorClass` ，但是只有在 `isActive` 是 true 时添加 `activeClass` 。
 
 不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：
 
@@ -116,7 +115,7 @@ data: {
 
 ### 对象语法
 
-`v-bind:style`  的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
+`v-bind:style` 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
 
 
 ``` html
@@ -155,7 +154,7 @@ data: {
 
 ### 自动添加前缀
 
-当`v-bind:style`使用需要厂商前缀的 CSS 属性时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。
+当 `v-bind:style` 使用需要特定前缀的 CSS 属性时，如 `transform` ，Vue.js 会自动侦测并添加相应的前缀。
 
 ***
 

src/guide/computed.md

@@ -14,7 +14,7 @@ order: 5
 </div>
 ```
 
-在这种情况下，模板不在简单和清晰。你不得不停留下意识到显示的是反向的`message`。这个问题在你不止一次反转message的时候变得更加糟糕。
+在这种情况下，模板不再简单和清晰。在实现反向显示 `message` 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。
 
 这就是为什么任何复杂逻辑，你都应当使用**计算属性**。
 
@@ -68,21 +68,21 @@ var vm = new Vue({
 {% endraw %}
 
 
-这里我们声明了一个计算属性 `reversedMessage`。我们提供的函数将用作属性 `vm.reversedMessage`的 getter。
+这里我们声明了一个计算属性 `reversedMessage` 。我们提供的函数将用作属性 `vm.reversedMessage` 的 getter 。
 
 ``` js
 console.log(vm.reversedMessage) // -> 'olleH'
 vm.message = 'Goodbye'
 console.log(vm.reversedMessage) // -> 'eybdooG'
 ```
 
-你可以打开浏览器的控制台，修改 vm。`vm.reversedMessage` 的值始终取决于 `vm.message` 的值。
+你可以打开浏览器的控制台，修改 vm 。 `vm.reversedMessage` 的值始终取决于 `vm.message` 的值。
 
-你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 `vm.reversedMessage` 依赖于 `vm.message`，因此当 `vm.message` 发生改变时，依赖于 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
+你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 `vm.reversedMessage` 依赖于 `vm.message` ，因此当 `vm.message` 发生改变时，依赖于 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
 
-### Computed Caching vs Methods
+### 计算缓存 vs Methods
 
-You may have noticed we can achieve the same result by invoking a method in the expression:
+你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果：
 
 ``` html
 <p>Reversed message: "{{ reverseMessage() }}"</p>
@@ -97,9 +97,9 @@ methods: {
 }
 ```
 
-Instead of a computed property, we can define the same function as a method instead. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on its dependencies.** A computed property will only re-evaluate when some of its dependencies have changed. This means as long as `message` has not changed, multiple access to the `reversedMessage` computed property will immediately return the previously computed result without having to run the function again.
+不经过计算属性，我们可以通过定义一个method来替代它。对于最终的结果，两种方式确实是相同的。然而，不同的是**计算缓存基于它的相关依赖**。计算属性只有在它的相关依赖发生改变时才会重新评估。这就意味着如果 `message` 没有发生改变，多次访问 `reversedMessage` 计算属性会立即返回之前的结果，而不必运行函数。
 
-This also means the following computed property will never update, because `Date.now()` is not a reactive dependency:
+这也同样意味着如下计算属性将不会更新，因为 `Date.now()` 并不会被依赖：
 
 ``` js
 computed: {
@@ -109,13 +109,13 @@ computed: {
 }
 ```
 
-In comparison, a method invocation will **always** run the function whenever a re-render happens.
+相比而言，每当重新渲染的时候，method调用**总会**运行函数。
 
-Why do we need caching? Imagine we have an expensive computed property **A**, which requires looping through a huge Array and doing a lot of computations. Then we may have other computed properties that in turn depend on **A**. Without caching, we would be executing **A**’s getter many more times than necessary! In cases where you do not want caching, use a method instead.
+我们为什么需要缓存？假设我们有一个重要的计算属性 **A** ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 **A** 。如果没有缓存，我们将执行多次 **A** 的 getter ，然而这都是不必要的！如果你不希望有缓存，请用method替代。
 
-### 计算属性 vs watch
+### 计算属性 vs Watched Property
 
-Vue.js 提供了一个方法 `$watch`，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， `$watch` 很诱人 —— 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 `$watch` 回调。考虑下面例子：
+Vue.js 提供了一个方法 `$watch` ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， `$watch` 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 `$watch` 回调。思考下面例子：
 
 ``` html
 <div id="demo">{{ fullName }}</div>
@@ -161,7 +161,7 @@ var vm = new Vue({
 
 ### 计算 setter
 
-计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：
+计算属性默认只是 getter ，不过在需要时你也可以提供一个 setter ：
 
 ``` js
 // ...
@@ -182,13 +182,13 @@ computed: {
 // ...
 ```
 
-现在在调用 `vm.fullName = 'John Doe'` 时，setter 会被调用，`vm.firstName` 和 `vm.lastName` 也会有相应更新。
+现在在调用 `vm.fullName = 'John Doe'` 时， setter 会被调用， `vm.firstName` 和 `vm.lastName` 也会有相应更新。
 
 关于计算属性背后的原理和技术细节详见[计算属性的奥秘](http://rc.vuejs.org/guide/reactivity.html#Inside-Computed-Properties)。
 
 ## 观察 Watchers
 
-当计算属性使用在大多数场景下时，有时候也很需要一个自定义的数watcher.这是为什么Vue提供一个更通用的方法通过`watch`的设置，来反应数据的变化。在你想要执行异步操作或需要响应不断变化昂贵的数据操作时这很有用。
+当计算属性使用在大多数场景下时，有时候也很需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 `watch` 的设置，来反应数据的变化。在你想要执行异步操作或需要响应不断变化昂贵的数据操作时这很有用。
 
 例如：
 
@@ -217,20 +217,18 @@ var watchExampleVM = new Vue({
     answer: 'I cannot give you an answer until you ask a question!'
   },
   watch: {
-    // whenever question changes, this function will run
+    // 如果 question 发生改变，这个函数就会运行
     question: function (newQuestion) {
       this.answer = 'Waiting for you to stop typing...'
       this.getAnswer()
     }
   },
   methods: {
-    // _.debounce is a function provided by lodash to limit how
-    // often a particularly expensive operation can be run.
-    // In this case, we want to limit how often we access
-    // yesno.wtf/api, waiting until the user has completely
-    // finished typing before making the ajax request. To learn
-    // more about the _.debounce function (and its cousin
-    // _.throttle), visit: https://lodash.com/docs#debounce
+    // _.debounce 是一个通过 lodash 限制操作频率的函数。
+    // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
+    // 一直等待直到用户发出ajax请求之前
+    // 学习更多关于 _.debounce function (and its cousin
+    // _.throttle), 参考: https://lodash.com/docs#debounce
     getAnswer: _.debounce(
       function () {
         var vm = this
@@ -247,8 +245,7 @@ var watchExampleVM = new Vue({
             vm.answer = 'Error! Could not reach the API. ' + error
           })
       },
-      // This is the number of milliseconds we wait for the
-      // user to stop typing.
+      // 这是我们为用户停止输入等待的毫秒数
       500
     )
   }
@@ -277,7 +274,7 @@ var watchExampleVM = new Vue({
     answer: 'I cannot give you an answer until you ask a question!'
   },
   watch: {
-    // whenever question changes, this function will run
+    // 如果 question 发生改变，这个函数就会运行
     question: function (newQuestion) {
       this.answer = 'Waiting for you to stop typing...'
       this.getAnswer()
@@ -300,18 +297,17 @@ var watchExampleVM = new Vue({
             vm.answer = 'Error! Could not reach the API. ' + error
           })
       },
-      // This is the number of milliseconds we wait for the
-      // user to stop typing.
+      // 这是我们为用户停止输入等待的毫秒数
       500
     )
   }
 })
 </script>
 {% endraw %}
 
-在这个示例中，使用`watch`的设置允许我们执行异步操作（访问一个接口），限制我们多久执行该操作，并在我们获取最终结果时立刻设置状态。这是计算属性无法做到的。
+在这个示例中，使用 `watch` 的设置允许我们执行异步操作（访问一个接口），限制我们多久执行该操作，并在我们获取最终结果时立刻设置状态。这是计算属性无法做到的。
 
-关于`watch` 选项，可看API文档[vm.$watch API](/api/#vm-watch)。
+关于 `watch` 选项，可看API文档[vm.$watch API](/api/#vm-watch)。
 
 ***
 

src/guide/syntax.md

@@ -4,9 +4,9 @@ type: guide
 order: 4
 ---
 
-Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
+Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
 
-在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
+在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
 
 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，[直接写渲染（render）函数](/guide/render-function.html)，使用可选的 JSX 语法。
 
@@ -30,7 +30,7 @@ Mustache 标签将会被替代为对应数据对象上 `msg` 属性的值。无
 
 ### 纯 HTML
 
-双大括号会将数据解释为纯文本，而非 HTML。为了输出真正的 HTML，你需要使用 `v-html` 指令：
+双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 `v-html` 指令：
 
 ``` html
 <div v-html="rawHtml"></div>
@@ -56,7 +56,7 @@ Mustache 不能在 HTML 属性中使用，应使用 [v-bind 指令](/api/#v-bind
 
 ### 使用 JavaScript 表达式
 
-迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
+迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。
 
 ``` html
 {{ number + 1 }}
@@ -78,7 +78,7 @@ Mustache 不能在 HTML 属性中使用，应使用 [v-bind 指令](/api/#v-bind
 {{ if (ok) { return message } }}
 ```
 
-<p class="tip">模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 `Math` 和 `Date`。你不应该在模板表达式中视图访问用户定义的全局变量。</p>
+<p class="tip">模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 `Math` 和 `Date` 。你不应该在模板表达式中视图访问用户定义的全局变量。</p>
 
 <p class="tip">Template expressions are sandboxed and only have access to a whitelist of globals such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.</p>
 
@@ -119,7 +119,7 @@ new Vue({
 {{ message | filterA('arg1', arg2) }}
 ```
 
-这里，字符串 `'arg1'` 将传给过滤器作为第二个参数，`arg2` 表达式的值将被求值然后传给过滤器作为第三个参数。
+这里，字符串 `'arg1'` 将传给过滤器作为第二个参数， `arg2` 表达式的值将被求值然后传给过滤器作为第三个参数。
 
 ## 指令
 
@@ -129,11 +129,11 @@ new Vue({
 <p v-if="seen">Now you see me</p>
 ```
 
-这里，`v-if` 指令将根据表达式 `seen` 的值的真假来移除/插入 `<p>` 元素。
+这里， `v-if` 指令将根据表达式 `seen` 的值的真假来移除/插入 `<p>` 元素。
 
 ### 参数
 
-一些指令能接受一个“参数”，在指令后以冒号指明。例如，`v-bind` 指令被用来响应地更新 HTML 属性：
+一些指令能接受一个“参数”，在指令后以冒号指明。例如， `v-bind` 指令被用来响应地更新 HTML 属性：
 
 ``` html
 <a v-bind:href="url"></a>