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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 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生成QRcode实例
2014/09/22 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
vuejs如何配置less
2017/04/25 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
python3 爬取图片的实例代码
2018/11/06 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
学习十八大报告感言
2014/02/04 职场文书
小学音乐教学反思
2014/02/05 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android