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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
什么是JavaScript
2009/08/13 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python两种注释用法的示例
2020/10/09 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
总经理岗位职责描述
2014/02/08 职场文书
三好生演讲稿
2014/09/12 职场文书
工厂见习报告范文
2014/10/31 职场文书
劳模先进事迹材料
2014/12/24 职场文书
追讨欠款律师函
2015/05/27 职场文书
六年级作文之关于梦
2019/10/22 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis