vue中的mvvm模式讲解


Posted in Javascript onJanuary 31, 2019

学习了MVVM模式

起先还觉得有点难,后面与双向数据绑定链接起来还是很容易理解的。

那么什么是MVVM呢?

不明思议咋们肯定和我想的一样   每个单词的首写字母呗!

对没错就是它 Model-View-ViewModel。  可以实现我们的双向数据绑定

下面我来用我的理解解析下它们之间的关系:

哈哈 有点小尴尬哈

先来说下View与Model之间有联系吗?

在MVVM架构下,View 和 Model 之间其实并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

好啦,说到这可能有些小伙伴会问view 什么,Model是什么?

Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;

View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。

现在明白了吧!

好啦  我们继续谈谈它们三者之间的关系呀  它们之间是不是有个三角恋呐

哈哈  不错

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,ViewModel里面包含DOM Listeners和Data Bindings,DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

mvvm有什么好处呢  当然这个肯定有好处的 不然学它干哈

1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。

3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

4. 可测试性。可以针对ViewModel来对界面(View)进行测试

咋们一起走向vue之路吧

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
js切换光标示例代码
Oct 10 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
ReactRouter的实现方法
Jan 25 Javascript
Vue和React组件之间的传值方式详解
Jan 31 #Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 #Javascript
async/await优雅的错误处理方法总结
Jan 30 #Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 #Javascript
JavaScript之解构赋值的理解
Jan 30 #Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 #Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 #Javascript
You might like
php 安全过滤函数代码
2011/05/07 PHP
php curl模拟post请求小实例
2013/11/13 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
node跨域请求方法小结
2017/08/25 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python内存动态分配过程详解
2019/07/15 Python
户外亲子活动策划方案
2014/02/07 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
小学教师年度个人总结
2015/02/05 职场文书
管理失职检讨书
2015/05/05 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
音乐研修感悟
2015/11/18 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
java基础——多线程
2021/07/03 Java/Android