Vue实现简单todoList以及jquery实现对比

十月梦想

发布于 2018-10-09 15:01:00

97000

代码可运行

文章被收录于专栏：十月梦想十月梦想

运行总次数：0

代码可运行

上一篇文章,了解了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 删除

jquery