说一下对MVVM的理解
MVC
  Model,View,Controller。
 
  View是视图,界面,有输入框,有按钮,有列表等。
  Model是数据源,比如todolist里面等title,list。
  Controller是控制器,控制view的变化,也能控制model的变化。
 

MVVM
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input v-model='title'/>
    <button v-on:click='add'>submit</button>
    <ul v-for='item in list'>
      {{item}}
    </ul>
  </div>   <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script>
    var data = {
      title: '',
      list: []
    }     var vm = new Vue({
      el: '#app',
      data: data,
      methods: {
        add: function(){
          this.list.push(this.title);
          this.title = ''
        }
      }
    })
  </script>
</body>
</html>

看这段demo。上面是view层,中间data是数据源,下面vm对应的就是vm,vm就是view model。就是view和model中间的一个桥。完成了视图中数据的绑定。视图中数据的变化需要vm来控制。有vm的存在,彻底的分离view 和 model

Model - 模型、数据
View - 视图、模版(视图和模板是分离的)
ViewModel - 连接Model 和 View
三者之间的联系,脑补下面的demo
ViewModel的理解,联系View 和 Model。view可以通过事件绑定的方式影响到model。model可以通过数据绑定影响到view。
关于ViewModel
MVVM是MVC的一个微创新,就是VM,MV不是。
但其中的ViewModel确实是一种创新
真正结合前端场景应用的创建
 

如何理解MVVM的更多相关文章

  1. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  2. 深入理解MVVM模式中Silverlight的Trigger、Action和Behavior及Silverlight的继承机制

    接触Silverlight已经有两三个月了,开始一直感觉他和Winform很相似,拖拖控件就行了,所以一直把经历放在了研究后台和服务器交互和性能优化上面,很少去仔细研究Silverlight的页面.前 ...

  3. UWP开发-重新理解MVVM

    MVVM是一个比较热门的开发框架,尽管已经出现很久了,仍然比较受欢迎.MVVM框架包括: M:Model:Model指的是数据模型,例如你要在页面展示联系人信息,那么Model就是联系人的模型,包括联 ...

  4. 【前端知识体系-JS相关】深入理解MVVM和VUE

    1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...

  5. 如何理解MVVM?

    随着前端页面越来越复杂,用户对于交互性要求也越来越高,MVVM模型应运而生. MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,V ...

  6. 怎样理解 MVVM ( Model-View-ViewModel ) ?

    MVVM 的 产生 / 实现 / 发展 可以写一篇很长的博客了, 这里仅写一下个人对 MVVM的一些肤浅的认识. 1. 在 没有 MVVM 之前, 前端可以说是 jQuery一把梭 , jQuery ...

  7. extJs学习基础5 理解mvvm的一个小案例

    今天很是幸运,看到了一位大神的博客,学习了不少的东西.太感谢了.(满满的都是爱啊) 建议去学习这个大神的博客,真心不错. 博客地址:http://blog.csdn.net/column/detail ...

  8. 理解MVVM模式

    1.WPF的核心是数据绑定. 2.考虑这样一个场景:界面上有一个TextBox显示Person的年龄,一个Button,点击一次Button,年龄加1. 3.做一个View,上面有TextBox和Bu ...

  9. 我理解的MVC

    前言 前一阶段对MVC模式及其衍生模式做了一番比较深入的研究和实践,这篇文章也算是一个阶段性的回顾和总结. 经典MVC模式 经典MVC模式中,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的 ...

随机推荐

  1. .Net Core 程序报错 在上一个操作完成之前,在此上下文上启动了第二个操作。

    错误一: 程序完整报错: A second operation started on this context before a previous operation completed. This ...

  2. SPSS 2019年10月17日 21:46:38 今日学习总结

    数据库: 开放数据库链接是为了解决异构数据库间的数据共享而产生的,现已成为WOSA的主要部分和基于Windows环境的一种数据库访问接口标准ODBC为异构数据库访问提供一个接口,允许应用程序以SQL为 ...

  3. 6、rabbitmq&java代码操作

    记住四个注解 存: rabbitTemplate.convertAndSend("bw","我要红包"); 取: @Component @RabbitListe ...

  4. SQL Server 数据库清空ldf日志文件

    USE [master] ALTER DATABASE [DB_Develop] SET RECOVERY SIMPLE WITH NO_WAIT ALTER DATABASE [DB_Develop ...

  5. Reids原理之IO模型

    众所周知Redis是单进程单线程的应用,在如今多核横行的时代,我们不免有疑问,单线程的redis怎么就成了高性能的代表 当有多个线程同时调用redis的时候,那么单线程的redis是怎么处理的呢,这里 ...

  6. 关于tomcat9的startup.bat闪退问题&乱码

    1.打开apache-tomcat-9.0.22的bin目录  选择图中文件  记事本打开 2.更改文件 setclasspath.bat .0_172\jre 3.保存  startup ----- ...

  7. Ubuntu 更换下载源

    Ubuntu将下载官方源更换为国内源 由于某些原因,在国内更新软件都很慢,可以改源为国内源 1.备份原始文件 sudo cp /etc/apt/sources.list /etc/apt/source ...

  8. 使用Lombok总结

    Lombok学习总结 Project Lombok is a java library that automatically plugs into your editor and build tool ...

  9. Visual Studio 2019 离线安装方法

    1. 网址 1.1 阅读官方离线安装教程 离线安装官网 仔细阅读离线安装官网,差不多就能学会如何下载. 1.2 工作负荷和组件 ID 进入这个网址,Visual Studio 工作负荷和组件 ID,单 ...

  10. Python02之continue,break语句

    Python中的break和continue用法基本一样 break和continue都是用在while和for循环中,而不是跳出if...elif..else的判断语句中,跳出是直接跳出语句所在的w ...