Author: vanessa
Date: 2018/03/06

1.v-if語法：寫在html標籤內部，類似於標籤屬性

<div id="app">
    <div v-if="examType=='kzbs'">考證筆試</div>
    <div v-else-if="examType=='kzms'">考證面試</div>
    <div v-else-if="examType=='kbbs'">考編筆試</div>
    <div v-else>考編面試</div>
</div>
new Vue({
	el:'#app",
    data:{
		examType:"kzbs"
    }
})
//渲染後的頁面顯示:考證筆試
 

v-if 指令將根據表示式 seen 的值的真假來插入/移除 div標籤

2.v-show語法：根據值為true/false控制div顯示隱藏

<h1 v-show="ok">Hello!</h1>
new Vue({
	el:'#app",
    data:{
		ok:true
    }
})

3.v-for語法: 迴圈展示一個列表

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

在 v-for 塊中，我們擁有對父作用域屬性的完全訪問許可權。v-for 還支援一個可選的第二個引數為當前項的索引。

<ul id="example-2">
  <li v-for="(val,key) in fruits">{{name}}-{{key}}-{{val}}</li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: '水果',
    fruits:['apple','banana','orange'],
  }
})
頁面顯示：
水果-0-apple
水果-1-banana
水果-2-orange

ps：1.v-for優先順序比v-if高，
2.v-for迴圈陣列，2個引數對應的分別是（value,key）key是0123456的數字索引
3.v-for迴圈物件，3個引數對應的分別是（value, key, index）index是0123456的數字索引

4.陣列變動注意事項

由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列：
1.當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue
2.當你修改陣列的長度時，例如：vm.items.length = newLength
而應該用：

1.Vue.set(example1.items, indexOfItem, newValue)或example1.items.splice(indexOfItem, 1, newValue)
2.example1.items.splice(newLength)

5.物件更改檢測注意事項

由於 JavaScript 的限制，Vue 不能檢測物件屬性的新增或刪除：
1.新增物件屬性用：

Vue.set(obj,key,value)或vm.$set(obj,key,value)

2.新增多個物件的屬性

vm.userProfile = Object.assign({}, vm.userProfile, {
          age: 27,
          favoriteColor: 'Vue Green'
})