说一下对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. 【Leetcode_easy】883. Projection Area of 3D Shapes

    problem 883. Projection Area of 3D Shapes 参考 1. Leetcode_easy_883. Projection Area of 3D Shapes; 完

  2. 安装Windows和Ubuntu双系统2

    安装Windows和Ubuntu双系统 0.552016.12.10 15:54:41字数 2101阅读 6644 这几天开始动手做毕设啦,打算好好过把Linux瘾,接下来便是这两天我在联想电脑上安装 ...

  3. iOS-Xib获取view尺寸的问题

    用xib创建的视图,我们一般要在控制器中获取对应的view尺寸,但经常我们没法获取到,或者获取的不准 如果通过xib加载出来的view尺寸是不正确的, 在xib中这个view不管你怎么设置都是治标不治 ...

  4. sudo权限配置

    首先要禁止root的用户登录ssh  在ssh配置文件里面把root用户no掉,一般公司不允许用第三方软件直接root登陆. 一.linux给用户添加sudo权限: 有时候,linux下面运行sudo ...

  5. javascrtpt DOM操作

    DOM DOM:(document object mode)文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的就是为了能让js操作html元素而制定的一个规范 DO ...

  6. spark源码阅读 RDDs

    RDDs弹性分布式数据集 spark就是实现了RDDs编程模型的集群计算平台.有很多RDDs的介绍,这里就不仔细说了,这儿主要看源码. abstract class RDD[T: ClassTag]( ...

  7. YCOJ过河卒C++

    过河卒是一道~~较简单 的问题,用递归或者动态规划都可以完成,但今天主要不是递归或者动态规划,而是用深度优先搜索做的.虽然会有两组TLE~~ 深搜是一种向下搜索的算法(如图所示) 它能有效的统计中点到 ...

  8. composer 无法配置命令行写入配置文件问题

    composer config repo.packagist composer https://packagist.phpcomposer.com 这条命令无法修改composer.json 添加中国 ...

  9. Mkdown常用语法

    这篇笔记停了两天,今天开始整理, 写这篇笔记主要是加强下自己的mkdown语法知识, 也当作练手之作. Mkdown 语法简介 标题 [h1 - h6] # ~ ###### 一般# 作为标题, 只有 ...

  10. Zuul【工作原理】

    zuul的核心逻辑都是由一系列filter过滤器链实现的,但是filter的类型不同,执行的时机也不同,效果自然也不一样,主要特点如下: filter的类型:filter的类型,决定了它在整个filt ...