前言

本教學整理自laracasts中的Learn Vue 2: Step By Step，如有興趣或是有任何問題也可以自行參考影片教學。

載入Vue.js

首先，我們必須載入Vue.js才能使用，請直接至Vue.js官網，找到install CDN的頁面，至我們的網頁中加入

1

<script src="https://unpkg.com/vue@2.3.3"></script>

使用Vue做簡易的 Data Binding

以下舉了一個簡單的例子做說明

1
2
3
4
5
6
7
8
9
10
11
12

<div id="root">
  <input type="text" id="input" v-model="message">
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      message: 'Hello World'
    }
  })
</script>

1. 使用 new Vue() 建立一個新的Vue物件
2. 此Vue物件中，有一些特定參數
   – el: 表示該Vue物件render的範圍，對應到頁面指定的元素(可以用CSS選擇方式指定，例如本範例的#root表示此Vue運作範圍是id為root的這個div)
   – data: 表示宣告的變數(可以透過json格式宣告多個變數或array)
3. 所以我們需要把input放在root這個div中，才能使用到Vue
4. v-model則是讓我們進行資料綁定的方式，如此範例input的v-model為message，表示此input的值就綁定在Vue物件中message的變數，改變message的值，此input也會隨之改變，反之亦然。

小提示

寫CSS的時候，習慣的selector是class，而寫javascript時，就習慣用id去控制，
那麼Vue則是直接用v-model去綁定。習慣後就會發現，其實沒有這麼難理解，

• CSS 之於 class
• 相當於 javascript 之於 id
• 相當於 Vue 之於 v-model