Vue是MVVM设计模式的前端框架,其实现Todolist相比于通过Jquery操作Dom来实现的方法是非常简洁的。下面我就来对比下这两种方法。
Vue实现
<body>
<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({
el: '#app',
data: {
list: [],
inputValue:''
},
methods: {
handleBtnClick: function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
可以看到,vue实现todolist仅仅是对Model层进行的操作,既对数据进行操作,在操作完成后,vue内置的ViewModel层会自动对数据进行处理,将结果映射在body中的View层上,如下图所示![img1](https://i-blog.csdnimg.cn/blog_migrate/1a94f8534e2683bd4e11f89774d48408.png)
Jquery实现
<body>
<div>
<input id="input" type="text"/>
<button id="btn">提交</button>
<ul id="list"></ul>
</div>
<script>
function Page(){
}
$.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层可以忽略,如图所示。
![img2](https://i-blog.csdnimg.cn/blog_migrate/81b9a9095ee5f2106680798f6d7116ba.png)
可以看出MVP设计模式中核心就是Presenter层,它里面放的业务逻辑是视图层与模型层的桥梁,既MVP设计模式大量的代码都是对Dom进行操作,对比MVVM设计模式,后者仅仅是对Model层的数据进行操作,同时页面上数据改变时也会影响Model层,既数据的双向绑定,这种模式大大简化了代码逻辑,减少了代码数量,对大型项目实现了很好的代码优化。