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的檢測。