# Vue.js 學習旅程Mile 3 – Vue 實例 與 MVVM 篇
###### tags: `w3HexSchool` `Vue` `Javascript`

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

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

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

:warning: 一個頁面可以有多個 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)。只有在掛載目標(上面的例子是 \<div id="app"> )內才是此 Vue 實例的可用範圍。

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

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

:warning: 只有當實例被創建時就已經存在於 `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 上，不用煩惱底層該如何實現。