简单概述理解 vue 的 MVVM 模型

作者：张三丰无极

2022-11-10
北京
本文字数：1365 字
阅读完需：约 4 分钟

MVVM模型概述

MVVM:Model View ViewModel

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象

它包括 DOM Listenters 和 Data bindings，前者实现了页面与数据的绑定，当页面操作数据的时候 DOM 和 Model 也会发生相应的变化。后者实现了数据与页面的绑定，当数据发生变化的时候会自动渲染页面。

为什么学习 vue 要学习 MVVM 模型

因为 vue 的设计就是参考了 MVVM 模型的启发，虽然不是完全一样，但是大致思路都是相似的

值值得注意的是，在没有 vue 之前，MVVM 模型就已经存在了

编写代码理解 vue 的 MVVM 模型

我们编写一个简单例子



<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script></head>
<body>    <!-- 准备一个容器 -->    <div id="root">        <h1>学校名称：{{name}}</h1>        <h1>学校地址：{{address}}</h1>    </div>    <script type="text/javascript">        // 设置为 false 以阻止 vue 在启动时生成生产提示。        Vue.config.productionTip = false        const v=new Vue({            el:'#root',            data:{                name:'清华大学',                address:'北京'            }         })       
    </script></body>
</html>

复制代码

其实 div 容器就是 View,vue 实例对象就是 ViewModel,实例中的 data 就是 Model

查看页面

我们尽量使用变量名称 vm 来接受 vue 实例

扩展：vue 的{}中还可以写什么

其实 vm 里面有的，我们都可以写

我们随便写一个测试下




<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>初始vue</title>    <!-- 引入vue.js -->    <script type="text/javascript" src="../js/vue.js"></script></head>
<body>    <!-- 准备一个容器 -->    <div id="root">        <h1>学校名称：{{name}}</h1>        <h1>学校地址：{{address}}</h1>        <h1>测试1：{{1+1}}</h1>        <h1>测试2：{{_c}}</h1>        <h1>测试3：{{$options}}</h1>    </div>    <script type="text/javascript">        // 设置为 false 以阻止 vue 在启动时生成生产提示。        Vue.config.productionTip = false        const vm=new Vue({            el:'#root',            data:{                name:'清华大学',                address:'北京'            }         })       console.log(vm)
    </script></body>
</html>

复制代码

需要明白的是：我们 data 中的属性最终也是在 vm 中显示的，所以可以通过插值获取到，这其实是一个数据代理，那么既然 vm 中有的，我们都能获取到，写的时候不用 vm.的方式获取，直接 $就能获取

总结

MVVM 模型

1 M:模型(Model)：data 中的数据

2 V:视图(View)：模板数据

3 VM:视图模型(ViewModel)：vue 实例

观察发现

1 data 中的所有属性，最后都出现在了 vm 身上

2 .vm 身上所有的属性及 vue 原型上所有属性，在 vue 模板中都可以直接使用

————————————————

原文链接：https://blog.csdn.net/weixin_46713508/article/details/127189187

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/4838cf8202e0cddb4b5a67260】。未经作者许可，禁止转载。

张三丰无极

关注

还未添加个人签名 2022-10-26 加入

还未添加个人简介

发布

暂无评论

创作场景