MVVM
组件：model(领域模型) + ViewModel(绑定与监听） + view(视图)
Vue中的MVVM
| view | viewModel | Model |
|---|---|---|
| DOM | VUE(Data Bindings and DOM Listeners) | Plain JS Objects |
内置变量
创建Vue对象时，会定义内置变量值。
也可以通过"$ + 变量名"来获取内置变量，进行修改。
el
- 类型：string | HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM。
data
- 类型：Object | Function(组件当中data必须是一个函数)
- 作用：Vue实例对应的数据对象。
methods
- 类型：{[key:string]:Function}
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
生命周期
vue对象创建过程包含了一个完整的生命周期，有一系列的回调函数。
生命周期.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'
},
//在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用
beforeCreate: function () {
console.log('beforeCreate')
},
//在实例创建完成后被立即调用
//在这一步，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，event/watcher事件回调。
//然而，挂载阶段还没开始，$el属性目前不可见。
created: function () {
console.log('created')
},
//在挂载开始之前被调用，相关的渲染函数首次被调用
beforeMount: function () {
console.log('beforeMount')
},
//el被新创建的vm.$el替换，挂载成功
mounted: function () {
console.log('mounted')
},
//DOM发生修改之前
beforeUpdated:function () {
console.log('beforeUpdated')
},
//DOM发生修改之后
updated:function () {
console.log('updated')
},
//组件激活
activated:function () {
console.log('activated')
},
//组件未激活
deactived:function () {
console.log('deactived')
},
//页面销毁之前
beforeDestroy:function () {
console.log('beforeDestroy')
},
//页面销毁之后
destroyed:function () {
console.log('destroyed')
},
//子组件发生错误时执行
errorCaptured:function () {
console.log('errorCaptured')
}
})
</script>
</body>
</html>
网友评论