通过例子分析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 ...
随机推荐
- 2018.12-2019.1 TO-DO LIST
AC自动机 P3808 [模板]AC自动机(简单版)(完成时间:2018.12.06) P3796 [模板]AC自动机(加强版)(完成时间:2018.12.06) P2444 [POI2000]病毒( ...
- vscode配置c\c++环境
目录 一.安装vscode 二.安装插件以及配置c\c++编译环境 1. 安装以下两个插件 2. 配置编译环境 一.安装mingw64(推荐) 方法一 方法二 二.如果你安装过visual studi ...
- LinkedList源码个人解读
LinkedList的基本结构是双向链接的直线结构. 链表的构造函数有两个,其中空构造函数什么都没做,就是一个空实现. /** * Constructs an empty list. */ publi ...
- 前端 | JS Promise：axios 请求结果后面的 .then() 是什么意思？
Promise 是JS中一种处理异步操作的机制,在现在的前端代码中使用频率很高.Promise 这个词可能有点眼生,但你肯定见过 axios.get(...).then(res => {...} ...
- 第22 章 ： 有状态应用编排 StatefulSet
有状态应用编排 StatefulSet 本文将主要分享以下四方面的内容: "有状态"需求 用例解读 操作演示 架构设计 "有状态"需求 课程回顾 我们之前讲到过 ...
- Java学习笔记--异常机制
简介 在实际的程序运行过程中,用户并不一定完全按照程序员的所写的逻辑去执行程序,例如写的某个模块,要求输入数字,而用户却在键盘上输入字符串:要求打开某个文件,但是文件不存在或者格式不对:或者程序运行时 ...
- python基础（十一）：集合的使用（下）
add() 含义:向集合中添加指定的元素: # 注:重复元素没办法加入. >>> s = {1,2,3} >>> s.add(2) >>> s{1 ...
- C#字符处理的性能问题
1."+"拼接 +拼接会每次会导致新创建一个字符串,消耗内存.多个(10个以内)固定的字符连接可以使用"+"进行连接.编译器会做相应的优化会依据加号次数调用不同 ...
- Ubuntu所有版本下载及更新源
官网:https://www.ubuntu.com/download/desktop没找到历史版本,且下载速度很慢在网易镜像站下载ubuntu:网址:http://mirrors.163.com/ub ...
- 记一次 .NET游戏站程序的 CPU 爆高分析
一:背景 1. 讲故事 上个月有个老朋友找到我,说他的站点晚高峰 CPU 会突然爆高,发了两份 dump 文件过来,如下图: 又是经典的 CPU 爆高问题,到目前为止,对这种我还是有一些经验可循的. ...