v-bind基礎使用

動態地繫結一個或多個 屬性，或者繫結一個元件 prop 到表示式。

語法：v-bind:屬性名 = 屬性值

<!-- 繫結一個 attribute -->
<img v-bind:src="imageSrc">

v-bind語法糖

縮寫：: （真實開發時常用）

<!-- 縮寫 -->
<img :src="imageSrc">

​ imageSrc 是一個變數。v-bind方式繫結的都i是變數

條件渲染

v-if/v-else-if/v-else:

底層通過對dom樹節點進行新增和刪除來控制展示和隱藏，會頻繁增刪節點

用法：條件渲染可跟boolean型別的true，false或者表示式

注意：v-else元素必須緊跟在帶v-if或者v-else-if的元素的後面，中間不允許間隔其他元素，否則它將不會被識別。

v-show

底層通過控制元素的display屬性來進行標籤的顯示和不顯示控制，並沒有刪除

用法：跟boolean型變數或表示式

v-if 對比 v-show

v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在執行時條件很少改變，則使用v-if較好。

列表渲染

基礎用法

我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for

指令需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的陣列元素的別名,可任意起。

也可以用 of 替代 in 作為分隔符

用法：v-for="別名 in 陣列名"

v-for 還支援一個可選的第二個引數，即當前項的索引。

建議儘可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴預設行為以獲取效能上的提升。為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute：

//key繫結變數要加“：”，繫結字串常量不加
<div v-for="(item,index) in items" :key="item.id">
  <!-- 內容 -->
</div>
 

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for裡使用物件

//三個引數：索引、屬性名、屬性值
<ul id="v-for-object" class="demo">
  <div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})