通过一个简单的计数器例子分析MVVM。

代码

demo2.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h3>当前数值大小：{{cnt}}</h3>

    <button @click="addCnt" >+</button>

    <button @click="subCnt" >-</button>

</div>

</body>

<!--导入vue.js-->

<script src="../lib/vue-2.4.0.js"></script>

<script>

    var vm = new Vue({

        el:"#app"

        // Model 数据

        ,data:{

            cnt :0

        }

        ,methods:{

          addCnt(){

            this.cnt++;

          },

          subCnt(){

            this.cnt--;

          }

        }

    });

</script>

</html>

分析

View是HTML

Model是抽离出来的data

ViewModel是创建的Vue对象实例

它们之间是如何工作呢？

首先VM通过数据绑定让data中的数据实时的在HTML中显示。

其次VM通过监听HTML中的事件，并且通过methods中的操作，来改变data中的数据。

Data中的数据被改变了之后，立即响应回HTML中。

有了vue帮助我们完成ViewModel层的任务，在后续的开发中，我们就可以专注于数据的处理，以及HTML、CSS的编写工作了，而不去关注DOM的操作。

通过例子分析MVVM的更多相关文章

  1. spark JavaDirectKafkaWordCount 例子分析

    spark  JavaDirectKafkaWordCount 例子分析: 1. KafkaUtils.createDirectStream( jssc, String.class, String.c ...

  2. ZT 复杂的函数指针例子分析 2008

     复杂的函数指针例子分析 2008-01-26 11:38:22 分类: 一个最简单的函数指针定义如下: Void (*funcPtr) (); //funcptr是一个函数指针,它指向的函数没有参数 ...

  3. DirectShow Filter 开发典型例子分析 ——字幕叠加 （FilterTitleOverlay）1

    本文分析一下<DirectShow开发指南>中的一个典型的Transform Filter的例子:字幕叠加(FilterTitleOverlay).通过分析该例子,我们可以学习到Direc ...

  4. pytorch autograd backward函数中 retain_graph参数的作用，简单例子分析，以及create_graph参数的作用

    retain_graph参数的作用 官方定义: retain_graph (bool, optional) – If False, the graph used to compute the grad ...

  5. mvp例子与MVVM例子

    VMP例子 <!-- 从百度CDN上面找个jquery的链接 --> <!DOCTYPE html> <html lang="en"> < ...

  6. 面向对象tab栏例子分析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. FFMpeg写MP4文件例子分析

    http://blog.csdn.net/eightdegree/article/details/7425811 这段时间看了FFMpeg提供的例子muxing.c,我略微修改了下源代码,使其生成一个 ...

  8. 用Java开发gRPC服务的例子分析

    本文的代码例子来自:https://github.com/grpc/grpc-java  定义服务 这一步与其他语言完全一样,需要定义gRPC的服务.方法.request和response的类型. 完 ...

  9. Apache Mina原理及典型例子分析

    Apache Mina ,一个高性能 Java 异步并发网络通讯框架.利用 Mina 可以高效地完成以下任务: TCP/IP 和 UDP/IP 通讯 串口通讯 VM 间的管道通讯 SSL/TLS JX ...

随机推荐

  1. 2018.9.9 nowcoder 普及组第一场

    2018.9.9 nowcoder 普及组第一场 C-括号 题目大意:一个只包含左右括号的字符串\(S\),希望删掉S中若干个字符,使得剩下的字符串是一个合法的括号串,有多少不同的方案. Soluti ...

  2. Shtml、html、xhtml、htm以及SSI的了解与认识(转载)

    Shtml.html.xhtml.htm以及SSI的了解与认识(转载) 一.htm.html.shtml网页区别(博客园) 文章链接:https://www.cnblogs.com/Renyi-Fan ...

  3. js【生成规定数量不重复随机数】、【冒泡排序】、【鸡尾酒排序】、【选择排序】、【插入排序】、【未完工的二分插入排序】------【总结】

    [生成规定数量不重复随机数] function creatRandom( num ){ var randomLen = num, ranArr = [], thisRan = null, whileO ...

  4. python3 中is和==的区别

    is    身份运算符,用来判断对象是否属于同一地址 (python内置函数id() 可以返回对象地址) ==  比较运算符,用于判断值是否相同

  5. 一文搞懂如何实现 Go 超时控制

    为什么需要超时控制? 请求时间过长,用户侧可能已经离开本页面了,服务端还在消耗资源处理,得到的结果没有意义 过长时间的服务端处理会占用过多资源,导致并发能力下降,甚至出现不可用事故 Go 超时控制必要 ...

  6. PHP并发抢购解决方案

    Mysql版 逻辑步骤 mysql存储引擎使用Innodb 开始事务,查询商品库存并加上共享锁 判断库存是否足够,进行商品/订单/用户等操作 提交事务,完成下单抢购 代码参考 // 关闭自动提交 $t ...

  7. [源码解析] 并行分布式框架 Celery 之 worker 启动 (1)

    [源码解析] 并行分布式框架 Celery 之 worker 启动 (1) 目录 [源码解析] 并行分布式框架 Celery 之 worker 启动 (1) 0x00 摘要 0x01 Celery的架 ...

  8. Simulink中Scope数据保存至Workspace制图

    0 问题 通常情况下,仿真模型中scope波形可编辑程度并不高,尽管高版本MATLAB中已经可以将其直接导出到figure,但效果并不是特别理想.在需要高质量输出波形图场合,就需要将其中数据导出到wo ...

  9. java面试-垃圾回收器谈谈你的理解

    一.垃圾回收算法: 引用计数 复制算法 标记-清除 标记-整理 二.垃圾回收的方式: 串行(Serial).并行(Parallel).并发(CMS).G1 1.串行垃圾回收器(Serial) 它为单线 ...

  10. 如何调试 Java 开源项目源码，记一种源码导入开发工具并调试的通用方法

    楔子 说起读开源项目源码,很多朋友觉得高大上.大佬牛逼,云云~ 挡在很多人面前的不是源码怎么读,而是不知道如何导入源码到开发工具以及如何调试源码. 本文将以 spring-cloud-gateway ...