您现在的位置是:群英 > 开发技术 > web开发
MVVM模型的作用和组成部分是什么,Vue中怎样用
Admin发表于 2022-11-12 17:41:50625 次浏览
今天这篇给大家分享的知识是“MVVM模型的作用和组成部分是什么,Vue中怎样用”,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,因此分享发大家做个参考,下文的讲解详细,步骤过程清晰,希望这篇“MVVM模型的作用和组成部分是什么,Vue中怎样用”文章能帮助大家解决问题。



理解MVVM模型

我们知道每一个 Vue 应用都是从创建一个新的实例开始的,根据 Vue2 的官方文档我们可以得知 Vue 的设计是得到了 MVVM 模型 的启发,所以就有了在我们创建 Vue 实例时,文档中经常使用vm这个变量名来表示 Vue 实例。(学习视频分享:vue视频教程)

什么是 MVVM 模型

我们知道了 Vue 借鉴了 MVVM模型的原理,但是我们只知道借鉴这件事,却不知道什么是MVVM模型,这里简单说明一下什么是 MVVM 模型。

MVVM (Model-View-ViewModel) 就是将其中的 View 的状态和行为抽象化,MVVM 模式和 MVC 模式一样,主要目的是分离视图和模型,MVVM 旨在利用 WPF 中的数据绑定函数,通过从视图层中几乎删除所以 GUI 代码,更好地促进视图层开发与模式其余部分的分离,不需要用户体验开发人员编写 GUI 代码,他们可以使用框架标记语言,并创建到应用程序开发人员编写和维护的视图模型的数据绑定。如下图所示:

MVVM模型主要是为了分离视图(View)和模型(Model),其优点为:低耦合、可重用性、独立开发以及可测试。 视图和模型分离的特点给了 Vue 很大的启发。

MVVM的组成部分

在 MVVM 模式中的组成部分分为以下四种:

Model(模型):代表真实状态的内容,即数据访问层(包含数据实体以及数据实体的操作)

View(视图):用户能在屏幕上看到的结构、布局和外观,负责数据显示以及交互方面

ViewModel(视图模型):暴露公共属性和命名的视图的抽象,将Model和View进行绑定,两者在进行数据更改时能实时刷新。ViewModel能够观察到数据的变化,并对视图对应的内容进行更新;ViewModel能够监听到视图的变化,并能够通知数据发生变化。

绑定器:在视图模型中,在视图与数据绑定器之间进行通信。

Vue中的实现

MVVM即模型-视图-视图模型。模型指的是后端传递的数据;视图指的是所看到的页面。视图模型是mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将模型转化成视图,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将视图转化成模型,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。

所以说得到MVVM模型启发的Vue,其核心就是实现了DOM监听与事件绑定,如下一个经典图例:

MVVM模型在 Vue 中的应用

举一个简单的 Vue 案例,来说明 MVVM 的主要三种组成部分在 Vue 中分别代表什么,如下:

<body>
    <div id="id">
        <h1>姓名:{{name}}</h1>
        <h1>国籍:{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
           data:{
                name:'张三',
                address:'中国'
            }
        })
        vm.$mount('#id')
        console.log(vm);
    </script>
</body>
登录后复制

Model:模型层,data里面的数据,表示JS的对象

View:视图层,HTML内容部分,表示HTML中能操作的DOM元素

ViewModel:充当连接视图和数据的中间人,即就是定义了 Observer 观察者身份,即桥梁

当然 MVVM 模型的思想不仅仅只应用在 Vue 上面,其他主流的前端框架也都能看到 MVVM 模型的影子。希望看完这篇文章,能够帮助你对 MVVM 模型有了更深一步的了解。


以上就是关于“MVVM模型的作用和组成部分是什么,Vue中怎样用”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: MVVM模型
相关信息推荐
2021-12-23 19:18:00 
摘要:这篇文章给大家分享的是用C++制作简易的贪吃蛇小游戏的内容。这里使用的是C++指针实现的方法,对新手学习和理解指针的使用有一定的帮助,因此分享给大家做个参考,文中示例代码介绍的很详细,感兴趣的朋友接下来一起跟随小编看看吧。
2022-08-27 17:49:16 
摘要:实现方法:1、使用“sleep(延迟秒数)”语句,可延迟执行函数若干秒;2、使用“time_nanosleep(延迟秒数,延迟纳秒数)”语句,可延迟执行函数若干秒和纳秒;3、使用“time_sleep_until(time()+7)”语句。
2022-07-26 17:38:03 
摘要:PHP如何使用xlswriter进行大数据的导入导出?下面本篇文章给大家介绍一下PHP大数据xlswriter导入导出(最优数据化)的方法,希望对大家有所帮助!
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部