（三）通过Vue实例理解MVVM原理

最新推荐文章于 2024-06-05 09:59:04 发布

Shashank497

最新推荐文章于 2024-06-05 09:59:04 发布

阅读量249

点赞数

分类专栏： # Vue.js保姆级教程文章标签： vue node.js jquery reactjs vue.js

本文链接：https://blog.csdn.net/EMIvv/article/details/107638238

版权

Vue.js保姆级教程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

三、Vue中的MVVM（Model-View-View-Model）

1.为什么会有MVVM？

现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，MVVM模型应运而生。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

2.ViewModel如何编写？

需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。

以第二章的第三个案例为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>

<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter--">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            add:function (){
                console.log('add被执行');
                this.counter++
            },
            sub:function (){
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

</body>
</html>

运行结果：
在这里插入图片描述
上面这个例子，可以用下面这个图来解释MVVM：

在这里插入图片描述
view和model之间的通信需要通过ViewModel来完成。

view层：视图层，在前端开发中，通常就是DOM，作用是给用户展示各种信息。
model层：数据层，数据可以是我们固定死的数据，也可以是网络上的数据。
ViewModel层：视图模型层，是桥梁。具体作用如下
Data Binding：数据绑定，把model中data里面的数据绑定到view里面，ViewModel会对数据进行解析后更新到view里面。
DOM listeners：DOM事件监听，当view页面上发生一些操作事件（点击、touch等）的时候，ViewModel就会把这些事件回调到model里面，做更多相关操作（比如改变对应Data的值）。

Shashank497

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
（三）通过Vue实例理解MVVM原理

三、Vue中的MVVM（Model-View-View-Model）1.为什么会有MVVM？现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，MVVM模型应运而生。MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。2.
复制链接

扫一扫