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队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
JS delegate与live浅析
Dec 21 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
基于javascript实现碰撞检测
Mar 12 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/08/11 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
django 发送手机验证码的示例代码
2018/04/25 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
自我鉴定书范文
2013/10/02 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
住房租房协议书
2014/08/20 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
对学校的意见和建议
2015/06/04 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python