【IMWeb训练营作业】Vue框架 todolist

---

主要代码：

页面主要代码：

        <div class="mainContainer" id="todos">
            <h1>添加任务</h1>
            <input type="text" class="addText" v-model="todoItem" @keyup.13="enterTodo"  @blur="enterTodo" placeholder="例如：吃饭睡觉打豆豆； 提示：回车即可添加任务" />
            <div class="btngroup clearfix">

                <span class="pull-left">{{noCheckedLength}}个任务未完成</span>
                <div class="clearfix pull-right" >
                    <a href="#all" :class="{active:listType === 'all'}">所有任务</a>
                    <a href="#unfinished" :class="{active:listType === 'unfinished'}">未完成的任务</a>
                    <a href="#finished" :class="{active:listType === 'finished'}">完成的任务</a>
                </div>
            </div>
            <h1 >任务列表</h1>
            <div class="listStatus" v-show="!list.length">
                还没有添加任何任务
            </div>
            <ul class="taskList">
                <li class=" clearfix " :class="{checked:item.isChecked,editing:editItem === item}"  v-for="item in filterList">
                    <span class="check pull-left" @click="checkItem(item)"></span>
                    <span class="title pull-left" @dblclick="editTodo(item)">{{item.title}}</span>
                    <input type="text" v-focus="editItem === item" class="titleText" v-model="editItem.title" @keyup.13="edited(item)"  @blur="edited(item)"/>
                    <span class="deletbtn pull-right" @click="deleteItem(item)"> </span>
                </li>
            </ul>
        </div>

js主要代码：

window.onload = function(){
    var list = storage.fetch("todolist");
    var vm  = new Vue({
        el:"#todos",
        data:{
            list:list,//所有数据
            todoItem:'',//新增的数据
            editItem:'',
            listType:'all'//list的状态 
        },
        methods:{
            //新增todo
            enterTodo:function(){

                if(this.todoItem){
                    this.list.push({
                        title:this.todoItem,
                        isChecked:false
                    });
                    this.todoItem = '';
                }

            },
            //删除todo
            deleteItem:function(obj){
                var index = this.list.indexOf(obj);
                this.list.splice(index,1)
            },
            //check todo
            checkItem:function(obj){
                var index = this.list.indexOf(obj);
                this.list[index].isChecked = !obj.isChecked;
            },
            //编辑toto

            editTodo:function(obj){
                this.editItem = obj;
            },
            //编辑后保存todo
            edited:function(){
                this.editItem ="";
            }
        },
        watch:{
            list:{
                handler:function(){
                    console.log(this.list);
                    storage.save("todolist",this.list);
                },
                deep:true
            }
        },
        directives:{
            "focus":{
                update:function(el,binding){
                    if(binding.value){
                        el.focus();
                    }
                }
            }
        },
        computed:{
            noCheckedLength:function(){
                var len = this.list.filter(function(listItem){
                    return !listItem.isChecked;
                }).length;
                return len;
            },
            filterList:function(){
                if(this.listType == "unfinished"){
                    return this.list.filter(function(item){
                        return !item.isChecked;
                    })
                }
                else if(this.listType == "finished"){
                    return this.list.filter(function(item){
                        return item.isChecked;
                    })
                }else{
                    return this.list;
                }
            }
        }
    });
    watchHash();
    window.addEventListener("hashchange",watchHash);
    function watchHash(){
        var hash = window.location.hash.slice(1);

        vm.listType = hash?hash:'all';
    }
}


var storage = {
    save:function(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    fetch:function(key){
        return JSON.parse(localStorage.getItem(key))||[];
    }
}

主要页面截图：
1.所有任务列表

2.未完成任务列表

3.任务编辑页面