通过例子分析MVVM
通过一个简单的计数器例子分析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的更多相关文章
- spark JavaDirectKafkaWordCount 例子分析
spark JavaDirectKafkaWordCount 例子分析: 1. KafkaUtils.createDirectStream( jssc, String.class, String.c ...
- ZT 复杂的函数指针例子分析 2008
复杂的函数指针例子分析 2008-01-26 11:38:22 分类: 一个最简单的函数指针定义如下: Void (*funcPtr) (); //funcptr是一个函数指针,它指向的函数没有参数 ...
- DirectShow Filter 开发典型例子分析 ——字幕叠加 （FilterTitleOverlay）1
本文分析一下<DirectShow开发指南>中的一个典型的Transform Filter的例子:字幕叠加(FilterTitleOverlay).通过分析该例子,我们可以学习到Direc ...
- pytorch autograd backward函数中 retain_graph参数的作用，简单例子分析，以及create_graph参数的作用
retain_graph参数的作用 官方定义: retain_graph (bool, optional) – If False, the graph used to compute the grad ...
- mvp例子与MVVM例子
VMP例子 <!-- 从百度CDN上面找个jquery的链接 --> <!DOCTYPE html> <html lang="en"> < ...
- 面向对象tab栏例子分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- FFMpeg写MP4文件例子分析
http://blog.csdn.net/eightdegree/article/details/7425811 这段时间看了FFMpeg提供的例子muxing.c,我略微修改了下源代码,使其生成一个 ...
- 用Java开发gRPC服务的例子分析
本文的代码例子来自:https://github.com/grpc/grpc-java 定义服务 这一步与其他语言完全一样,需要定义gRPC的服务.方法.request和response的类型. 完 ...
- Apache Mina原理及典型例子分析
Apache Mina ,一个高性能 Java 异步并发网络通讯框架.利用 Mina 可以高效地完成以下任务: TCP/IP 和 UDP/IP 通讯 串口通讯 VM 间的管道通讯 SSL/TLS JX ...
随机推荐
- vs - 调试的技巧
在自助和局部变量窗口中固定属性 https://docs.microsoft.com/zh-cn/visualstudio/debugger/autos-and-locals-windows?view ...
- CF533F Encoding 题解
题目链接CF533F Encoding 提示1: \(\mathcal O(26^2*n)\) 的算法可通过.常用的几种字符串匹配算法kmp,AC自动机,哈希都可以解决该问题 (后两者可以优化到 ...
- 最新版Swagger 3升级指南和新功能体验！
Swagger 3.0 发布已经有一段时间了,它于 2020.7 月 发布,但目前市面上使用的主流版本还是 Swagger 2.X 版本和少量的 1.X 版本,然而作为一名合格的程序员怎么能不折腾新技 ...
- pip软件包管理工具介绍及基本使用
pip软件包管理工具介绍及基本使用 一分耕耘,一分收获,要收获得好,必须耕耘得好.-- 徐特立 一.pip软件包管理工具介绍: 定义:pip是Python包管理工具 作用:对Python包的查找.下载 ...
- 分享15个实用VSCode插件，快来收藏吧！
Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.它有卓越的性能和丰富的功能.VSCode 也有一个扩展和主题市场,为了帮助大家挑选出值得下载的插件,我们针对性的收集了 ...
- Java学习笔记--文件IO
简介 对于任何程序设计语言,输入和输出(Input\Output)都是系统非常核心的功能,程序运行需要数据,而数据的获取往往需要跟外部系统进行通信,外部系统可能是文件.数据库.其他程序.网络.IO设备 ...
- 【Visual Studio调教小记录】C++指针靠前靠后？？
本文地址:https://www.cnblogs.com/oberon-zjt0806/p/14631149.html 甜咸之争 经常写C++的基本上避不开使用指针,而且C++中指针类型的写法大体上有 ...
- Java中的泛型 - 细节篇
前言 大家好啊,我是汤圆,今天给大家带来的是<Java中的泛型 - 细节篇>,希望对大家有帮助,谢谢 细心的观众朋友们可能发现了,现在的标题不再是入门篇,而是各种详细篇,细节篇: 是因为之 ...
- Java生鲜电商平台-API接口设计之token、timestamp、sign 具体设计与实现
转载:https://www.cnblogs.com/jurendage/p/12653865.html 说明:在实际的业务中,难免会跟第三方系统进行数据的交互与传递,那么如何保证数据在传输过程中的安 ...
- Java代码度量分析工具：DesigniteJava简介
前言 在Java面向对象课程的学习过程中,我们需要使用度量工具来分析自己程序的代码结构.受OO课程组以及前辈们博客提醒,笔者找到了DesigniteJava这款软件,现对此软件进行简单的说明. 一.D ...