通过例子分析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 ...
随机推荐
- 一起来学习LiteOS中断模块的源代码
摘要:本文带领大家一起剖析了LiteOS中断模块的源代码. 本文我们来一起学习下LiteOS中断模块的源代码,文中所涉及的源代码,均可以在LiteOS开源站点https://gitee.com/Lit ...
- 12、MyBatis教程之缓存
13.缓存 简介 1.什么是缓存 [ Cache ]? 存在内存中的临时数据. 将用户经常查询的数据放在缓存(内存)中,用户去查询数据就不用从磁盘上(关系型数据库数据文件)查询,从缓存中查询,从而提高 ...
- [set]JZOJ 5821 手机信号
Description
- Qt添加注释模板
背景 软件:Qt Creator 在写代码的时候我们为了规范化,一般会加文件注释.类注释和函数注释 用注释来说明我们的代码,也方便模块化开发 那么我们在写注释的时候经常会写一些重复的内容,我们会复制粘 ...
- python工业互联网应用实战11—客户端UI
这个章节我们将演示用户端界面的开发,当前演示界面还是采用先实现基本功能再逐步完善的"敏捷"模式.首先聚焦在功能逻辑方面实现普通用户与系统的交互,普通用户通过url能查看到当前任务的 ...
- Egress-Assess-出口数据安全功能测试
简介 Egress-Assess是一款用于测试出口数据检测功能的工具,该工具可辅助完成数据安全模型测试. 在各种情况下,我们的团队都会尝试从我们正在运行的网络中提取数据,并将其移至另一个位置以进行脱机 ...
- 阿里妈妈Java后端 社招5面（Offer已拿）
最近由于个人原因, 由于前面两面的时间过去的有点久了,只能根据记忆大概写些记得问题. 阿里妈妈1面 40mins(2021-02-22) 1. 能简单介绍下自己和自己做的项目吗? 2. 关于项目的 ...
- 基于gitlab的项目管理流程
框架 背景 个人是不太愿意使用用户体验差的软件来做项目管理,行业内,要找到这么一款软件,又要符合自己的需求,着实不容易.要免费,易用性要好,要安全,要有数据统计.而程序员的世界,SVN 之后,可能没有 ...
- python2爬取国家统计局全国省份城市区街道信息
工作中,再次需要python,发现python用得好 ,真的可以节省很多人力,先说我的需求,需要做一个类似像支付宝添加收货地址时,选择地区的功能,需要详细到街道信息,也就是4级联动,如右图.首先需要的 ...
- 《图解HTTP》部分章节学习笔记整理
简介 此笔记为<图解HTTP>中部分章节的学习笔记. 目录 第1章 了解Web及网络基础 第2章 简单的HTTP协议 第4章 返回结果的HTTP状态码 第7章 确保web安全的HTTPS