• mvc与mvvm的区别与联系


    MVC

    MVC的思想:一句话描述就是Controller负责将Model的数据用View显示出来,换句话说就是在Controller里面把Model的数据赋值给View,比如在controller中写document.getElementById("box").innerhtml = data[”title”],只是还没有刻意建一个Model类出来而已。
    M:Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
    V:View(视图):是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。
    C:Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。Controller被设计出来:1、管理自己的生命周期;2、处理Controller之间的跳转;3、实现Controller容器。
    MVC标准如图:

    广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

    MVVM

    开发者为数据解析创建出了一个新的类:ViewModel。利用MVVM可以使我们的代码更加专注于处理业务逻辑而不是去关心DOM操作。

    它有两个方向:

    一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
    二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。

    这两个方向都实现的,我们称之为数据的双向绑定。总结:在MVVM的框架下视图和模型是不能直接通信的。

    vue就是基于MVVM模式实现的一套框架,在vue中:

    Model:指的是js中的数据,如对象,数组等等。
    View:指的是页面视图
    viewModel:指的是vue实例化对象

    例如:

    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    var app5 = new Vue({
      el: ‘#app-5‘,
      data: {
        message: ‘Hello Vue.js!‘
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split(‘‘).reverse().join(‘‘)
        }
      }
    })

    这里的html部分相当于View层,可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素,当ViewModel对Model进行更新时,通过数据绑定更新到View。

     Vue实例中的data相当于Model层,而ViewModel层的核心是Vue中的双向数据绑定,即Model变化时VIew可以实时更新,View变化也能让Model发生变化。

    整体看来,MVVM比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM中,View不知道Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。

    MVVM与MVC最大的区别就是:

    它实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。

  • 相关阅读:
    VS操作Sqlite数据库
    Sqlite官方下载对应版本注意细节
    样式
    移动端问题
    table最终版IE(浏览器中宽度不起作用)
    pointer-event:none;在IE浏览器中不起作用
    伪类的使用
    针对谷歌浏览器写的css样式
    IE浏览器中textarea有滚动条出现
    父级元素被子元素的margin-top值影响的解决方案
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/14102258.html
Copyright © 2020-2023  润新知