在這系列文章最一開始的部分有先學習如何創建Vue應用程式，以及一些實例屬性簡單帶過，那在學習了模板語法及ES6後，現在再對Vue實例做比較深入的學習。
Vue實例也就是使用Vue()建構式來建立的一個物件，而在創建時需要傳入一個包含很多屬性和方法的物件。
以下舉例一些實例創建時的屬性，之前在學習模板語法有用到的：

• el：要綁定的DOM element
• data：綁定的資料
• methods: 方法
• computed: 需要計算後才能使用的屬性

什麼是實例(instance)

要解釋什麼是實例，可以先從class講起：

• class 類別：形容某樣東西有什麼屬性及什麼方法(廣泛描述的概念)
  例如人類長的大概都那個樣子，有兩隻手兩條腿，會講話走路，這些行為及屬性我們會描述在Human這個class。
• 實例：用廣泛描述的概念去建立一個實際個體
  要根據剛剛講的人類的概念(class)去建立一個實際(具體)的個體
  用var me = new Human();來產生

實例可以看成是物件，這個物件天生就帶有這個class描述的方法及屬性，例如我有兩隻眼睛一個嘴巴，你也有兩隻眼睛跟一個嘴巴，但我眼睛的顏色跟你的眼睛眼色可能會不一樣，這就是類別及實例的差異。

如何宣告Vue實例

在最前面一開始有一篇是關於創建第一個Vue應用程式，其實也是創造Vue實例的意思：

const vm = new Vue();

el(element)

建立Vue實例後，必須要告訴 Vue 他的工作範圍，讓Vue與HTML做掛載，像是跟他說 : 黑~這一塊 div 裡面的東西都給你管， 可以用兩種方式指定：

• 使用css選擇器的字串，使用id(#)或class(.)
• 使用元素參照document.getElementById()

const  vm  =  new Vue({
  el: '#app' //css 選擇器
  //el: document.getElementById('app')
})

那麼除了在一開始建立實例的時候使用el綁定HTML元素外，也可以在宣告完實例後用$mount的方法來掛載：

const vm = new Vue({
  data:{
    name:"Harry Potter"
  }
})
vm.$mount("#app")
//也可以用
//vm.$mount(document.getElementById(#app));

data

在Vue實例裡使用data物件來記載狀態或資料，data屬性的render在模板語法也做過不少練習了，最簡單純字串render就是使用{{}}：

const  vm  =  new Vue({
  el: "#app" ,
  data: {
    title: "hello 鐵人賽"
  }
})

也跟el一樣，除了宣告在實例內，也可以把它宣告在外面，最後再把data指定給Vue：

const data = {
  title: "hello 鐵人賽"
}
const vm = new Vue({
  el: "#app",
  data: data
});

學習了Vue實例el及data用法，下一站methods