前言
本教學整理自laracasts中的Learn Vue 2: Step By Step,如有興趣或是有任何問題也可以自行參考影片教學。
載入Vue.js
首先,我們必須載入Vue.js才能使用,請直接至Vue.js官網,找到install CDN的頁面,至我們的網頁中加入
|
|
使用Vue做簡易的 Data Binding
以下舉了一個簡單的例子做說明
|
|
- 使用
new Vue()
建立一個新的Vue物件 - 此Vue物件中,有一些特定參數
–el
: 表示該Vue物件render的範圍,對應到頁面指定的元素(可以用CSS選擇方式指定,例如本範例的#root
表示此Vue運作範圍是id為root的這個div)
–data
: 表示宣告的變數(可以透過json格式宣告多個變數或array) - 所以我們需要把
input
放在root這個div中,才能使用到Vue - 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