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全部源代码
May 04 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jquery实现图片预加载
Dec 25 Javascript
PassWord输入框代码分享
Jun 07 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
原生js实现日期选择插件
May 21 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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
eAccelerator的安装与使用详解
2013/06/13 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
图片完美缩放
2006/09/07 Javascript
动态加载js文件 document.createElement
2006/10/14 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
js实现日历的简单算法
2017/01/24 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python中查看文件名和文件路径
2017/03/31 Python
Python实现进程同步和通信的方法
2018/01/02 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书