前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10

List Rendering

Mapping an Array to Elements with v-for

在 Vue 中，我們可以使用 v-for 指令來將一個陣列中的元素渲染到頁面上。v-for 指令使用特殊的 item in items 語法，其中 items 是源數組，item 是陣列元素迭代的 alias。

<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' }
    ]
  }
})

將會顯示為

<ul id="example-1">
  <li>Foo</li>
  <li>Bar</li>
</ul>

v-for 也支援陣列的索引作為第二個參數，例如：

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

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

將會顯示為

<ul id="example-2">
  <li>Parent - 0 - Foo</li>
  <li>Parent - 1 - Bar</li>
</ul>

你也可以使用 of 取代 in 作為分隔符，這樣就很接近 JavaScript 迭代器的語法，如以下例子：

<div v-for="item of items"></div>

v-for with an Object

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: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

顯示的結果為

<ul id="v-for-object" class="demo">
  <li>How to do lists in Vue</li>
  <li>Jane Doe</li>
  <li>2016-04-10</li>
</ul>

如果你想要迭代物件的 key 和 value，你可以使用以下語法：

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

就會顯示為

<div>title: How to do lists in Vue</div>
<div>author: Jane Doe</div>
<div>publishedAt: 2016-04-10</div>

當然，你也可以提供第三個參數作為索引：

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

就會顯示為

<div>0. title: How to do lists in Vue</div>
<div>1. author: Jane Doe</div>
<div>2. publishedAt: 2016-04-10</div>

Maintaining State

當 Vue 正在更新使用 v-for 渲染的元素列表時，它預設使用 in-place patch 的策略。如果數組順序被改變，Vue 將不會移動 DOM 元素來匹配數組的順序，而是 in-place 修改每個元素並依次觸發它們的更新。
這個默認的模式是高效的，但只適用於不依賴子組件狀態或並且子組件本身的列表渲染。
為了讓 Vue 可以追蹤每個節點的身份，並且重用和重新排序現有元素，你需要為每項提供一個 key 屬性：

<div v-for="item in items" v-bind:key="item.id">
  <!-- content -->
</div>

通常使用 v-for 時都會提供 key 屬性，除非迭代的 DOM content 是簡單的，或是你刻意依賴預設行為以獲得性能提升。

特別注意的是不要使用 string 或 numeric 以外的值作為 key，像是 object 或 array。這樣會讓 Vue 不能正確的追蹤節點的狀態，並且可能會導致渲染錯誤。

Reference

• https://v2.vuejs.org/v2/guide/list.html