通过一个简单的计数器例子分析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. 我与FreeBSD的故事之三

    联想G400 是我在国美电器线下买的笔记本.我什么也不懂,就随便买了,不随便也不行,谁都知道只要不是那种特别的奸商,基本上货物都是符合价值决定价格这个基本的经济学规律的.所以没钱就失去了选择的自由.到 ...

  2. WPF 基础 - 点击事件的执行顺序及 Button 点击事件的特殊性

    1. 点击事件的执行顺序 PreviewMouseLeftButtonDown PreviewMouseDown MouseLeftButtonDown MouseDown PreviewMouseL ...

  3. 京东数科面试真题：常见的 IO 模型有哪些？Java 中的 BIO、NIO、AIO 有啥区别？

    本文节选自<Java面试进阶指北 打造个人的技术竞争力> 面试中经常喜欢问的一个问题,因为通过这个问题,面试官可以顺便了解一下你的操作系统的水平. IO 模型这块确实挺难理解的,需要太多计 ...

  4. python-自定义一个序列

    python的序列可以包含多个元素,开发者只要实现符合序列要求的特殊方法,就可以实现自己的序列 序列最重要的特征就是可以包含多个元素,序列有关的特使方法: __len__(self):该方法的返回值决 ...

  5. Rust 内置 trait ：PartialEq 和 Eq

    GitHub: https://github.com/storagezhang Emai: debugzhang@163.com 华为云社区: https://bbs.huaweicloud.com/ ...

  6. 创建ortools的Dockerfile

    技术背景 基于已有的Docker容器镜像,去创建一个本地的镜像,有两种方法:一种是在之前的博客中提到过的,使用docker commit的方案,也就是先进去基础系统镜像内部完成所需的修改,然后comm ...

  7. （原创）在Linux上安装运行Python3(CentOS7为例)

    在win10上开发好的python项目要部署在Linux上要面对的问题:怎么在Linux上跑py文件呢? 以Lunix CentOS7.x平台为例,CentOS系统上自带的已有python2.x 的版 ...

  8. Elasticsearch扩展X-pack实施流程-实施

    Elasticsearch扩展X-PACK实施流程 elasticsearch5.2.1安装X-PACK,对ES集群进行监控,报警,安全验证,报告,图形化操作 注意 版本号需要固定,小版本都不能差,要 ...

  9. [Fundamental of Power Electronics]-PART I-2.稳态变换器原理分析-2.4 Cuk变换器实例

    2.4 Cuk 变换器 作为第二个示例,考虑图2.20(a)的变换器.该变换器执行类似于降压-升压变换器的直流转换功能:它可以增加或减小直流电压的幅值,并且可以反转极性.使用晶体管和二极管的实际实现如 ...

  10. thinkphp各版本常用漏洞总结

    0x01 漏洞分析及复现 1.漏洞分析 漏洞影响范围: Thinkphp 5.1.0 - 5.1.31Thinkphp 5.0.5 - 5.0.23 漏洞产生原因: Thinkphp5.x版本(5.0 ...