通过一个简单的计数器例子分析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安装xorg + xfce 4

    FreeBSD安装xorg,以及xfce 安装xorg 可选包 -xorg 完整xorg环境包 -xorg-minimal xorg最小化包 ports安装 cd /usr/ports/x11/xor ...

  2. hibernate中关系映射的配置问题

    部门和员工属于一对多的关系 员工的账户属于一对一关系 账户和权限属于多对多关系 department.hbm.xml 1 <hibernate-mapping> 2 <class n ...

  3. 深入理解Java并发框架AQS系列（二）：AQS框架简介及锁概念

    深入理解Java并发框架AQS系列(一):线程 深入理解Java并发框架AQS系列(二):AQS框架简介及锁概念 一.AQS框架简介 AQS诞生于Jdk1.5,在当时低效且功能单一的synchroni ...

  4. 如何学习python爬虫

    分享网易云课堂上一个不错的视频教学:http://study.163.com/course/courseMain.htm?courseId=1003285002

  5. 阿里二面：什么是mmap？

    平时在面试中你肯定会经常碰见的问题就是:RocketMQ为什么快?Kafka为什么快?什么是mmap? 这一类的问题都逃不过的一个点就是零拷贝,虽然还有一些其他的原因,但是今天我们的话题主要就是零拷贝 ...

  6. 清明|TcaplusDB持续为您保驾护航

    清明将至,又到一年休闲踏青,祭拜祖先的时机. 清明假期期间,TcaplusDB不停歇,我们将一如既往地守护您的数据,继续做您最坚实的后盾.  在未来,TcaplusDB还将以国产键值型数据库领航者的身 ...

  7. [二分匹配]Asteroids

    A s t e r o i d s Asteroids Asteroids 题目描述 Bessie wants to navigate her spaceship through a dangerou ...

  8. java面试-对象的创建、内存布局、访问定位

    一.对象的创建 1.虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化过.如果没有,那必须先执行相应的 ...

  9. Web协议详解与抓包实战,高效解决网络难题

    无论你是前后端工程师,还是运维测试,如果想面试更高的职位,或者要站在更高的角度去理解技术业务架构,并能在问题出现时快速.高效地解决问题,Web 协议一定是你绕不过去的一道坎. 旨在帮助你对各种常用 W ...

  10. 它来了！！！有史以来第一个64位Visual Studio(2022)预览版将在今夏发布！

    美国时间2021年4月19日,微软产品研发部一位负责人Amanda Silver在其博客上发布一则<Visual Studio 2022>的消息,表示将在今年(2021年)夏天发布Visu ...