Vue实现todoList（任务计划列表）

傷城~ 2022-05-20 06:48 370阅读 0赞

大致功能：

> 1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）
> 
> 2、动态计算有几个未完成的任务
> 
> 3、点击复选框，实现选中或不选中效果（即完成或未完成）
> 
> 4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表
> 
> 5、双击列表中的内容，可对列表内容进行编辑
> 
>  *  编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑
>  *  如果想要取消修改，按esc键即可取消编辑
> 
> 6、单击上面的所有任务、未完成任务、已完成任务，三个按钮可以切换任务列表
> 
> 7、已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（用到了本地存储）

实现的过程也是把上面的功能一个一个实现即可

看一个大致的图：

没有任务添加的效果图：

![70][]

添加了任务的效果图：

![70 1][]

嗯，看下面的代码

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="index.css">
        <script src="./vue.js"></script>
    </head>
    <body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input
                placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务"
                class="task-input"
                type="text"
               v-on:keyup.enter="enterFn"
                v-model="todo"
        />
        <ul class="task-count">
            <li>{
       {unComplete}}个任务未完成</li>
            <li class="action">
                <a :class="{active:visibility!=='unCompleted'&&visibility!=='completed'}" href="#all">所有任务</a>
                <a :class="{active:visibility==='unCompleted'}" href="#unCompleted">未完成的任务</a>
                <a :class="{active:visibility==='completed'}" href="#completed">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
    
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list" v-show="list.length">
                <li class="todo"
                    v-for="item in filterData"
                    v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
                >
                    <div class="view">
                        <input class="toggle"
                               type="checkbox"
                               v-model="item.isComplete"
                        />
                        <label @dblclick="edtorTodo(item)">{
       {item.title}}</label>
                        <button
                                class="destroy"
                                @click="delFn(item)"
                        ></button>
                    </div>
                    <input
                            class="edit"
                            type="text"
                            v-focus="edtorTodos===item"
                            v-model="item.title"
                            @blur="edtoEnd(item)"
                            @keyup.enter="edtoEnd(item)"
                            @keyup.esc="cancelEdit(item)"
                    />
                </li>
            </ul>
        </div>
    </div>
    <script src="./todo.js"></script>
    </body>
    </html>

JS代码：

//存取localStorage中的数据
    var store = {
        save(key,value){
            window.localStorage.setItem(key,JSON.stringify(value));
        },
        fetch(key){
         return JSON.parse(window.localStorage.getItem(key))||[];
        }
    }
    //list取出所有的值
    var list = store.fetch("storeData");
    
    var vm = new Vue({
        el:".main",
        data:{
            list,
            todo:'',
            edtorTodos:'',//记录正在编辑的数据,
            beforeTitle:"",//记录正在编辑的数据的title
            visibility:"all"//通过这个属性值的变化对数据进行筛选
        },
        watch:{
            //下面的这种方法是浅监控
          /*list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
              store.save("storeData",this.list);
          }*/
          //下面的是深度监控
            list:{
                handler:function(){
                    store.save("storeData",this.list);
                },
                deep:true
            }
    
        },
        methods:{
            enterFn(ev){//添加任务
                //向list中添加一项任务
                //事件处理函数中的this指向的是当前这个根实例
                if(this.todo==""){return;}
                    this.list.push({
                        title:this.todo,
                        isComplete:false
                    });
                    this.todo = "";
            },
            delFn(item){//删除任务
                var index = this.list.indexOf(item);
                this.list.splice(index,1)
            },
            edtorTodo(item){//编辑任务
                //编辑任务的时候记录编辑之前的值
                this.beforeTitle = item.title;
                this.edtorTodos = item;
            },
            edtoEnd(item){//编辑完成
                this.edtorTodos="";
                // this.cancelEdit = this.edtorTodos;
            },
            cancelEdit(item){//取消编辑
                item.title = this.beforeTitle;
                this.beforeTitle = '';
                this.edtorTodos='';
            }
        },
        directives:{
            "focus":{
                update(el,binding){
                    if(binding.value){
                        el.focus();
                    }
                }
            }
        },
        computed:{
            unComplete(){
            return  this.list.filter(item=>{
                    return !item.isComplete
                }).length
            },
            filterData(){
                //过滤的时候有三种情况 all completed unCompleted
                var filter = {
                    all:function(list){
                        return list;
                    },
                    completed:function(list){
                        return list.filter(item=>{
                            return item.isComplete;
                        })
                    },
                    unCompleted:function(list){
                        return list.filter(item=>{
                            return !item.isComplete;
                        })
                    }
                }
                //如果找到了过滤函数，就返回过滤后的数据，如果没有找到就返回所有的数据
                return filter[this.visibility]?filter[this.visibility](list):list;
            }
    
        }
    });
    function hashFn(){
        var hash = window.location.hash.slice(1);
        vm.visibility = hash;
    }
    hashFn();
    window.addEventListener('hashchange',hashFn);

CSS代码：其实之前是不提供css代码的，但有朋友可能说没有css代码效果出不来，所以为了避免占地方，就压缩代码也放上来了，如果您只是看思路就可以绕过下面的css代码了哈

body{margin:0;background-color:#fafafa;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif}h2{margin:0;font-size:12px}a{color:#000;text-decoration:none}input{outline:0}button{margin:0;padding:0;border:0;background:0;font-size:100%;vertical-align:baseline;font-family:inherit;font-weight:inherit;color:inherit;outline:0}ul{padding:0;margin:0;list-style:none}.page-top{width:100%;height:40px;background-color:#db4c3f}.page-content{width:50%;margin:0 auto}.page-content h2{line-height:40px;font-size:18px;color:#fff}.main{width:50%;margin:0 auto;box-sizing:border-box}.task-input{width:99%;height:30px;outline:0;border:1px solid #ccc}.task-count{display:flex;margin:10px 0}.task-count li{padding-left:10px;flex:1;color:#dd4b39}.task-count li:nth-child(1){padding:5px 0 0 10px}.action{text-align:center;display:flex}.action a{margin:0 10px;flex:1;padding:5px 0;color:#777}.action a:nth-child(3){margin-right:0}.active{border:1px solid rgba(175,47,47,0.2)}.tasks{background-color:#fff}.no-task-tip{padding:10px 0 10px 10px;display:block;border-bottom:1px solid #ededed;color:#777}.big-title{color:#222}.todo-list{margin:0;padding:0;list-style:none}.todo-list li{position:relative;font-size:16px;border-bottom:1px solid #ededed}.todo-list li:hover{background-color:#fafafa}.todo-list li.editing{border-bottom:0;padding:0}.todo-list li.editing .edit{display:block;width:506px;padding:13px 17px 12px 17px;margin:0 0 0 43px}.todo-list li.editing .view{display:none}.todo-list li .toggle{text-align:center;width:40px;height:auto;position:absolute;top:5px;bottom:0;margin:auto 0;border:0;-webkit-appearance:none;appearance:none}.toggle{text-align:center;width:40px;height:auto;position:absolute;top:5px;bottom:0;margin:auto 0;border:0;-webkit-appearance:none;appearance:none}.toggle:after{content:url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#ededed"stroke-width="3"/></svg>')}.toggle:checked:after{content:url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#bddad5"stroke-width="3"/><pathfill="#5dc2af"d="M7225L42712756l-44202034-52z"/></svg>')}.todo-list li label{white-space:pre-line;word-break:break-all;padding:15px 60px 15px 15px;margin-left:45px;display:block;line-height:1.2;transition:color .4s}.todo-list li.completed label{color:#d9d9d9;text-decoration:line-through}.todo-list li .destroy{display:none;position:absolute;top:0;right:10px;bottom:0;width:40px;height:40px;margin:auto 0;font-size:30px;color:#cc9a9a;margin-bottom:11px;transition:color .2s ease-out}.todo-list li .destroy:hover{color:#af5b5e}.todo-list li .destroy:after{content:'×'}.todo-list li:hover .destroy{display:block}.todo-list li .edit{display:none}.todo-list li.editing:last-child{margin-bottom:-1px}

在这个例子中，我学到了：

之前没有学过本地存储，经过这个案例，把本地存储storage详细的学习了一遍，这个昨天写过博客了[本地存储][Link 1]

利用hash值过滤数据，这个知识以前接触的也不多，学了之后发现很好用哈

*  获取hash值：window.location.hash.slice(1)（因为带"\#"号，所以需要将"\#"去掉，用到了slice方法）
 *  和hash相关的事件:hashchange

当然最终要的是学到了很多关于vue方面的知识，之前实现各种功能都是使用的原生js，一般都是操作dom的，但vue的思想就是通过改变数据，进而改变页面效果（这个总想操作DOM的思维需要改变）

其实只要把不会的几个知识点搞懂，利用vue很快就可以搞定这个案例了

[70]: /images/20220520/3389d0673a1a4b9f86b6124b0940c6c5.png
[70 1]: /images/20220520/cad8794eb95b488abff26f78d06c0797.png
[Link 1]: https://blog.csdn.net/lhjuejiang/article/details/81028081