Vue中的MVVM
View -----ViewModel-----Model
View层:
- 视图层
- 在前端开发中,通常是指DOM层
- 主要是展示各种信息
什么是DOM层?
DOM全拼为Document Object Model(文档对象模型)是一种用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现。
Model层:
- 数据层
- 数据可以是固定的数据,也可以是服务器或者爬取的数据
VueModel层:
- 视图模型层
- 视图模型层是View和Model之间的桥梁
- 一方面实习了Data Binding(数据绑定),将model中的改变实时的反应到View中
- 另一方面实现了DOM Listener(事件监听),可以监听到并在需要的情况下改变对应的data
基本语法
const app = new Vue({
el:'#app',
data:{
message:'HelloVue'
}
methods:{
add: function(){
}
}
})
el:
类型: string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM
data:
类型:object | function
作用:Vue实例对象的数据
methods:
类型:{ [key:string] : function }
作用:定义属于Vue的一些方法在其他里面调用,也可以在指令中调用