列表渲染

用v-for把一个数组对应为一组元素:

在v-for块中，我们拥有对父作用域属性的完全访问权限，v-for还支持一个可选的第二个参数为当前项的索引。

 v-for="(item, index) in items"

items  是源数据数组并且  item  是数组元素迭代的别名。

一个对象的v-for---可以用v-for通过一个对象的属性来迭代!

<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

你也可以提供第二个的参数为键名：

第三个参数为索引：

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
#数组更新检测
Vue包含一组观察数组变异的方法，所以他们也将触发视图的更新。这些方法如下：
1.push() 2.pop() 3.shift() 4.unshift() 5.splice() 6.sort() 7.reverse()
#替换数组
变异方法，顾名思义，会改变这些方法调用的原始数组。相比之下，也有非变异的方法，例如：filter(),concat()和slice()
这些不会改变原始数组，但是总会返回一个新数组，当使用非变异方法时，可以用新数组替换旧数组：
你认为这会将使vue丢失原有的DOM，而重新渲染整个列表。幸运的是，事实并非如此，Vue为了使DOM实现最大范围内
的重用，而实现了一些智能的，启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
#对象更改检测注意事项
Vue 不能检测对象属性的添加或删除：

  
  
vm.$set(this.userProfile, 'age', 27)
通过这种方法给对象添加一个新属性