Vue.js 學習旅程Mile 3 – Vue 實例 與 MVVM 篇

每個 Vue 的應用都是透過用 Vue 函數 建立一個新的 Vue實例(Instance) 開始的。
在建立實例後，我們可以透過操作實例中的物件來改變頁面(以資料來驅動畫面)。

• Vue實例 (Instance)：Vue 運行的環境，需要包含 HTML 才是一個完整環境

Vue 的應用程式組成

整個 Vue 應用程式都會從一個根實例 (Root Instance) 開始，這個 Vue 實例會用 建構式 new Vue({/* Options */}) 建立，而根實例的下面可以引入各種可以重複使用的組件(Component)，每個組件都是一個 Vue 實例，因此整個應用程式會是一個以根實例(下方圖中最上面的那個方塊)為起始所展開的組件樹(component tree)。(關於元件之後會有更詳細的介紹)

一個頁面可以有多個 Vue 的應用程式，但不能建立巢狀的 Vue 應用程式，且 Root 實例( new Vue() )只能有一個

基本範例

Vue 在實體化時，可傳入一個選項物件(Options)，此物件包含這個 Vue 實例需要用到的屬性，例如：掛載目標(el)、資料(data)、方法(methods)、模板(template)、生命週期鉤子(hooks)等等。

<div id="app">
  {{ a }}
</div>

let vm = new Vue({  // 宣告一個 vm 變數，取得 Vue 實體化的物件
  // options 選項物件。包含屬性：el, data, methods等等
  el: "#app",
  data: {
    a: "text",
  }
});

實例內的基本選項 options

• el (element) 掛載目標：哪個範圍要有 Vue 的功能。
  使用 CSS Selector 指定到頁面上的元素，藉此將元素編譯成 Vue 的模板(template)。只有在掛載目標(上面的例子是
  )內才是此 Vue 實例的可用範圍。

一個 Vue 實例一次只能綁定一個 HTML 元素

• data 資料：存放所有在 Vue 響應式系統 (reactivity system) 內的屬性與值。
  即 data 內屬性的值改變時，其相對應的 view 畫面也會跟著做改變。

只有當實例被創建時就已經存在於 data 中的屬性才會是響應式的。

所以如果你知道你會在晚些時候才會需要某個屬性，那就在一開始時設置一些初始值(例如：空值、不存在或 0 等)。

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

MVVM

Vue 受 MVVM（Model - View - ViewModel）架構啟發

Vue 透過 ViewModel (View與Model的溝通橋樑) ，藉由 資料狀態（Model，Js 中的 data 物件）操作 畫面（View，畫面上的 DOM）。讓開發者只需關注在 Model 和 View 上，不用煩惱底層該如何實現