初识 Vue(03)---(MVVM 设计模式)
程序员文章站
2024-02-08 21:57:52
...
MVP 设计模式
Model 层：模型层
Presenter 层：呈现层(业务逻辑控制层)
View 层：视图层（DOM 展示）
过程：视图层（V）发出一个事件交给控制器（P 呈现层）,控制器调用 Ajax 去模型层（M）获取数据 ; 或者直接去视图层（V）进行DOM 操作。控制器（P 呈现层）是核心，是模型层（M）和 视图层（V） 的中转站，其中大部分代码在进行 DOM 操作
（面向 DOM 开发）。模型层（M）比较边缘。
实例：
用 jQuery 实现 todo-list 功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList Jquery</title>
<script src = './jquery.js'></script>
</head>
<body>
<div>
<input id='input' type="text" >
<button id="btn">提交</button>
<ul id = 'list'></ul>
</div>
<script>
function Page() {
}
$.extend(Page.prototype,{
init:function(){ // 控制器 P
this.bindEvents()
},
bindEvents:function(){
var btn = $('#btn');
},
handleBtnClick:function(){
var inptutValue = $("#input").val();
var ulElem = $("#list");
ulElem.append('<li>' + inputValue + '</li>')：
inputElem.val('');
}
})
var page = new Page();
page.init();
</script>
</body>
</html>
init:function(){ // 控制器 P
this.bindEvents()
},
bindEvents:function(){
var btn = $('#btn');
},
handleBtnClick:function(){
var inptutValue = $("#input").val();
var ulElem = $("#list");
ulElem.append('<li>' + inputValue + '</li>')：
inputElem.val('');
}
})
var page = new Page();
page.init();
</script>
</body>
</html>
输出：
本段代码采用 MVP 的设计模式，并没有用 ajax 获取内容 ，故 M（模型层）被省略，通过控制器（P）来改变视图（V）
MVVM 设计模式
Model 层：模型层（存储数据）
View 层：视图层（显示数据）
ViemModel层：Vue 自带的，开发时无需关注具体如何实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'> V 层
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({ M 层
el: '#app',
data:{
list: [],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
<div id ='app'> V 层
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({ M 层
el: '#app',
data:{
list: [],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>通过操纵 M（模型层） 层 ，然后 V（视图层） 层会自动跟着变化 ，是通过 VM 层（API:Object.define.protein 和 虚拟DOM机制来实现）来实现的。 M（模型层） 层 与 V（视图层）之间双向联系，好处是在开发过程中只需关注 M（模型层）即可，M（模型层）是核心（面向数据开发），极大减少DOM 开发，减少代码量。
上一篇： Springboot系列-整合Redis
下一篇： 【Vue】MVVM 模板解析 渲染