Vuejs 學習教程

vue 例項

構造器

每個 vue.js 應用的起步都是通過建構函式 vue 建立乙個 vue 的根例項：

var vm = new vue()

乙個 vue 例項其實正是乙個 mvvm 模式中所描述的 viewmodel - 因此在文件中經常會使用 vm 這個變數名。

在例項化 vue 時，需要傳入乙個選項物件，它可以包含資料、模板、掛載元素、方法、生命週期鉤子等選項。全部的選項可以在 api 文件中檢視。

可以擴充套件 vue 構造器，從而用預定義選項建立可復用的元件構造器：

var mycomponent = vue.extend()

// 所有的mycomponent例項都將以預定義的擴充套件選項被建立

var mycomponentinstance = new mycomponent()

儘管可以命令式地建立擴充套件例項，不過在多數情況下將元件構造器註冊為乙個自定義元素，然後宣告式地用在模板中。我們將在後面詳細說明元件系統。現在你只需知道所有的 vue.js 元件其實都是被擴充套件的 vue 例項。

屬性與方法

每個 vue 例項都會**其 data 物件裡所有的屬性：

var data = 
var vm = new vue()
vm.a === data.a // -> true
// 設定屬性也會影響到原始資料
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有這些被**的屬性是響應的。如果在例項建立之後新增新的屬性到例項上，它不會觸發檢視更新。我們將在後面詳細討論響應系統。

除了這些資料屬性，vue 例項暴露了一些有用的例項屬性與方法。這些屬性與方法都有字首 $，以便與**的資料屬性區分。例如：

var data = 
var vm = new vue()
vm.$data === data // -> true
vm.$el === document.getelementbyid('example') // -> true
// $watch 是乙個例項方法
vm.$watch('a', function (newval, oldval) )
參考 api 文件檢視全部的例項屬性與方法。

例項生命週期

vue 例項在建立時有一系列初始化步驟——例如，它需要建立資料觀察，編譯模板，建立必要的資料繫結。在此過程中，它也將呼叫一些生命週期鉤子，給自定義邏輯提供執行機會。例如 created 鉤子在例項建立後呼叫：

var vm = new vue(,
created: function () 
})// -> "a is: 1"

也有一些其它的鉤子，在例項生命週期的不同階段呼叫，如 compiled、 ready 、destroyed。鉤子的 this 指向呼叫它的 vue 例項。一些使用者可能會問 vue.js 是否有「控制器」的概念？答案是，沒有。元件的自定義邏輯可以分割在這些鉤子中。

Vuejs 學習教程

VueJs學習記錄

vuejs學習標籤1

VueJs學習入門指引

Vuejs 學習教程

VueJs學習記錄

vuejs學習標籤1

VueJs學習入門指引

相關推薦