VUE的MVVM是什么呢?

最新推荐文章于 2023-03-01 17:57:14 发布

龟霸也是高达

最新推荐文章于 2023-03-01 17:57:14 发布

阅读量607

点赞数

分类专栏： JavaScript 基础 vue 文章标签： vue mvvm js

本文链接：https://blog.csdn.net/MS6324_ZAKU/article/details/108997975

版权

JavaScript 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

基础

28 篇文章 0 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

什么是MVVM?

直接看维基百科
在这里插入图片描述

直接看vue 的MVVM

vue可以帮我们把Model数据绑定到View上面
vue帮我们把View的事件绑定到Model上面

下面是一个使用vue实现的计数器demo

使用这个demo,来简单理解demo中的MVVM分别指的哪个
demo中,当点击+和-时,计数会发生变化
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    <h2>当前计数:{{msg}}</h2>
    <button v-on:click='add'>+</button>
    <button v-on:click='sub'>-</button>
  </div>  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        msg:0
},
      methods:{
        add: function(){
          console.log(this)
          this.msg++
  },
        sub: function(){
          this.msg--
        }
      }
    })
  </script>
</body>
</html>

在这个计数器demo中

我们的计数器就有严格的MVVM思想

View就是我们的DOM
Model就是我们抽离出来的obj
ViewModel就是我们创建的Vue对象实例

这时候就有长得帅的小伙伴来问了,他们之间是如何工作的呢?

首先ViewModel通过DataBuilding让obj中的数据实时的在DOM中展示
其次ViewModel通过DOM Listener来监听DOM事件,通过methods来操作.改变obj的数据

有了vue帮助我们完成ViewModel层的任务,在后续的开发中,我们可以专注于数据的处理,已经DOM的编写工作了

龟霸也是高达

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE的MVVM是什么呢?

什么是MVVM?直接看维基百科直接看vue 的MVVMvue可以帮我们把Model数据绑定到View上面vue帮我们把View的事件绑定到Model上面下面是一个使用vue实现的计数器demo使用这个demo,来简单理解demo中的MVVM分别指的哪个demo中,当点击+和-时,计数会发生变化<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>J
复制链接

扫一扫

专栏目录