VUE（v-for 数组、对象更新检测）

v-for详解：v-for支持一个第二参数作为当前项的索引
数组中

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

输出的结果为 0-FOO 1-Bar

v-for遍历对象：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

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

输出的结果为
0.firstName:’John’
1.lastName:’Doe’
2.age:30
可以看出来 第一个参数为属性值 第二个参数为属性名 第三个参数为索引
VUE官方建议在使用v-for进行渲染时v-bind一个key值。对于key值在上一篇有过介绍。

一段范围内的v-for：

  <span v-for="n in 10">{{ n }} </span>

输出1、2、3、4、5、6、7、8、9、10

使用v-for渲染多个元素，可以与v-if一样使用temptemplate标签当成容器

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

在v-if与v-for同时使用时，v-for的优先级更高，也就是说，当在一个标签同时使用两者时，v-if会成为v-for的一个条件判断。

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

如果希望跳过循环执行，可以将v-if写在父级元素上，先进性条件的判断，在进行循环。

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>

数组的更新检测：
vue提供了观察数组的变异方法，当以下方法调用时，视图会响应式更新

push()          pop()
shift()         unshift()
splice()        sort()
reverse()

数组还有一些非变异的方法，当使用这些（如：filter(), concat() 和 slice()）方法时，可以用返回的新数组替换原有的旧数组。

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

对于v-for在组建重的应用还需要理解。。后续会单独更新
对象的更改检测：
在阅读官方文档过程中，在这里理解了一些时间
由于js的限制，vue中对象的一些改变方法不能被检测到，从而导致不能响应到视图层。

var vm = new Vue({
  data: {
    a: 1
  }
})

vm.b = 2

对于这种方式对象的改变 ， 不能够被vue检测到 vm.b 是不能够响应到视图层，从而不能得到我们想要的结果，我们可以使用下面的方法代替：

var vm = new Vue({
  data: {
    A: {
      name: 'Anika'
    }
  }
})

使用Vue.set()

Vue.set(vm.A, 'age', 27)

vm.$set是Vue.set的别名

this.$set(A, 'age', 27)

我们想利用vue的Object.assign()或者 _.extend()方法添加多个对象的属性，需要这样写

this.A = Object.assign({}, this.A, {
  age: 27,
  Color: 'Vue Green'
})

这样既可以改变对象的属性与属性值，还可以触发vue的检测。