Vue是MVVM設計模式的前端框架，其實作Todolist相比于通過Jquery操作Dom來實作的方法是非常簡潔的，下面我就來對比下這兩種方法，
Vue實作
<body>
//View層，既視圖層
<div id='app'>
<input type="text" v-model="inputValue"/><br>
<input type="text" v-model:lazy="inputValue"/>
<button v-on:click="handleBtnClick">點擊</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
//Model層，既資料層
el: '#app',
data: {
list: [],
inputValue:''
},
methods: {
handleBtnClick: function () {
this.list.push(this.inputValue)
this.inputValuehttps://www.cnblogs.com/lfnumber7/p/= ''
}
}
})
</script>
</body>
可以看到，vue實作todolist僅僅是對Model層進行的操作，既對資料進行操作，在操作完成后，vue內置的ViewModel層會自動對資料進行處理，將結果映射在body中的View層上，如下圖所示
Jquery實作
<body>
//View層，既視圖層
<div>
<input id="input" type="text"/>
<button id="btn">提交</button>
<ul id="list"></ul>
</div>
<script>
function Page(){
}
//Presenter層，既控制器層
$.extend(Page.prototype, {
init: function(){
this.bindEvents()
},
bindEvents: function(){
var btn = $("#btn");
btn.on('click', $.proxy(this.handleBtnClick, this))
},
handleBtnClick: function(){
var inputElem = $("#input");
var inputVal = inputElem.val();
var ulElem = $("#list");
ulElem.append('<li>' + inputVal + '</li>');
inputElem.val('');
}
})
var page = new Page();
page.init();
</script>
</body>
利用Jquery對頁面進行Dom操作從而實作todolist這其實是一種MVP設計模式（Model，Presenter，View），但是這個實作中沒有呼叫ajax請求獲取資料，是控制器層直接對Dom進行操作的，所以Model層可以忽略，如圖所示，
可以看出MVP設計模式中核心就是Presenter層，它里面放的業務邏輯是視圖層與模型層的橋梁，既MVP設計模式大量的代碼都是對Dom進行操作，對比MVVM設計模式，后者僅僅是對Model層的資料進行操作，同時頁面上資料改變時也會影響Model層，既資料的雙向系結，這種模式大大簡化了代碼邏輯，減少了代碼數量，對大型專案實作了很好的代碼優化，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140503.html
標籤：JavaScript
上一篇：用原生JS寫翻轉陣列