MVVM(模型-视图-视图模型)
模型:后端传递的数据
视图:看到的页面
视图模型:(mvvm模式的核心)连接model和view的桥梁,它有两个方向:
1.将模型转换为视图:后端传递的数据转换为前端的页面(方式:数据绑定)
2.将视图转化为模型:将所看到的页面转化为后端数据(方式:DOM事件监听)
在MVVM模式下,视图和模型是不能直接通信的,它们通过ViewModel来通信,ViewModel相当于一个观察者,当数据发生变化时能监听到数据的这种变化,然后通知到对应的视图做自动更新;用户操作视图时,ViewModel也能监听到视图的变化 ,然后通知数据做改动。
MVC(Model-View-Controller 模型-视图-控制器)
M:模型
V:视图
C:页面业务逻辑
使用MVC的目的就是将M和V的代码分离,MVC是单向通信,M和V必须通过C来承上启下。
ViewModel存在的目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。
MVVM框架出现的原因:
1.以前把传统的服务端代码放到浏览器中,产生了海量的js代码,链接各式各样的html和css,没有正规的组织形式,
2.为了解决浏览器兼容问题,出现了很多类库,比如jQuery,这些库没有实现对业务逻辑的分层,所以维护性和扩展性比较差
在vue中,Model:指的是js中的数据,如对象,数组等等。View:指的是页面视图viewModel:指的是vue实例化对象。
渐进式:
1.如果你已经有一个现成的服务端应用,你可以将vue 作为该应用的一部分嵌入其中,带来更加丰富的交互体验;2.如果你希望将更多业务逻辑放到前端来实现,那么VUE的核心库及其生态系统也可以满足你的各式需求(core+vuex+vue-route)。和其它前端框架一样,VUE允许你将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。3.如果我们构建一个大型的应用,在这一点上,我们可能需要将东西分割成为各自的组件和文件,vue有一个命令行工具,使快速初始化一个真实的工程变得非常简单(vue init webpack my-project)。我们可以使用VUE的单文件组件,它包含了各自的HTML、JAVASCRIPT以及带作用域的CSS或SCSS。以上这三个例子,是一步步递进的,也就是说对VUE的使用可大可小,它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。
vue实现数据双向绑定的原理:
vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时进行相应的操作。
未完待续。。。