传统MVP设计模式![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8f4184329d30c9bb14f8696a6f2652ab.png)
- M 模型层
- V 视图,可以触发事件
- P 控制器,通过dom操作改变视图(核心)
下面的代码实现的功能是:在输入框输入文字,点击提交后在下方以列表形式显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
=>引入了jQuery
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
<input type="text" id="input"/>
<button id='btn'>提交</button>
<ul id="ul"></ul>
</div>
===
M 模型层
V 视图,可以触发事件
P 控制器,通过dom操作改变视图(核心)
===
<script type="text/javascript">
function Page(){}
$.extend(Page.prototype,{
init:function(){
this.bindEvents()
},
bindEvents:function () {
var btn=$('#btn');
btn.on('click',$.proxy(this.handleBtnClick,this))
// $.proxy 用于改变this的绑定
},
handleBtnClick:function () {
// alert('123')
var inputElem=$("#input");//获取input框元素
var inputValue=inputElem.val();//取input框的内容
var ulElem=$("#ul");
ulElem.append('<li>'+inputValue+'</li>');
inputElem.val('');
}
})
var page=new Page();//创建实例
page.init();
</script>
</body>
</html>
MVP的主要特点:
- 把Activity里的许多逻辑都抽离到View和Presenter接口中去,并由具体的实现类来完成。
- View与Model不直接交互,而是通过与Presenter来完成交互
- Presenter中除了应用逻辑以外,还有大量的View->Model,Model->View的手动同步逻辑,会导致Presenter臃肿,维护困难
MVVM设计模式
MVVM的特点:
- 可以将ViewModel看作是Model和View的连接桥梁,View可以通过事件绑定Model,Model可以通过数据绑定View,通过ViewMode可以实现数据和视图的完全分离。
- 在 MVVM 设计模式中, Model 层负责存储数据,View 层用于显示数据。但 MVVM 设计模式中,没有 Presenter 层,取而代之的是ViewModel层级。
而ViewModel并不需要我们来 进行编写,使用 MVVM 设计模式进行编码的时候,无需关注ViewModel这一层是如何实现的,它完全是 Vue 内置的。而我们只需要更多的关注 M 层与 V层,即模型层和视图层。 - 在Vue框架下,我们可以直接操作数据而不是dom元素来实现View的改变
结合代码说明MVVM设计模式,与上面的代码执行同样的功能:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
=>在Vue操作中,只改变数据层,然后Vue实例会根据数据的
变化来渲染dom,我们并不再控制dom元素了
=>MVVM设计模式
<body>
<!-- V层 -->
<div id='app'>
<!-- v-model 轻松实现表单输入和应用状态之间的双向绑定,当输入框中内容变化时,Vue实例中的data中的inputValue也会变化-->
<input type="text" v-model="inputValue" />
<button v-on:click="handleBtnClick">提交</button>
<!-- 绑定事件 -->
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
=>VM层(ViewModel) 即Vue,监听视图层和数据M层
<script>
=>M层,关注数据
var app=new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{//把方法定义在methods中
handleBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
</script>
</body>
</html>