MVC
MVC的思想:一句话描述就是Controller负责将Model的数据用View显示出来,换句话说就是在Controller里面把Model的数据赋值给View,比如在controller中写document.getElementById("box").innerhtml = data[”title”],只是还没有刻意建一个Model类出来而已。
M:Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
V:View(视图):是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。
C:Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。Controller被设计出来:1、管理自己的生命周期;2、处理Controller之间的跳转;3、实现Controller容器。
MVC标准如图:
广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com
MVVM
开发者为数据解析创建出了一个新的类:ViewModel。利用MVVM可以使我们的代码更加专注于处理业务逻辑而不是去关心DOM操作。
它有两个方向:
一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。
这两个方向都实现的,我们称之为数据的双向绑定。总结:在MVVM的框架下视图和模型是不能直接通信的。
vue就是基于MVVM模式实现的一套框架,在vue中:
Model:指的是js中的数据,如对象,数组等等。
View:指的是页面视图
viewModel:指的是vue实例化对象
例如:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: ‘#app-5‘,
data: {
message: ‘Hello Vue.js!‘
},
methods: {
reverseMessage: function () {
this.message = this.message.split(‘‘).reverse().join(‘‘)
}
}
})
这里的html部分相当于View层,可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素,当ViewModel对Model进行更新时,通过数据绑定更新到View。
Vue实例中的data相当于Model层,而ViewModel层的核心是Vue中的双向数据绑定,即Model变化时VIew可以实时更新,View变化也能让Model发生变化。
整体看来,MVVM比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM中,View不知道Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。
MVVM与MVC最大的区别就是:
它实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。