Vue实现简单todoList以及jquery实现对比
上一篇文章,了解了Vue的hello world程序;这次简单了解两个vue指令,v-for和v-model,来实现一个简单的todolist;
v-for:用于循环,v-model用于绑定model的数据;看过之前的快速入门篇对这个指令应该不陌生,下面我会再次详解这个指令!以及使用这个指令来实现一个Todo List
vue实现TodoList
<div id="app">
<input type="text" v-model="inputVal"> <button v-on:click="addList">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
inputVal:"",
list:[]
},
methods:{
addList:function(){
this.list.push(this.inputVal);
//情况输入框内容
this.inputVal='';
}
}
})v-model用于绑定Vue中data的数据,data的数据改变这里也随之改, v-for="item in list";循环数据层的list数组,每一项为item,实际调用这个item就行!
v-on绑定一个事件,事件定义在Vue实例的methods中!
看下这个TodoList例子!
输入框的输入数据绑定在这个inputVal中,每次提交一次使用methods的方法将这个数据push到list数组中,for循环迭代这个数组,数据则呈递在视图层!
看下这个例子效果演示
在这个Vue实例中,实质上我们操作的是model的数据层,没有dom的操作!下面我们进行jquery实现这个功能的Dom操作!
jquery实现代码:
<input type="text" id="input" value=""> <button id="tj">提交</button>
<ul id="list">
</ul>
</div>
<script>
var input=$('#input');
var tj=$('#tj');
var list=$('#list');
tj.click(function(){
list.append('<li>'+input.val()+'</li>');
//清空输入框
input.val('');
})js中多次进行dom操作,由于这个实例的逻辑很简单,两者的代码量无从对比,但是从操作层面上两者有显著的对比,在jquery中实质就是获取input的内容,然后点击提交后,追加到下面的ul中,追加一个li,li的内容的刚才获取的input内容!
其实在一般的项目中,这种Vue的MVVM模式比传统的MVC(也可称为MVP)代码量节省30%以上!
MVP,M:model(业务数据层),V:view(视图层),C:control(控制层)!而在此种核心就是这个C,控制数据,然后去渲染V(视图层)!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录