通过例子分析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 ...
随机推荐
- 自己挖的坑自己填--Mybatis mapper文件if标签中number类型及String类型的坑
1.现象描述 (1)使用 Mybatis 在进行数据更新时,大部分时候update语句都需要通过动态SQL进行拼接.在其中,if标签中经常会有 xxx !='' 这种判断,若 number 类型的字段 ...
- 【java框架】MyBatis-Plus(1)--MyBatis-Plus快速上手开发及核心功能体验
1.MyBatis-Plus入门开发及配置 1.1.MyBatis-Plus简介 MyBatis-Plus(简称 MP)是一个 MyBatis的增强工具,在 MyBatis 的基础上只做增强不做改变, ...
- arcgis10.2 的安装与离线发布地图
一.ArcGIS for Desktop安装 ArcGIS安装 方法/步骤1:LicenseManager安装 1.首先要下载Arcgis 10.2软件,很大大约有4个多G.下载后可以用虚拟光驱,DA ...
- CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC
display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...
- Android Studio 之 制作 Nine-Patch 图片(.9图片)
•引言 9.png 可以保证图片在合适的位置进行局部拉伸,避免了图片全局缩放造成的图片变形问题. 但是由于Android Studio对于.9图片的检查更加严格,所以不符合AS要求的.9图片会带来很多 ...
- 各种OJ网站,刷题必备
各种OJ网站 落谷 vijos JoyOI CodeVS Comet OJ 北京大学 浙江大学 杭州电子科技大学 信息学奥赛一本通 以上就是本蒟蒻所知的OJ网站 收集和打字应该值一个赞吧
- DSP代码搬运至RAM运行
程序运行过程中,有些函数或程序段和数据等经常调用,正常情况下在FLASH中运行处理消耗时间和资源较大,通常将其移植至RAM中运行,可提高运行效率. 如: 1 #pragma CODE_SECTION( ...
- Java生鲜电商平台-API接口设计之token、timestamp、sign 具体设计与实现
转载:https://www.cnblogs.com/jurendage/p/12653865.html 说明:在实际的业务中,难免会跟第三方系统进行数据的交互与传递,那么如何保证数据在传输过程中的安 ...
- M3D - 一个想突破又还有很多包袱的新生三维数据格式杂谈
目录 1 门派 2 几个术语简析 3 结构简析 3.1 空间剖分方式 3.2 空间范围表示方式 4 M3DDataInfo.mcj 类定义 5 NodeInfo.json 类定义 6 *.m3d 文件 ...
- 【3.0 递归 Recursion 02】
[递归:阶乘] 1.寻找基本情况 对于阶乘而言,最基本的情况就是0!和1!,二者的结果都是1 我们不妨现在方法中写下这个情况,帮助我们跳出递归 if(i<=1){ return 1 ; } 接下 ...