Merge pull request #41 from tingtien/2.0-cn

List Rendering已翻译完

Author: dingyiming

src/guide/list.md

@@ -6,31 +6,31 @@ order: 8
 
 ## `v-for`
 
-We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on:
+我们用`v-for` 指令根据一组数组的选项列表进行渲染。`v-for` 指令需要以 `item in items` 形式的特殊语法，`items` 是源数据数组并且 `item` 是数组元素迭代的别名。
 
 ### 基本用法
 
 ``` html
 <ul id="example-1">
-  <li v-for="item in items">
-    {{ item.message }}
-  </li>
+	<li v-for="item in items">
+	  {{ item.message }}
+	</li>
 </ul>
 ```
 
 ``` js
 var example1 = new Vue({
-  el: '#example-1',
-  data: {
-    items: [
-      { message: 'Foo' },
-      { message: 'Bar' }
-    ]
-  }
+	el: '#example-1',
+	data: {
+		items: [
+			{message: 'foo' },
+			{message: 'Bar' }
+		]	
+	}
 })
 ```
 
-Result:
+结果：
 
 {% raw %}
 <ul id="example-1" class="demo">
@@ -56,7 +56,7 @@ var example1 = new Vue({
 </script>
 {% endraw %}
 
-Inside `v-for` blocks we have full access to parent scope properties. `v-for` also supports an optional second argument for the index of the current item.
+在 `v-for` 块内部，我们有完全访问父作用域的属性。`v-for` 还支持一个可选的第二个参数为当前项的索引。
 
 ``` html
 <ul id="example-2">
@@ -79,7 +79,7 @@ var example2 = new Vue({
 })
 ```
 
-Result:
+结果:
 
 {% raw%}
 <ul id="example-2" class="demo">
@@ -106,15 +106,15 @@ var example2 = new Vue({
 </script>
 {% endraw %}
 
-You can also use `of` as the delimiter instead of `in`, so that it is closer to JavaScript's syntax for iterators:
+你也可以用 `of` 替代 `in` 作为分隔符, 所以它是最接近JavaScript迭代器的语法
 
 ``` html
 <div v-for="item of items"></div>
 ```
 
 ### Template v-for
 
-Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements. For example:
+如同 `v-if` 模板，你也可以用带有 `v-for` 的 `<template>` 标签来渲染多个元素块。例如： 
 
 ``` html
 <ul>
@@ -125,9 +125,9 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 </ul>
 ```
 
-### Object v-for
+### 对象迭代 v-for
 
-You can also use `v-for` to iterate through the properties of an object.
+你也可以用 `v-for` 通过一个对象的属性来迭代。
 
 ``` html
 <ul id="repeat-object" class="demo">
@@ -150,7 +150,7 @@ new Vue({
 })
 ```
 
-Result:
+结果:
 
 {% raw %}
 <ul id="repeat-object" class="demo">
@@ -172,35 +172,35 @@ new Vue({
 </script>
 {% endraw %}
 
-You can also provide a second argument for the key:
+你也可以提供第二个的参数为键名:
 
 ``` html
 <div v-for="(value, key) in object">
   {{ key }} : {{ value }}
 </div>
 ```
 
-And another for the index:
+第三个参数为索引:
 
 ``` html
 <div v-for="(value, key, index) in object">
   {{ index }}. {{ key }} : {{ value }}
 </div>
 ```
 
-<p class="tip">When iterating over an object, the order is based on the key enumeration order of `Object.keys()`, which is **not** guaranteed to be consistent across JavaScript engine implementations.</p>
+<p class="tip">当遍历一个对象时，顺序是根据 `Object.keys()` 可枚举键名排列，不保证和JavaScript引擎实现是一致的。</p>
 
-### Range v-for
+### 整数迭代 v-for 
 
-`v-for` can also take an integer. In this case it will repeat the template that many times.
+`v-for` 也可以取整数。在这种情况下，它将重复多次模板
 
 ``` html
 <div>
   <span v-for="n in 10">{{ n }}</span>
 </div>
 ```
 
-Result:
+结果:
 
 {% raw %}
 <div id="range" class="demo">
@@ -211,17 +211,17 @@ new Vue({ el: '#range' })
 </script>
 {% endraw %}
 
-### Components and v-for
+### 组件 和 v-for
 
-> This section assumes knowledge of [Components](/guide/components.html). Feel free to skip it and come back later.
+> 了解组件相关知识，查看 [组件](/guide/components.html) 。
 
-You can directly use `v-for` on a custom component, like any normal element:
+在自定义组件里，你可以像任何普通元素一样用 `v-for` 。
 
 ``` html
 <my-component v-for="item in items"></my-component>
 ```
 
-However, this won't automatically pass any data to the component, because components have isolated scopes of their own. In order to pass the iterated data into the component, we should also use props:
+然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 `props` ：
 
 ``` html
 <my-component
@@ -231,9 +231,9 @@ However, this won't automatically pass any data to the component, because compon
 </my-component>
 ```
 
-The reason for not automatically injecting `item` into the component is because that makes the component tightly coupled to how `v-for` works. Being explicit about where its data comes from makes the component reusable in other situations.
+不自动注入 `item` 到组件里是因为这样能让组件紧密耦合 `v-for` 怎么运作的。在一些情况下，明确了数据的来源让其组件可重复使用。
 
-Here's a complete example of a simple todo list:
+下面是一个简单的todo list完整的例子:
 
 ``` html
 <div id="todo-list-example">
@@ -331,27 +331,27 @@ new Vue({
 
 ## key
 
-When Vue.js is updating a list of elements rendered with `v-for`, it by default uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will simply patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of `track-by="$index"` in Vue 1.x.
+当Vue.js用 `v-for` 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，而不是移动DOM元素来匹配列表的顺序，Vue将简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似Vue 1.X的 `track-by="$index"` 。
 
-This default mode is efficient, but only suitable **when your list render output does not rely on child component state or temporary DOM state (e.g. form input values)**.
+这个默认的模式是有效的，但是只适合你的列表渲染输出时不依赖子组件状态或临时DOM状态（例如：表单输入框的值）
 
-To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique `key` attribute for each item. An ideal value for `key` would be the unique id of each item. This special attribute is a rough equivalent to `track-by` in 1.x, but it works like an attribute, so you need to use `v-bind` to bind it to dynamic values (using shorthand here):
+给Vue一个提示以便它能跟踪每个节点身份，并且因此重新使用和重新排序现有元素，你需要为每项提供一个唯一 `key` 属性。一个有效的 `key` 值是每项唯一ID. 这个特殊的属性相当于Vue 1.x的 `track-by` ，但它像一个变量，所以你需要用 `v-bind` 来绑定动态值（简洁写法如下）
 
 ``` html
 <div v-for="item in items" :key="item.id">
   <!-- content -->
 </div>
 ```
 
-It is recommended to provide a `key` with `v-for` whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
+它建议尽可能用 `v-for` 时提供一个 `key` 。除非迭代DOM内容很简单，或者你有意要依赖于对性能提升的默认行为。
 
-Since it's a generic mechanism for Vue to identify nodes, the `key` also has other uses that are not specifically tied to `v-for`, as we will see later in the guide.
+因为它是Vue识别节点的通用的机制，`key` 还具有并不特别依赖于 `v-for` 的其他用途，我们将在后面的指南中看到其他用途。
 
-## Array Change Detection
+## 数组更新检测
 
-### Mutation Methods
+### 突变方法
 
-Vue wraps an observed array's mutation methods so they will also trigger view updates. The wrapped methods are:
+Vue包含一组观察数组的突变方法，所以它们也将会触发视图更新。这些方法如下：
 
 - `push()`
 - `pop()`
@@ -361,28 +361,28 @@ Vue wraps an observed array's mutation methods so they will also trigger view up
 - `sort()`
 - `reverse()`
 
-You can open the console and play with the previous examples' `items` array by calling their mutation methods. For example: `example1.items.push({ message: 'Baz' })`.
+你打开控制台，然后用前面例子的 `items` 数组调用突变方法：`example1.items.push({ measage: 'Baz' })`
 
-### Replacing an Array
+### 重塑数组
 
-Mutation methods, as the name suggests, mutate the original array they are called on. In comparison, there are also non-mutating methods, e.g. `filter()`, `concat()` and `slice()`, which do not mutate the original Array but **always return a new array**. When working with non-mutating methods, you can just replace the old array with the new one:
+突变方法，顾名思义，改变原始数组的称呼。相比之下，也有不改变原组数的方法，例如：`filter()` ，`concat()` ，`slice()` 。这些不会改变原始数组，但总是返回一个新的数组。当用不改变原数组的方法时，你只需替换旧数组用新的：
 
 ``` js
 example1.items = example1.items.filter(function (item) {
   return item.message.match(/Foo/)
 })
 ```
 
-You might think this will cause Vue to throw away the existing DOM and re-render the entire list - luckily, that is not the case. Vue implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation.
+你可你能认为这将导致Vue丢掉现有DOM和重新渲染整个列表。幸运的是，事实并非如此。Vue实现了一些智能化去最大化的重用DOM元素，所以用另外含有重叠对象的数组替换数组是非常高效的操作。
 
-### Caveats
+### 注意事项
 
-Due to limitations in JavaScript, Vue **cannot** detect the following changes to an array:
+由于JavaScript的限制，Vue不能检测以下变动的数组：
 
-1. When you directly set an item with the index, e.g. `vm.items[indexOfItem] = newValue`
-2. When you modify the length of the array, e.g. `vm.items.length = newLength`
+1. 当你直接设置一个项的索引时, 例如： `vm.items[indexOfItem] = newValue`
+2. 当你修改数组的长度时, 例如： `vm.items.length = newLength`
 
-To overcome caveat 1, both of the following will accomplish the same as `vm.items[indexOfItem] = newValue`, but will also trigger state updates in the reactivity system:
+为了避免第一种情况, 以下两种方式将达到像 `vm.items[indexOfItem] = newValue` 的效果， 同时也将触发状态更新:
 
 ``` js
 // Vue.set
@@ -393,17 +393,17 @@ Vue.set(example1.items, indexOfItem, newValue)
 example1.items.splice(indexOfItem, 1, newValue)
 ```
 
-To deal with caveat 2, you can also use `splice`:
+避免第二种情况, 使用 `splice`:
 
 ``` js
 example1.items.splice(newLength)
 ```
 
-## Displaying Filtered/Sorted Results
+## 显示过滤/排序结果
 
-Sometimes we want to display a filtered or sorted version of an array without actually mutating or resetting the original data. In this case, you can create a computed property that returns the filtered or sorted array.
+有时我们无需实际改变或重置原始数据对数组进行过滤或排序。在这种情况下，你可以创建计算的属性返回过滤或排序的数组。
 
-For example:
+例如:
 
 ``` html
 <li v-for="n in evenNumbers">{{ n }}</li>
@@ -422,7 +422,7 @@ computed: {
 }
 ```
 
-Alternatively, you can also just use a method where computed properties are not feasible (e.g. inside nested `v-for` loops):
+此外, 你也可以只使用一种方法计算 (例如： 嵌套在 `v-for` 里循环)，但是性能是低效的:
 
 ``` html
 <li v-for="n in even(numbers)">{{ n }}</li>