通过一个简单的计数器例子分析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. WNN48T6X 54端口国产化万兆交换机

    WNN48T6X是基于盛科CTC5160设计的国产化三层万兆交换机,提供48路千兆电口和6路万兆光口,采用龙芯 2K1000处理器,支持双冗余可插拔电源供电.支持常规的L2/L3协议,支持Telnet ...

  2. C# 基础 - 日志捕获一使用 StreamWriter

    public static class LogHelper { private static readonly string _baseDir = AppDomain.CurrentDomain.Ba ...

  3. CentOS7.8搭建STF

    安装命令插件(rz.sz): yum install -y lrzsz wget unzip zip编辑配置文件导致命令无法使用时:export PATH=/usr/local/sbin:/usr/l ...

  4. Hive数据导出的几种方式

    在hive的日常使用中,经常需要将hive表中的数据导出来,虽然hive提供了多种导出方式,但是面对不同的数据量.不同的需求,如果随意就使用某种导出方式,可能会导致导出时间过长,导出的结果不满足需求, ...

  5. JAVA 写一个方法，判断一个整数是否为素数

    1 import java.util.Scanner; 2 3 public class Question3 { 4 public static void main(String[] args) { ...

  6. Android学习之异步消息处理机制

    •前言 我们在开发 APP 的过程中,经常需要更新 UI: 但是 Android 的 UI 线程是不安全的: 如果想更新 UI 线程,必须在进程的主线程中: 这里我们引用了异步消息处理机制来解决之一问 ...

  7. ACNet：用于图像超分的非对称卷积网络

    编辑:Happy 首发:AIWalker Paper:https://arxiv.org/abs/2103.13634 Code:https://github.com/hellloxiaotian/A ...

  8. Netflix业务运维分析和总结

    目录 Netflix工作环境的分析和思考 为什么Netflix会做得如此极致? 海量业务规模下的技术架构和挑战 更加合理的组织架构和先进的工具体系及理念 自由与责任并存的企业文化 当前问题: 精选提问 ...

  9. “知疫”疫情防控可视化平台——NABCD分析

    "知疫"疫情防控可视化平台 项目 内容 这个作业属于那个课程 2021春季学期软件工程(罗杰.任健) 这个作业的要求在哪里 初次邂逅,需求分析 1 NABCD分析 NEED 目前多 ...

  10. 【算法笔记】二分图与KM算法（当你试图只看蓝书学算法

    前言 呜,好久没写博客了,DDL 也有好多,一不留神就轮到我了呜. 看了一眼其它同学写的博客,什么数模啊,什么 CTF 啊,什么 Python 爬虫啊,感觉自己真是越来越菜了呜. 然后在我一愁莫展之际 ...