一、建立一個Vue例項

var vm = new Vue({
  // 選項
})

每個Vue應用程式都是通過Vue函式創建出一個新的Vue物件開始的。
通常我們使用變數 vm (ViewModel 的簡稱) 來表示 Vue 例項。
在建立一個 Vue 例項時，你會傳入一個選項物件。
Vue 應用程式由「一個使用 new Vue 建立的 Vue 根例項」、「巢狀的樹結構（可選）」和「可複用的元件」組成。
所有 Vue 元件，都是 Vue 例項，並且元件都接收相同的選項物件（除了一些根例項特有(root-specific)的選項）。

二、data

響應式

// data 物件
var
 
 data = { a: 1 }

// 此物件將會新增到 Vue 例項上
var vm = new Vue({
  data: data
})

// 在例項上獲取屬性
// 將返回原始資料中的屬性
vm.a == data.a // => true

// 設定例項上的屬性，
// 也會影響原始資料
vm.a = 2
data.a // => 2

// ... 反之亦然
data.a = 3
vm.a // => 3

在建立 Vue 例項時，會將所有在 data 物件中找到的屬性，都新增到 Vue 的響應式系統中。每當這些屬性的值發生變化時，檢視都會“及時響應”，並更新相應的新值。
每當 data 物件發生變化，都會觸發檢視重新渲染

防止已有屬性被修改

使用Object.freeze()來防止已有屬性被修改。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- 這將不再更新 `foo`! -->
  <button
 
 v-on:click="foo = 'baz'">點我修改</button>
</div>

字首$

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一個例項方法
vm.$watch('a', function (newValue, oldValue) {
  // 此回撥函式將在 `vm.a` 改變後呼叫
})

三、例項生命週期鉤子函式

每個 Vue 例項在被建立之前，都要經過一系列的初始化過程：
設定資料觀察 - 編譯模板 - 在 DOM 掛載例項 - 資料變化時更新 DOM
在這個過程中，Vue 例項會呼叫執行一些生命週期鉤子函式，這樣使用者能夠在特定階段新增自己的程式碼。

//  在例項建立後將呼叫 created 鉤子函式：
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 例項
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的鉤子，會在例項生命週期的不同階段呼叫，如 mounted、updated 和 destroyed。
所有的鉤子函式在呼叫時，其 this 上下文都會指向呼叫它的 Vue 例項。

生命週期示意圖