【IMWeb训练营作业】vuejs简单任务列表实现

来源：互联网发布：软件系统维护收费标准编辑：程序博客网时间：2024/05/29 18:39

【IMWeb训练营作业】vuejs简单任务列表实现

主要包括如下内容：

任务内容
核心代码
演示效果

任务内容

增删便签任务
编辑便签任务
watch深度监控数据
利用hash过滤数据

核心代码

所有代码托管在 https://git.oschina.net/marknings/vuelearn1.git

vm代码如下所示

var store = {    save(key,value){        localStorage.setItem(key,JSON.stringify(value));    },    fetch(key){        return JSON.parse(localStorage.getItem(key)) || [];    }}var list = store.fetch("todolist");var filter = {    all:function(list){        return list;    },    finished:function(list){        return list.filter(function(item){            return item.isChecked;        })    },    unfinished:function(list){        return list.filter(function(item){            return !item.isChecked;        })    }}var vm = new Vue({    el:".main",    data:{        list:list,        todo:"",        editortodos:"",        beforeContent:"",        visibility:"all"  //all finished unfinished    },    watch:{        /*list:function(){            store.save("todolist",this.list);        }*/        list:{            handler:function(){                store.save("todolist",this.list);            },            deep:true        }    },    methods:{        addTodo(event){            this.list.push({                content:this.todo,                isChecked:false            });            this.todo = "";        },        removeTodo(todo){            var index = this.list.indexOf(todo);            this.list.splice(index,1);        },        editorTodo(todo){            this.beforeContent = todo.content;            this.editortodos = todo;        },        editorTodoend(todo){            this.editortodos = "";        },        cancelTodo(todo){            todo.content = this.beforeContent;            this.editortodos = "";        }    },    directives:{        "foucs":{            update(el,binding){                if (binding.value) {                    el.focus();                }            }        }    },    computed:{        noCheckLength:function(){            return this.list.filter(function(item){                return !item.isChecked            }).length;        },        filterList:function(){            return filter[this.visibility]?filter[this.visibility](list):list;        }    }});function watchHashChange(){    var hash = window.location.hash.slice(1);    vm.visibility = hash;}watchHashChange();window.addEventListener("hashchange",watchHashChange);

html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>宁土文vue任务计划</title>    <link rel="stylesheet" type="text/css" href="index.css" />          <link rel="stylesheet" type="text/css" href="./lib/bootstrap/3.3.0/css/bootstrap.css"/></head><body >   <div class="main container">       <div class="row">        <nav class="navbar navbar-default" role="navigation">        <div class="container-fluid">        <div class="navbar-header">            <button type="button" class="navbar-toggle" data-toggle="collapse"                    data-target="#example-navbar-collapse">                <span class="sr-only">切换导航</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <a class="navbar-brand" href="#all">宁土文任务计划列表</a>        </div>        <div class="collapse navbar-collapse" id="example-navbar-collapse">            <ul class="nav navbar-nav">                <li class="active"><a href="#all">所有任务</a></li>                <li ><a href="#unfinished">未完成任务</a></li>                <li><a href="#finished">已完成任务</a></li>            </ul>        </div>        </div>    </nav></div>    <div class="row">            <span>添加任务：</span>    </div>    <div class="row">        <input @keyup.enter="addTodo"                           v-model="todo" placeholder="提示：按回车添加" class="form-control"  />    </div>    <br/>    <br />    <div class="row mt50">        <span>任务列表：</span>        <span v-show="list.length"> {{noCheckLength}}个未完成任务</span>     </div>     <div class="row">         <table class="table table-bordered">            <thead>                <tr>                                      <th class="text-center" width="15%">完成</th>                  <th width="70%">任务</th>                  <th class="text-center" width="15%">删除</th>                </tr>              </thead>              <tbody>                <tr :class="{ completed:item.isChecked,editing:item === editortodos}" v-for="item in filterList">                  <td class="text-center">                    <input type="checkbox" name="" v-model="item.isChecked">                  </td>                  <td>                        <label v-if="editortodos !== item" v-on:dblclick="editorTodo(item)">{{ item.content }}</label>                        <input v-if="editortodos === item"                                 type="text"                                 class="form-control"                                name=""                                 v-model="item.content"                                 v-foucs="editortodos === item"                                @blur="editorTodoend(item)"                                @keyup.enter = "editorTodoend(item)"                                @keyup.esc = "cancelTodo(item)"                            />                  </td>                  <td class="text-center">                        <button class="btn btn-primary" @click="removeTodo(item)">删除</button>                  </td>                </tr>                <tr v-if="!list.length">                    <td colspan="3">                        <span v-show="!list.length">还未添加任何任务</span>                    </td>                </tr>              </tbody>         </table>    </div></div>    <script type="text/javascript" src="./lib/jquery/1.11/jquery.js"></script>    <script type="text/javascript" src="./lib/bootstrap/3.3.0/js/bootstrap.js"></script>    <script type="text/javascript" src="./lib/vue/2.2.6/vue.js"></script>    <script type="text/javascript" src="index.js"></script></body></html>

演示效果

PC端效果
手机端效果
网上演示url

http://vueimweb.oschina.mopaasapp.com/

1 0