上一篇最後有提到怎麼建立一個Vue應用, 朋友看完之後有問我兩個問題

1. 如果要建立多個Vue應用怎麼做?

當下我聽到是有點愣住..., 因為會建立一個了, 之後就會建立兩個三個...多個Vue應用可以舉一反三
所以不太懂他不懂得點...QQ
不過我這邊附上回覆他的答案
(如果有更適合的解請大大在下面留言)
建立一個應用是這樣:

var app = new Vue({
  el: '#app'
})

建立第二個應用可以是這樣:

var app2 = new Vue({
  el: '#app2'
})

...
...
...
建立第N個應用可以是這樣:

var appN = new Vue({
  el: '#appN'
})

看需求來判斷需不需要建多個應用來用
當下他聽我講完也是有點"哦~原來如此~"的感覺

2. el一定要抓id嗎?

這問題就有比較建設性一點(xD)
他的抓法其實就跟原生js的 document.querySelector 一樣, 是用CSS選擇器來抓元件的
所以也可以設定抓class或是節點, 但通常id是唯一值, 所以會設定抓id
如果!!!
抓到多個元件時, 就只有第一個會有效, 例如抓class有app的元件:

<!--第一個元件-->
<div class="app">
    {{ message }}
</div>
<!--第二個元件-->
<div class="app">
    {{ message }}
</div>

var app = new Vue({
    el: '.app',
    data: {
        message: 'Hello 我是來亂的!'
    }
})

結果只會看到第一個被渲染出來, 第二個則是維持原狀沒有被Vue出來

兩個問題大概是這樣~僅供參考~
接著開始今天正題~

#MVVM是什麼?

MVVM（Model–view–viewmodel）是一種軟體架構模式。 --維基百科-MVVM

Model - 就是Vue應用的資料狀態
View - 就是視圖層, 也就是瀏覽器所呈現的畫面

而 Vue 透過中間的 ViewModel 達到 資料(Model) 與 視圖(View) 的雙向溝通

#雙向溝通實例

首先我們把剛才 我來亂的 的範例拿來用
並在 div 內新增一個 input

<div id="app">
    <input type="text" />
    {{ message }}
</div>

var app = new Vue({
    el: '.app',
    data: {
        message: 'Hello 我是來亂的!'
    }
})

接著在 input 加上綁定資料的指令 v-model, 讓它綁定 message

<input type="text" v-model="message" />

我們要做的範例目標是透過 input 輸入一些文字, 改變 Vue應用的資料, 最後回來渲染視圖
從資料跑的流程上看會是:
輸入文字(View)
-> 文字透過v-model綁定資料(ViewModel)
-> 改變資料(Model)
-> 資料透過雙花括號呈現(ViewModel)
-> 渲染視圖(View)

完成後可以看到透過改變input內的值, 進而改變message, 達成雙向溝通的效果

今天透過介紹雙向綁定提到了一個 Vue 的指令 v-model
下次會提到其它的指令, 每一個都會完整介紹