Vue Instance

ref doc

每個Vue.js 所撰寫出的Web application最基本都會有一個主要的Vue Instance

然後透過Vue Instance的選項把instance內部元件給render到對應的DOM上面

Vue Instance可以想像是一個Javascript的Object

裡面透過data屬性存放物件

build Vue Instance with contructor

vue constructor with Instance

使用 Vue Constructor 建立 Vue Instance, vm,(ViewModel的縮寫)

const vm = new Vue({
  //options
});

ViewModel 為使用 MVVM的架構用來當作View資料來源

MVVM概念

MVVM的概念好處是真正的分離了過往MVC裡面View跟Controller之間的相依性

MVVM裡面ViewModel透過ObserverPattern的方式做到把修改notify到view

build Vue Instance with object

vue Instance with build with object

在實體化時，可傳入一個選項物件，此物件包含掛載點 (el)、資料 (data)、方法 (methods) 等。

const vm = new Vue({
   el: '#app',
   data: {
     message: 'Hello World'
   }
});

Notice 綁定的位置不能是body或html上

build Vue Component with Vue.extend

擴充 vue constructor 來建立元件

let Component = Vue.extends({
    data: function() {
        return {
            msg: 'Hello World2'
        }
    }
});

let cp = new Component();

sample code