上一篇文章我們簡單介紹了Vue的幾個重要特性（漸進式框架、MVVM、元件、載入方式）。若不清楚的話，可以點擊上篇觀看Day2 - Vue 基本介紹（漸進式框架、MVVM、元件）。

OK，我們今天終於要進入正題，了解該如何撰寫Vue!

Vue Instance(實體)

每個 Vue.js 的應用程式都是從Vue建構式 (vue constructor) 建立根實體 (root vue instance) 開始，再一個個將元件搭建上去而來的。

Vue的實體是透過new關鍵字來建立

建立Vue Instance寫法1

使用 vue constructor 建立 vue instance「vm」，vm 為 view model 的簡稱

var vm = new Vue({
    //option object
});

建立Vue Instance寫法2

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
});

了解了基礎寫法後，我們馬上來實作練習一下吧！
範例連結
HTML部分

<div id="app">
          {{text2}}
        </div>
        <div id="app2">
          {{text}}
        </div>

說明：我們這邊可以透過雙大括號{{}}，來將vue實體的data資料呈現於畫面上
JavaScript部分

       //實體一
        var app = new Vue({
            el: '#app',
            data: {
              text: '這是一段話',
              text2:'這是第二段話'
            }
          })
        //實體二
          var app2 = new Vue({
            el: '#app2',
            data: {
              text: '妳好嗎？'
            }
          })     

補充：Chrome開啟console時，請記得先在Chrome上安裝Vue.js devtools套件，如此才能方便我們開發時，了解Vue Instance資料變化

小結論

兩者寫法都是可行，差異僅在於是否賦予一個值到變數上，而這個變數是可以用來以後取值使用。後面章節介紹（Vue Cli）時也會比較常寫法2。原因就是不太需要使用該變數做任何操作
補充：同一個頁面上可以建立兩個以上的Vue實體在是沒有問題，只是不能寫成巢狀結構

Vue實體基本屬性

圖片來源：五倍紅寶石Vue實戰課程

el&data

• el：就是用來綁定網頁dom元素與Vue實體可以控制的範圍的媒介

但，當實體沒有el屬性，就只能透過vm.$mount()來進行手動掛載
備註：
1.這用法很少用，所以知道就好 文章參考
2.vm是指上面圖片宣告的變數（這邊是可以自定義）

• Data: 用來存放實體綁定的資料
  實體內：透過this.XXX 取得資料
  實體外：透過Hello.$data.value 取得資料 Hello這個變數是可以自行命名

實體外指的就是下方Hello實體物件範圍外
在子元件內時，須以 function的形式來來回傳。

var Hello = new Vue({
      el: '#app',
      data: {
        value: 'Hi Vue!'
      }
    });
Hello.$mount().value  //"Hi Vue!"

備註：Data內屬性不可由＄或＿開頭 如：$abc、＿abc

methods、watch、mounted、props、computed

這些屬性，我會在後面文章中搭配範例直接講解

傳入選項物件

當實體（Vue instance）被創建後，物件可以傳入包含el、data、methods、watch、mounted、props、computed

var vm = new Vue({
    el: '#app',
    data: {
    message:"hello vue.js!"
     },
    methods:{ //略    
}
});

擴充建構式

var component = Vue.extend({
    data: function(){
    return{ 
     message:'hello '
     }
   },
});
var cp = new component();
console.log(cp.message) //hello

data選項，需要注意在Vue.extend()中它必須是函數

介紹完Vue Instance後，明天將會介紹Vue生命週期，那我們明天見！