【IMWeb训练营作业】【Vue】TodoList

核心代码

index.html

    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input 
            placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" 
            class="task-input" 
            type="text"
            v-model="todo"
            @keyup.enter="addTodo" //添加任务
        />
        <ul class="task-count">
            <li>{{uncheckedTodo}}个任务未完成</li>
            <li class="action">
                <a :class="{active:hash==='all'}" href="#all">所有任务</a>
                <a :class="{active:hash==='unfinished'}" href="#unfinished">未完成的任务</a>
                <a :class="{active:hash==='finished'}" href="#finished">完成的任务</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" 
                    :class="{completed:item.isChecked,editing:editingTodo===item}" 
                    v-for="item in FilterList"
                    @dblclick="addEditingTodo(item)" //编辑任务
                >
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="item.isChecked"/>
                        <label>{{item.title}}</label>
                        <button 
                            class="destroy" 
                            @click="deleteTodo(item)" //删除任务
                        >
                        </button> 
                    </div>
                    <input 
                        class="edit" 
                        type="text" 
                        v-model="item.title"
                        v-focus="item === editingTodo"
                        @keyup.enter="EditedTodo" //完成编辑
                        @blur="EditedTodo" //完成编辑
                        @keyup.esc="cancelTodo(item)" //取消编辑
                    />
                </li>
            </ul>
        </div>
    </div>

app.js

// localStorage处理数据
var store = {
    save(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
        return JSON.parse(localStorage.getItem(key)) || [];
    }
}

//获取数据
var list = store.fetch('vue-todo');
var filter = {
    all(list){
        return list
    },
    unfinished(list){
        return list.filter(function(item){
             return !item.isChecked;
        });
    },
    finished(list){
        return list.filter(function(item){
             return item.isChecked;
        });
    }
} ;

var vm = new Vue({
    el:'.main',
    data:{
        list:list,
        todo:"",
        editingTodo:"",
        BeforeTitle:"",
        hash:"all"
    },
    watch:{ 
        list:{
            handler(){
                store.save('vue-todo',this.list)
            },
            deep:true
        }
    },
    computed:{
        uncheckedTodo(){
            return this.list.filter(function(item){
                return !item.isChecked;
            }).length;
        },
        FilterList(){
            return filter[this.hash]?filter[this.hash](this.list):list;
        }
    },
    methods:{
        addTodo(){
            this.list.push({
                title:this.todo,
                isChecked:false
            });
            this.todo="";
        },
        deleteTodo(todo){
            var index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        addEditingTodo(todo){
            this.editingTodo = todo;
            this.BeforeTitle = todo.title;
        },
        EditedTodo(){
            this.editingTodo = '';
        },
        cancelTodo(todo){
            todo.title = this.BeforeTitle;
            this.BeforeTitle="";
            this.editingTodo = '';
        }
    },
    directives:{
        "focus":{
            update(el,binding){
                if(binding){
                    el.focus();
                }
            }
        }
    }
});

//路由哈希跳转
function hashChangeHandler(){
    var hash = window.location.hash.slice(1);
    vm.hash = hash;
}
window.addEventListener('hashchange',hashChangeHandler)

运行效果

https://code.hcharts.cn/public/VVpm2X