mvp例子与MVVM例子
VMP例子
<!-- 从百度CDN上面找个jquery的链接 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div>
<input type="text" id="input">
<button id="btn">提交</button>
<ul id="list"></ul>
</div>
<script>
// MVP
// dom v层=>视图
// p 控制器 调用模型层
function Page(){
}
$.extend(Page.prototype,{
init:function(){
this.bindEvents()
},
bindEvents:function(){
var btn = $('#btn');
btn.on('click',$.proxy(this.handleClick,this))
},
handleClick:function(){
var inputElem = $("#input")
var inputValue = inputElem.val();
var ulElem = $('#list')
ulElem.append('<li>'+inputValue+'</li>')
inputElem.val('')
}
})
var page = new Page()
page.init()
</script>
</body>
</html>
对比看MVVM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list ">{{item}}</li>
</ul>
</div>
<script>
// 把注意力放在数据上面
// 重点就是在数据上面
//原理 defindeproperty
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
</script>
</body>
</html>
mvp例子与MVVM例子的更多相关文章
- 通过例子分析MVVM
通过一个简单的计数器例子分析MVVM. 代码 demo2.html <!DOCTYPE html> <html lang="en"> <head> ...
- 【C#/WPF】ListView的MVVM例子，及禁止拖动ListView的头部Header
一个ListView的MVVM简单例子: <ListView ItemsSource="{Binding GoodsList}" Margin="0,10,0,10 ...
- 撸一个简单的MVVM例子
我个人以为mvvm框架里面最重要的一点就是VM这部分,它要与Model层建立联系,将Model层转换成可以被View层识别的数据结构:其次也要同View建立联系,将数据及时更新到View层上,并且响应 ...
- MVP模式和MVVM模式
MVP模式 模型-视图-表示器,也就是MVP模式.是mvc模式的一种衍生模式,专注于改进表示逻辑. 与MVC不同,来自view的调用将委托给presenter(表示器),表示器通过接口与view对话. ...
- Android mvp模式、mvvm模式
MVC和MVP的区别2007年08月08日 星期三 上午 09:23 MVC和MVP到底有什么区别呢? 从这幅图可以看到,我们可以看到在MVC里,View是可以直接访问Model的!从而,View里会 ...
- MVP模式与MVVM模式
1.mvp模式(Model层 Presenter层 View 层) Model层 :数据层(ajax请求) Presenter层:呈现层,view逻辑相关的控制层,控制层可以去调Model去发ajax ...
- oracle 定时任务例子【项目例子】
说明:请在plsql工具的命令窗口中,依次按步骤执行如下脚本 (1)建立备份表 my_test_log2create table my_test_log2 as select * from my_ ...
- [转载]Android MVC,MVP和MVVM 思想&例子
在Android开发中,常采用 MVC(Model-View-Controller)或者MVP(Model-View-Presenter) 等框架模式.设计如图 mvc mvp 可以看出,在 MV ...
- MVC、MVP、MVVM模型
在学习vue.react的过程中,总能看到MVVM模型,那么MVVM究竟是什么,下面将我最近看到的资料以及自己的想法总结一下. 与MVVM相似的,还有MVC.MVP,先从MVC.MVP这两个入手,方面 ...
随机推荐
- LeeCode-Single Number III
Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...
- 深入浅出 Java Concurrency (37): 并发总结 part 1 死锁与活跃度[转]
死锁与活跃度 前面谈了很多并发的特性和工具,但是大部分都是和锁有关的.我们使用锁来保证线程安全,但是这也会引起一些问题. 锁顺序死锁(lock-ordering deadlock):多个线程试图通 ...
- java编程题古典算法之兔子问题
1.题目如下. 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 分析每个月的兔子对数: 1---- ...
- JS基础语法之DOM02(事件）
1.常用事件 1.onclick 单击 应用场景:为按钮绑定 2.ondbclick 双击 3.onfocus 获得焦点 4.onblur 失去焦点 应用场景:用于表单验证,用户离开某个输入框时, ...
- ftp文件上传下载命令
介绍:从本地以用户wasqry登录的机器1*.1**.21.67上通过ftp远程登录到ftp服务器上,登录用户名是lte****,以下为使用该连接做的实验. 查看远程ftp服务器上用户lte**** ...
- C#窗体随意移动
//全区域移动 const int WM_NCLBUTTONDOWN = 0xA1; const int HT_CAPTION = 0x2; [DllImport("user32.dll&q ...
- 使用springboot上传文件至nginx代理服务器
nginx配置图片服务器 server { listen 8001; server_name image.xxx.com; proxy_set_header X-Forwarded-Host $hos ...
- 如何做系列(1)- mybatis 如何实现分页？
第一个做法,就是直接使用我们的sql语句进行分页,也就是在mapper里面加上分页的语句就好了. <select id="" parameterType="&quo ...
- Spring Http Basic（基本）和Digest（摘要）验证
Basic(基本)和Digest(摘要)验证都是web应用中很受欢迎的可选机制. Basic验证一般用来处理无状态的客户端,它们在每次请求都附带它们的证书. 很常见的用法是把它和基于表单的验证一起使用 ...
- SQL Server日常积累
1: 在Sql Server 中增加一列语句: alter table table_name add column_name [not null] [references ....] 例 ...