Learn Vue 2 (1) - Basic Data Binding


bg.jpg

前言

本教學整理自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