说一下对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. LODOP计算结果值的合计

    LODOP中可以通过表达式等方式,计算结果并显示在LODOP预览打印的表格里,计算的是table中本来存在的数据,可以用tindex指定合计哪一列(相关博文:)那一列的数值是table中实际存在的,如 ...

  2. line-height超出隐藏显示的行数和垂直居中

    line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...

  3. C#中Request.servervariables参数

    整理一下,我在asp.net下遍历的Request.servervariables这上集合,得出的所有参数如下: : Request.ServerVariables["ALL_HTTP&qu ...

  4. jvm(1)---java内存结构

    jvm主要由三个子系统构成:类加载子系统,运行时数据区,执行引擎 运行时数据区主要包括: 1.本地方法栈:登记native方法,执行时加载本地方法库 2.程序计数器:就是一个指针,用来存储指向下一条执 ...

  5. Appium移动自动化测试-----（六）4.运行第一个Appium脚本

    新建maven空白工程 前置条件:安装eclipse或IntelliJ IDEA,及其maven插件,请自行百度 新建的工程如下: 新建目录apps,并将下载的安装包,拷贝到该目录下 打开POM增加依 ...

  6. LeetCode 199. 二叉树的右视图(Binary Tree Right Side View)

    199. 二叉树的右视图 199. Binary Tree Right Side View 题目描述 给定一棵二叉树,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值. Giv ...

  7. NetworkX一个图论与复杂网络建模工具

    NetworkX是一个图论与复杂网络建模工具,采用Python语言开发,内置了常用的图与复杂网络分析算法,可以方便的进行复杂网络数据分析.仿真建模等工作.(1)NetworkX支持创建简单无向图.有向 ...

  8. MapReduce示例式理解

    从word count这个实例理解MapReduce. MapReduce大体上分为六个步骤:input, split, map, shuffle, reduce, output.细节描述如下: 1. ...

  9. 修改主机名和修改主机映射和ssh免登陆

    1.修改主机名 vim /etc/sysconfig/network NETWORKING=yes HOSTNAME=cc3 2.修改主机映射 vi /etc/hosts 127.0.0.1 loca ...

  10. Python开发【第二章】：模块和运算符

    一.模块初识: Python有大量的模块,从而使得开发Python程序非常简洁.类库有包括三中: Python内部提供的模块 业内开源的模块 程序员自己开发的模块 1.Python内部提供一个 sys ...