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这两个入手,方面 ...
随机推荐
- 杂项-公司：Oracle
ylbtech-杂项-公司:Oracle 甲骨文公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩.1989年正式进入中国市场.201 ...
- 实用的 JavaScript 调试小技巧
‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...
- 我学习python没有记住的东西
格式化 # 格式化 a=123 b='ww' print("%d,%s,%%"%(a,b)) # %d,%s,%f,%c,%f 格式化代码:print('{}{}'.format( ...
- MySQL数据库--创建表，查询
MySQL创建表: 表(一)Student (学生表): CREATE TABLE `Student` ( `sno` ) DEFAULT NULL, `sname` ) DEFAULT NULL, ...
- springboot自己实现mysql主从数据切换机制
在很多公司都是实现了数据的读写分离,所谓的读写分离,就是写的时候从主库 ,然后从库就会从主库中复制过去,这样就会形成了数据的读写分离,然而在很多场景是适用的,那么我们怎么做呢,可以利用aop 加注解的 ...
- nginx+supervisor 前后端分离项目的发布流程
[第一部分] 前端发布(vue项目),假设项目名为demo_vue Step1:编译打包前端项目 cd到demo_vue目录下, 执行cnpm run build:prod命令,生成disc文件夹 S ...
- .net core 使用swagger生成API文档
[1]安装Swashbuckle.AspNetCore包 [2]在Startup.cs中注册swagger //注册Swagger生成器,定义一个和多个Swagger 文档 services.AddS ...
- Activiti数据库
数据库 Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. 1) ACT_RE_*: 'RE'表示repos ...
- 微信回调校验失败兼容php7
今天在移动微信支付的代码的时候,发现校验失败,之前好好的,一点点打印了,顺着微信校验程序打印看结果,发现 $xml = $GLOBALS['HTTP_RAW_POST_DATA'];; 接收到的数据 ...
- html2canvas JS截图插件
github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...