唯

安裝

透過官方網站建議，新手從 CDN 開始練習會較為妥適。

這是一個生產版本，我直接將它複製貼上在 body 標籤結尾上（ 放在 head 中也可以，單純出於個人喜好 ）

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

取得基本資料（例如文字）

下列的紅色文字是由 VUE 產出的，我們可以打開 F12 的控制板並進入 Console 調整其值。

{{ message }}

在 'Console' 中輸入如下的文字：

app.message = 'test'

您就可以在瀏覽器中得到新的值。*1

For 迴圈

我們來嘗試在 VUE 中的 For 迴圈吧，就是 "v-for"。

有趣的是，您可以在同一個結構下寫入字串、陣列、甚至是 CSS 樣式，然後再將它們以變數的方式取回使用。

請參考下列寫法：

  <ul>
    <li v-for="itemName in arrayName">
      {{ itemName.yourTargetName }}
    </li>
  </ul>

我的寫法如下：

  <ul>
    <li v-for="item in arr">
      {{ item.name }} is a {{ item.age }}-year-old {{ item.job }} now.
    </li>
  </ul>

在 data 物件中的陣列寫法如下：

  arr: [
    {
        name: 'Trista',
        age: 40,
        job: 'freelancer',
        id: Math.random().toString(16).slice(2)
    },
    {
        name: 'CiCi',
        age: 13,
        job: 'student',
        id: Math.random().toString(16).slice(2)
    },
    {
        name: 'Zoe',
        age: 9,
        job: 'student',
        id: Math.random().toString(16).slice(2)
    }
  ]