一篇文章弄懂Vue中的MVVM

最新推荐文章于 2021-12-26 21:38:07 发布

Test_晓

最新推荐文章于 2021-12-26 21:38:07 发布

阅读量270

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45473786/article/details/105055812

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

什么是MVVM

我有一篇博客是关于MVVM的，如果您想要了解，请参考：写给大忙人看的MVC、MVP和MVVM

Vue中的MVVM

图示

来自百度

解释

View层
（1）视图层
（2）在前端开发中，通常就是DOM层
（3）主要的作用是给用户展示各种信息
Model层
（1）数据层
（2）数据可能是固定不变的数据，更多的是来自服务器、从网络上请求下来的数据
ViewModel层
（1）视图模型层
（2）视图模型是View和Model沟通的桥梁
（3）一方面它实现了Data Binding(数据绑定)，将Model的改变实时地更新到View中.另一方面它实现了DOM Listener（DOM监听），当DOM发生一些事件（点击、滚动等等）时，可以监听到并在需要地情况下改变数据

举例

全部代码展示

首先ViewModel通过Data Binding让data中的数据实时的在DOM上显示，其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的相关操作来改变data中的数据

<body>
  <div id="app">
    <h2>当前计数：{{counter}}</h2>
      <button @click="counter--">-</button>
      <button @click="add">+</button>
  </div>
    
<script src="../vue.js"></script>   
<script>
  var data = {
    counter:0
  }
  const app = new Vue({
    el:"#app",
    data: data,
    methods:{        
      add:function(){
        this.counter++;              
      },
      sub:function(){
        this.counter--;
      }
    }
  });
</script>
</body>

View

就是在浏览器上展现给用户看的

<div id="app">
    <h2>当前计数：{{counter}}</h2>
      <button @click="counter--">-</button>
      <button @click="add">+</button>
  </div>

Model

Model是数据层，这里的data对象是要使用到的数据

var data = {
    counter:0
  }

ViewModel

整个Vue实例是View和Model沟通的桥梁

 const app = new Vue({
    el:"#app",
    data: data,
    methods:{        
      add:function(){
        this.counter++;              
      },
      sub:function(){
        this.counter--;
      }
    }
  });

Test_晓

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一篇文章弄懂Vue中的MVVM

文章目录什么是MVVMVue中的MVVM图示解释举例全部代码展示ViewModelViewModel什么是MVVM我有一篇博客是关于MVVM的，如果您想要了解，请参考：写给大忙人看的MVC、MVP和MVVMVue中的MVVM图示解释View层（1）视图层（2）在前端开发中，通常就是DOM层（3）主要的作用是给用户展示各种信息Model层（1）数据层（2）数据可能是...
复制链接

扫一扫

专栏目录