vue.js初入門(三Vue實例)

vue.js初入門(三Vue實例)

創建實例語法

vue.js初入門(三Vue實例)

在實例化 Vue 時,需要傳入一個選項對象,它可以包含數據、模板、掛載元素、方法、生命週期鉤子等選項。

屬性與方法

每個 Vue 實例都會代理其 data 對象裡所有的屬性:

vue.js初入門(三Vue實例)

當一個 Vue 實例被創建時,它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時,視圖將會產生“響應”,即匹配更新為新的值。

值得注意的是:只有當實例被創建時 data 中存在的屬性才是響應式的。也就是說如果你添加一個新的屬性,比如:

vue.js初入門(三Vue實例)

那麼對 b 的改動將不會觸發任何視圖的更新。

那麼如果對var data對象改動會如何呢?

vue.js初入門(三Vue實例)

如果我們需要改變它呢?假設一開始它為空或不存在。我們可以設置一些初始值。比如:

vue.js初入門(三Vue實例)

注意:如果使用了Object.freeze()方法,這會阻止修改現有的屬性,也意味著響應系統無法再追蹤變化。

vue.js初入門(三Vue實例)

MDN解釋如下:Object.freeze() 方法可以凍結一個對象,凍結指的是不能向這個對象添加新的屬性,不能修改其已有屬性的值,不能刪除已有屬性,以及不能修改該對象已有屬性的可枚舉性、可配置性、可寫性。也就是說,這個對象永遠是不可變的。該方法返回被凍結的對象。

除了數據屬性,Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $,以便與用戶定義的屬性區分開來。例如:

vue.js初入門(三Vue實例)

實例生命週期

vue.js初入門(三Vue實例)

Vue1.0和2.0的對比

vue.js初入門(三Vue實例)


分享到:


相關文章: