Vue——MVP设计模式与MVVM设计模式

传统MVP设计模式在这里插入图片描述

  • 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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值