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这两个入手,方面 ...
随机推荐
- 19-10-31-B
%%%B哥 ZJ一下: 开题. 发现 语文考试???? 我不认识XD.老帅哥救我! 后来…… 对什么取模??? 什么玩意??输入什么?? 满足啥?? 全是亻 啊! 后来才知道是题楔×了 不管了. 然后 ...
- eclipse快捷大全
Eclipse常用快捷键 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速修正:Ctrl+1单词补全:Alt+/打开外部Java文档:Shift+F2 显示搜索 ...
- 把github上的项目clone到IDEA
点击clone按钮后,会弹出如下截图弹窗,点击 NO 点击open,找到刚刚从github上clone下来的项目,打开即可
- filterBuilders 构建过滤器query
FilterBuilders构建过滤器Query package com.elasticsearch; import org.elasticsearch.action.ActionListener; ...
- 不同版本springboot端点开启方法
1.X版本与2.X区别:2.X大部分路径要加“/actuator” 端点列表(注意最后一栏Sensitive为true的端点如果不设置为false将不可访问): https://docs.spring ...
- 2018-8-10-WPF-鼠标移动到列表上-显示列表图标
title author date CreateTime categories WPF 鼠标移动到列表上 显示列表图标 lindexi 2018-08-10 19:16:51 +0800 2018-2 ...
- 全栈之路-微信小程序-SKU开发（代码）
SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几 ...
- tp5异常全局返回处理
tp5 针对对异常,在debug模式下,会直接以页面返回的形式显示出各类错误.如果debug关机,显示 页面错误!请稍后再试- ThinkPHP V5.1.38 LTS { 十年磨一剑-为API开发设 ...
- 90 k数和 II
原题网址:https://www.lintcode.com/problem/k-sum-ii/description 描述 Given n unique integers, number k (1&l ...
- PAT甲级——A1065 A+B and C (64bit)
Given three integers A, B and C in [−], you are supposed to tell whether A+B>C. Input Specificati ...