通过例子分析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 ...
随机推荐
- java异常的 理解
1.体系结构 java.lang.Object |----java.lang.Throwable |-------java.lang.Error:错误,java程序对此无能为力,不显式的处理 |--- ...
- Git Fetch failed解决办法
Git 下拉过程中,电脑死机了,重启后出现问题 找到的解决办法 https://blog.csdn.net/qq_33330887/article/details/80242206
- 采用React + Fabric + ImageMagick 实现大图片DIY定制
一,需求背景: 某个印刷公司,有一系列的设计文件模板.接到客户订单时,就在这些设计文件模板上,做一些简单的定制,就能够满足客户的印刷需求. 如在设计文件模板上添加客户的Logo,二维码,联系方式等. ...
- 攻防世界 reverse 进阶 notsequence
notsequence RCTF-2015 关键就是两个check函数 1 signed int __cdecl check1_80486CD(int a1[]) 2 { 3 signed int ...
- nodeJS详解2
Nodejs应用场景 创建应用服务 web开发 接口开发 客户端应用工具 gulp webpack vue脚手架 react脚手架 小程序 NodeJs基于 Commonjs模块化开发的规范,它定义 ...
- 【java框架】SpringBoot(4)--SpringBoot实现异步、邮件、定时任务
1.SpringBoot整合任务机制 1.1.SpringBoot实现异步方法 日常开发中涉及很多界面与后端的交互响应,都不是同步的,基于SpringBoot为我们提供了注解方式实现异步方法.使得前端 ...
- Java程序员都要懂得知识点：反射
摘要:Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为java语 ...
- SpringBoot-11 扩展功能
SpringBoot-11 扩展功能 异步 同步就是一个任务的完成需要依赖另外一个任务时,只有等待被依赖的任务完成后,依赖的任务才能算完成,这是一种可靠的任务序列.要么成功都成功,失败都失败,两个任务 ...
- vue 快速入门 系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- 使用Gensim库对文本进行词袋、TF-IDF和n-gram方法向量化处理
Gensim库简介 机器学习算法需要使用向量化后的数据进行预测,对于文本数据来说,因为算法执行的是关于矩形的数学运算,这意味着我们必须将字符串转换为向量.从数学的角度看,向量是具有大小和方向的几何对象 ...