mvp例子与MVVM例子
2024-10-08 00:27:44
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>
最新文章
- 计算节点宕机了怎么办？- 每天5分钟玩转 OpenStack（43）
- VMware Workstation下安装centos提示硬盘不支持的解决方法
- sql Sever的存储过程转换为mysql的
- 黑马程序员——【Java基础】——Java语法基础
- android——获取ImageView上面显示的图片bitmap对象
- hibernate自动建表采用UTF-8字符编码
- 关于HttpsURLConnection的连接问题
- py2exe 生成带图标的单个文件实例
- C++与AS3
- GitLab 安装配置笔记(转)
- lldb 命令
- G - 娜娜梦游仙境系列——梦醒
- python 代理的使用
- Spark源码剖析 - 任务提交与执行
- python之enumerate函数：获取列表中每个元素的索引和值
- WebService工作原理及传输安全问题
- ubuntu svn二进制文件
- Gitlab 项目上传
- RabbitMQ入门：总结
- java的灵魂——反射