MVVM
組件：model(領(lǐng)域模型) + ViewModel(綁定與監(jiān)聽） + view(視圖)
Vue中的MVVM
| view | viewModel | Model |
|---|---|---|
| DOM | VUE(Data Bindings and DOM Listeners) | Plain JS Objects |
內(nèi)置變量
創(chuàng)建Vue對(duì)象時(shí)，會(huì)定義內(nèi)置變量值还最。
也可以通過(guò)"$ + 變量名"來(lái)獲取內(nèi)置變量毡惜，進(jìn)行修改经伙。
el
- 類型：string | HTMLElement
- 作用：決定之后Vue實(shí)例會(huì)管理哪一個(gè)DOM。
data
- 類型：Object | Function(組件當(dāng)中data必須是一個(gè)函數(shù))
- 作用：Vue實(shí)例對(duì)應(yīng)的數(shù)據(jù)對(duì)象帕膜。
methods
- 類型：{[key:string]:Function}
- 作用：定義屬于Vue的一些方法垮刹，可以在其他地方調(diào)用达吞，也可以在指令中使用。
生命周期
vue對(duì)象創(chuàng)建過(guò)程包含了一個(gè)完整的生命周期荒典，有一系列的回調(diào)函數(shù)宗挥。
生命周期.png
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello life cycle</title>
</head>
<body>
<div id="app"></div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello life cycle'
},
//在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer)和event/watcher事件配置之前被調(diào)用
beforeCreate: function () {
console.log('beforeCreate')
},
//在實(shí)例創(chuàng)建完成后被立即調(diào)用
//在這一步种蝶，實(shí)例已經(jīng)完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)，屬性和方法的運(yùn)算瞒大，event/watcher事件回調(diào)螃征。
//然而，掛載階段還沒開始透敌，$el屬性目前不可見盯滚。
created: function () {
console.log('created')
},
//在掛載開始之前被調(diào)用踢械，相關(guān)的渲染函數(shù)首次被調(diào)用
beforeMount: function () {
console.log('beforeMount')
},
//el被新創(chuàng)建的vm.$el替換，掛載成功
mounted: function () {
console.log('mounted')
},
//DOM發(fā)生修改之前
beforeUpdated:function () {
console.log('beforeUpdated')
},
//DOM發(fā)生修改之后
updated:function () {
console.log('updated')
},
//組件激活
activated:function () {
console.log('activated')
},
//組件未激活
deactived:function () {
console.log('deactived')
},
//頁(yè)面銷毀之前
beforeDestroy:function () {
console.log('beforeDestroy')
},
//頁(yè)面銷毀之后
destroyed:function () {
console.log('destroyed')
},
//子組件發(fā)生錯(cuò)誤時(shí)執(zhí)行
errorCaptured:function () {
console.log('errorCaptured')
}
})
</script>
</body>
</html>
