通过一个简单的计数器例子分析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. RateLimiter源码解析

    RateLimiter是Guava包提供的限流器,采用了令牌桶算法,特定是均匀地向桶中添加令牌,每次消费时也必须持有令牌,否则就需要等待.应用场景之一是限制消息消费的速度,避免消息消费过快而对下游的数 ...

  2. 关于Handler同步屏障你可能不知道的问题

    前言 很高兴遇见你 ~ 关于handler的内容,基本每个android开发者都掌握了,网络中的优秀博客也非常多,我之前也写过一篇文章,读者感兴趣可以去看看:传送门. 这篇文章主要讲Handler中的 ...

  3. 攻防世界 reverse 新手练习区

    1.re1 DUTCTF IDA shift+F12 查看字符串 DUTCTF{We1c0met0DUTCTF} 2.game ZSCTF zsctf{T9is_tOpic_1s_v5ry_int7r ...

  4. OpenCV图像处理中的“机器学习"技术的使用

    注意,本文中所指"机器学习"(ML)技术,特指SVM.随机森林等"传统"技术. 一.应用场景        相比较当下发展迅速的各路"端到端" ...

  5. Shell 正则表达式详解

    Shell 正则表达式 什么是正则表达式? 正则表达式在每种语言中都会有,功能就是匹配符合你预期要求的字符串. 为什么要学正则表达式? 在企业工作中,我们每天做的linux运维工作中,时刻都会面对大量 ...

  6. [GDKOI2021] 普及组 Day3 总结 && 题解

    [ G D K O I 2021 ] 普 及 组 D a y 3 总 结 时间安排和昨天的GDKOI2021 Day2一样. 早上四个小时的快乐码题时间,然鹅我打了半小时的表 然后就是下午的题目讲解和 ...

  7. PhpStorm/WebStorm实用技巧

    我常用的IDE设置和功能 1) 使用IDE管理远程主机 Tools -> Deployment -> Browse Remote Host 其中功能十分强大 自己去探索 关键提示: 手动/ ...

  8. JavaScript深入理解-Promise以及常用方法详解

    Promise Promise 介绍 Promise 对象表示一个异步操作的最终完成(或失败)及其结果值. 状态: 一个 promise 必然处于以下几种状态之一 待定:初始状态(pending) 已 ...

  9. 神奇的魔方阵--(MagicSquare)(2)

    在上一篇博客中,我们讨论了阶数为奇数,以及阶数为(4K)的魔方阵的排列规则,以及代码实现(详见:https://www.cnblogs.com/1651472192-wz/p/14640903.htm ...

  10. 横趟！面试中遇到的 ZooKeeper 问题

    本文作者:HelloGitHub-老荀 本文是 HelloZooKeeper 系列的最后一篇文章,接下来主要聊聊面试中如果被问到 ZooKeeper 的问题如何回答,也可以当作学完本系列的测试. 准备 ...