Vue Instance 實體/實例

Vue Instance可以解釋成實體化一個Vue的物件，每個Vue.js 的應用都可以透過new vue來建立root Vue instance(根實體)，之後再接著建立許多不同元件。

讓資料顯示

<div id="app">
      
</div>

Vue 會將實體內的資料呈現在網頁上，所以我們用一個 div 讓程式的資料顯示在這裡，但要讓Vue來操作裡面的內容我們需要給它一個id是辨識跟綁定，在這邊我們就幫div定一個叫做”app”的id。

創建一個Vue Instance

        var vm = new Vue({
            // options
      })

雖然與MVVM 模式沒有嚴格關聯，但Vue 的設計部分受到了它的啟發。
這裡我們建立了一個名為 vm 的 Vue Instance (vm為 view model 的簡稱)，在它底下的括號中我們可以放許多常見的設定物件。

在這個時候我們執行看看，會發現文件中什麼都沒有，但我們將id為app綁定到Vue上

 <script>
        var vm = new Vue({
            el: "#app"
      })
 </script>

在這之前是什麼都沒有，加上el後，就會發現devtool 上會發現多了一個 Root，這裡就表示我們已經成功生成一個新的 Vue 的應用程式。

Vue Instance中的option物件

• el : 將這個 Vue 實體掛載到這裡設置的元素上，綁定html 檔的標籤，說明這個Vue實體負責管理html 檔中id為此的div。
• data : 是一個物件，用來存放實體綁定的資料，當這些資料改變時，畫面會依照變化做改變。屬性可以賦予各種型別的值：數值、字串、布林值、陣列、物件都是可行的。
• methods :用來定義在Vue實體內使用的function。
• props：元件接收傳遞的屬性資料
• watch：觀察Vue Instance內的資料的變化
• computed：自動為內部資料計算屬性
• template：提供Vue實體編譯後的樣板
• components：定義Vue的子元件

今天先簡單介紹實體跟裡面有的option物件，明天再來看看範例吧~(～￣▽￣)～

參考資料
Vue option