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


Posted by yuhantaiwan on 2020-03-08

每個 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 上,不用煩惱底層該如何實現


#w3HexSchool #Vue #javascript







Related Posts

HHKB Studio

HHKB Studio

自駕車模擬環境 CARLA - 簡介 & 安裝

自駕車模擬環境 CARLA - 簡介 & 安裝

[JS Behind The Scene] 從 setTimeout () 初探 event loop 的運作模式

[JS Behind The Scene] 從 setTimeout () 初探 event loop 的運作模式


Comments