Vue之MVVM模型

举报
浩泽学编程 发表于 2023/11/24 09:44:16 2023/11/24
【摘要】 前言Vue的创建者在创建Vue时没有完全遵守MVVM(一种软件架构模式),但是Vue的设计受到了他它的启发。这也是为什么经常用vm(ViewModel的缩写)这个变量名表示Vue实例。 一、简说MVVM模型M:模型(Model),对应data内的数据V:视图(View),模板VM:视图模型(ViewModel),Vue实例对象可以看下面这张图进行理解:下面用代码实例讲解一下,方便更好理解 ...

前言

Vue的创建者在创建Vue时没有完全遵守MVVM(一种软件架构模式),但是Vue的设计受到了他它的启发。这也是为什么经常用vm(ViewModel的缩写)这个变量名表示Vue实例。


一、简说MVVM模型

M:模型(Model),对应data内的数据
V:视图(View),模板
VM:视图模型(ViewModel),Vue实例对象
可以看下面这张图进行理解:
image.png

下面用代码实例讲解一下,方便更好理解

	<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{name}}</p>
        <p>{{age}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: "王五",
                age: 20
            }
        })
    </script>
</body>

</html>

上诉代码中,MVVM体现在如下图:
image.png

二、走进MVVM

看了上述内容,大家应该能大致理解一下MVVM这种设计模式了,那我们就讲的官方一点。
Model层:Model层代表了描述业务逻辑和数据的一系列类的集合。它也定义了数据的修改和操作的业务规则。

  • View层:View层代表了UI组件,如CSS、jQUery、HTML等,只负责从Presenter接收到数据,也就是把模型转化为UI。
  • ViewModel层:ViewModel层负责暴露方法命令,其他属性用来操作View的状态,组装Model作为View动作的结果,并且触发View自己的事件。
  • MVVM的核心就是数据驱动(即ViewModel),是View和Model的关系映射。ViewModel类似于中转站,负责转换Model中的数据对象,使数据更加易于管理和使用。MVVM的本质就是基于操作数据来操作视图进而操作DOM,借助于MVVM无须直接操作DOM,开发者只需完成包含说明绑定的视图模块,编写ViewModel中的业务,使得View完全实现自动化。
  • 在MVVM中,View和Model不可以直接进行通信,他们之间利用ViewModel这个中介充当观察者的角色。当用户操作View时,ViewModel会感知到变化,然后再通知Model发生相应的变化;反之亦然。ViewModel向上与View进行双向数据绑定,向下与Model通过接口请求数据交互。

总结

以上就是MVVM设计模式的讲解。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。