随着前端页面越来越复杂,用户对于交互性要求也越来越高,MVVM模型应运而生。

MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。

例如:model: $scope.obj={name:'x',age:'12'};

view:  <p>{{obj.name}}<p>;

当你修改model的name值时页面就会发生变化(model-->view的变化)  ;

view-->model的变化  如<input ng-model="key">   $scope.key的值会随着页面输入的值的变化而变化;

;MVVM的设计思想:关注Model的变化,让MVVM框架去自动更新DOM的状态,从而把开发者从操作DOM的繁琐步骤中解脱出来!

如何理解MVVM?的更多相关文章

  1. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  2. 深入理解MVVM模式中Silverlight的Trigger、Action和Behavior及Silverlight的继承机制

    接触Silverlight已经有两三个月了,开始一直感觉他和Winform很相似,拖拖控件就行了,所以一直把经历放在了研究后台和服务器交互和性能优化上面,很少去仔细研究Silverlight的页面.前 ...

  3. UWP开发-重新理解MVVM

    MVVM是一个比较热门的开发框架,尽管已经出现很久了,仍然比较受欢迎.MVVM框架包括: M:Model:Model指的是数据模型,例如你要在页面展示联系人信息,那么Model就是联系人的模型,包括联 ...

  4. 【前端知识体系-JS相关】深入理解MVVM和VUE

    1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...

  5. 如何理解MVVM

    说一下对MVVM的理解 MVC Model,View,Controller.   View是视图,界面,有输入框,有按钮,有列表等. Model是数据源,比如todolist里面等title,list ...

  6. 怎样理解 MVVM ( Model-View-ViewModel ) ?

    MVVM 的 产生 / 实现 / 发展 可以写一篇很长的博客了, 这里仅写一下个人对 MVVM的一些肤浅的认识. 1. 在 没有 MVVM 之前, 前端可以说是 jQuery一把梭 , jQuery ...

  7. extJs学习基础5 理解mvvm的一个小案例

    今天很是幸运,看到了一位大神的博客,学习了不少的东西.太感谢了.(满满的都是爱啊) 建议去学习这个大神的博客,真心不错. 博客地址:http://blog.csdn.net/column/detail ...

  8. 理解MVVM模式

    1.WPF的核心是数据绑定. 2.考虑这样一个场景:界面上有一个TextBox显示Person的年龄,一个Button,点击一次Button,年龄加1. 3.做一个View,上面有TextBox和Bu ...

  9. 我理解的MVC

    前言 前一阶段对MVC模式及其衍生模式做了一番比较深入的研究和实践,这篇文章也算是一个阶段性的回顾和总结. 经典MVC模式 经典MVC模式中,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的 ...

随机推荐

  1. JQ学习总结之选择器

    一.window.onload 和 $(document).ready()区别 1)window.onload   执行时机:必须等待网页中所有的内容加载完毕后(包括图片)才能执行. 编写个数:不能同 ...

  2. Weblogic中配置Active Directory Authentication Provider

    其要点或者容易出错的关键点是:(<>及其中说明代表需要替换的内容)         Host: ads.yourdomain.com         Host填AD服务器的域名或IP    ...

  3. 将php代码部署到新浪云测试(简单方法,包含数据库的连接)

    很多人做项目都是先在本地测试然后上传到服务器运行,如果包含了操作数据库的信息往往需要进行一番调试,这里我总结一下把php代码包含数据库的连接如何上传到新浪云服务器的步骤. 1.在新浪云应用SAE的控制 ...

  4. XHTML教会我的一些东西-1

    第一次写博客,虽然以前写作文是我的强项,我也很能说,但是似乎现在这种能力正在退化.不知为什么,到了大学之后我就变得跟以前不一样,似乎是回到了小学时的我.我在大学开始变得内向.沉默.不去主动和别人交谈. ...

  5. jQuery设置全选和全反选

    HTML 代码: <input type="checkbox" id="allChecked" onclick="setAllChecked(t ...

  6. Linux 学习 二, 安装JDK

    我是利用在window环境下载好JDK,然后传到VMware中linux中 下载JDK http://www.oracle.com/technetwork/java/javase/downloads/ ...

  7. 【Android学习入门】Android studio基本设置

    1.背景设置 依次选择File->Settings-->Appearance & Behaviour->Apprearance,然后勾选 show line number. ...

  8. Win10桌面右键响应非常慢怎么办?

    Win10桌面右键响应非常慢怎么办? 或许所有人升级到Win10都可能会遇上一个共同问题,右键桌面弹出菜单的反应非常非常的慢,你也感觉到了吧.在桌面点个右键需要等待五六秒左右的时间,这到底是不是系统问 ...

  9. 【CSS】等高布局

    1. 负margin:   margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果.   ...

  10. COGS 146. [USACO Jan08] 贝茜的晨练计划

    ★☆   输入文件:cowrun.in   输出文件:cowrun.out   简单对比时间限制:1 s   内存限制:32 MB 奶牛们打算通过锻炼来培养自己的运动细胞,作为其中的一员,贝茜选择的运 ...