【IMWeb训练营作业】：Vue清单应用

【IMWeb训练营作业】：Vue清单应用
vue是一套构建用户界面的渐进式框架,它具有易用，灵活，高性能等特点，其核心是响应的数据绑定和组合的视图组件。最近，跟随着腾讯课堂十天加薪训练营关于vue的课程进度，结合vuejs官方文档的说明，对vue有了大致的了解，今天通过使用vue完成一个清单应用功能，来加深对vue指令，事件，模板语句等的理解，最终效果如图所示：

清单应用的核心代码如下：
html部分：

<div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input 
            placeholder="e.g.我的任务计划    提示：+回车即可添加任务"
            class="task-input" 
            type="text"
            v-model="todo"
            v-on:keyup.13="addTodo"
        />
        <ul class="task-count" v-show="list.length">
            <li>{{noCheckeLength}}个任务未完成</li>
            <li class="action">
                <a  href="#all" :class="{active:visibility === 'all'}">所有任务</a>
                <a href="#unfinished" :class="{active:visibility === 'unfinished'}">未完成的任务</a>
                <a href="#finished" :class="{active:visibility === '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">
                <li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in filteredList" >
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="item.isChecked" />
                        <label @dblclick="edtorTodo(item)">{{ item.title }}</label>
                        <button class="destroy" @click="deleteTodo(item)"></button>
                    </div>
                    <input 
                        v-foucs="edtorTodos === item" 
                        class="edit" 
                        type="text" 
                        v-model = "item.title"
                        @blur="edtorTodoed(item)"
                        @keyup.13="edtorTodoed(item)"
                        @keyup.esc="cancelTodo(item)"
                    />
                </li>
            </ul>
        </div>
    </div>

js部分：

//存取localStorage中的数据

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

/*var list = [
    {
        title:"vue.js",
        isChecked:true // 状态为false，为不选中  任务未完成
    },
    {
        title:"react.js",
        isChecked:true   //状态为true，为选中    任务完成
    }
];*/

//取出所有的值
var list = store.fetch("miaov-new-class");

//过滤的时候有三种情况 all finished unfinished

var filter = {
    all:function(list){
        return list;
    },
    finished:function(list){
        return list.filter(function(item){
            return item.isChecked;
        })
    },
    unfinished:function(){
        return list.filter(function(item){
            return !item.isChecked;
        })
    }
}

var vm = new Vue({
    el:".main",
    data:{
        list:list,
        todo:"",
        edtorTodos:'',  //记录正在编辑的数据
        beforeTitle:'', //记录正在编辑的数据的title
        visibility: "all" //通过这个属性值的变化对数据进行筛选
    },
    watch:{
        /*list:function(){  //监控list这个属性，当这个属性对应的值发生变化就会执行函数
            store.save("miaov-new-class",this.list);
        }*/
        list:{
            handler:function(){
                store.save("miaov-new-class",this.list);
            },
            deep:true
        }
    },
    computed:{
        noCheckeLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked
            }).length
        },
        filteredList:function(){            
            //找到了过滤函数，就返回过滤后的数据；如果没有返回所有数据
            return filter[this.visibility] ? filter[this.visibility](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);

        },
        edtorTodo(todo){  //编辑任务
            console.log(todo);
            //编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title
            this.beforeTitle = todo.title;

            this.edtorTodos = todo;



        },
        edtorTodoed(todo){ //编辑任务成功
            this.edtorTodos = '';
        },
        cancelTodo(todo){  //取消编辑任务

            todo.title = this.beforeTitle;

            this.beforeTitle = '';

            //让div显示出来，input隐藏
            this.edtorTodos = '';
        }
    },
    directives:{
        "foucs":{
            update(el,binding){
                if(binding.value){
                    el.focus();
                }
            }
        }
    }
});

function watchHashChange(){
    var hash = window.location.hash.slice(1);

    vm.visibility = hash;

}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);

该清单应用的功能及实现方法如下：
1.添加任务
为input表单使用v-model指令，实现双向数据绑定，并同时添加@keyup.enter事件，当按下enter键时，触发methods对象中相应事件处理函数，将input表单中的value推入到列表渲染数组，此处使用vue的push（）方法，该方法具有自动进行视图更新功能；
2.任务完成标记；
3.删除任务
vue的splice（）方法，在删除数组中特定项的同时，自动进行视图更新
4.编辑任务
绑定事件@dblclick： 双击任务自动获取焦点（获取焦点通过自定义指令实现）
input失去焦点时，编辑成功 @blur或 @keyup.enter
取消编辑，修改失败，@keyup.esc
5.按钮控制不同状态任务列表的显示
6.计算属性显示未完成任务个数
7.localstorage任务列表本地存储