IMWeb训练营作业——todo list

Wendy_1510

于 2017-04-20 09:40:39 发布

阅读量285

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Wendy_1510/article/details/70254983

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

通过这两天对todo list实例的学习与实践，对vue有了进一步的了解和认识。这次作业主要实现的功能包括：任务的添加、删除、编辑和选定，以及对所有任务、已完成任务和未完成任务的显示功能。具体实现代码如下：

HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>todo list</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="header">
    <p>任务计划列表</p>
</div>
<div id="main">
    <div id="addTask">
        <p>添加任务</p>
        <input id="inputInfo" type="text" placeholder=""
               @keyup.enter="addTodo"
               v-model="todo"
        />
        <ul v-show="list.length">
            <li><a href="#finished">完成的任务</a></li>
            <li><a href="#unfinished">未完成的任务</a></li>
            <li><a href="#all">所有任务</a></li>
            <li id="taskUndo">{{noCheckedLength}}个任务未完成</li>
        </ul>
    </div>
    <div id="taskList">
        <p>任务列表</p>
        <span v-show="!list.length">还未添加任何任务</span>
        <ul>
            <li  v-for="item in filteredList" :class="{completed:item.isChecked,editing:item===edtorTodos }">
                <div>
                    <input type="checkbox" class="chooseBox"  v-model="item.isChecked"   />
                    <label @dblclick="edtorTodo(item)">{{item.title}}</label>
                    <div id="destroy" @click="deleteTodo">X</div>
                </div>
                <input class="edit" type="text" v-model="item.title" v-focus="item===edtorTodos"
                        @blur="edtorTodoed"
                        @keyup.enter="edtorTodoed"
                        @keyup.esc="cancelTodo(item)"
                        />
            </li>
        </ul>
    </div>
</div>
<script src="app.js"></script>
</body>
</html>

JS代码：

var store={
    save(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
        return JSON.parse(localStorage.getItem(key))||[];
    }
};
var list=store.fetch("MyPlanning");
var vm=new Vue({
    el: "#main",
    data: {
        list: list,
        todo:"",
        edtorTodos:'' ,  //正在编辑的内容
        beforeTodos:'',  //记录正在编辑的数据的title
        visibility:"all"
    },
    watch:{
        list:
        {
            handler:function(){
                store.save("MyPlanning",this.list);
            },
            deep:true
        }
    },
    computed:{
        noCheckedLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked;
            }).length;
        },
        filteredList:function(){
            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;
                    });
                }
            };
            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){   //编辑任务
            this.beforeTodo=todo.title;
            this.edtorTodos=todo;

        },
        edtorTodoed(){
            this.edtorTodos='';
        },
        cancelTodo(todo){
            todo.title=this.beforeTodo;
            this.edtorTodos='';
        }
    },
    directives:{
        "focus":{
            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.通过v-for指令完成对一组数组的选项列表的渲染

2.通过v-on指令来监听DOM事件的触发（简写为@）

3.事件修饰符的使用（如：.enter .ese .键值等）

4.通过v-model完成对数据的双向绑定

5.通过v-show指令完成条件渲染，即根据表达式的值来判断显示还是隐藏元素

6.通过v-bind指令动态绑定class，在条件满足时为元素添加类名显示不同的样式（v-bind简写为“：”）

7.自定义指令，在选项对象中添加directives属性完成对自定义指令的定义

8.通过计算属性可以完成对数据的过滤筛选，在选项对象的computed属性中定义

9.存取localStorage中的数据

10.通过监控哈希值对list数组进行筛选

最后运行的效果图：

Wendy_1510

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IMWeb训练营作业——todo list

通过这两天对todo list实例的学习与实践，对vue有了进一步的了解和认识。这次作业主要实现的功能包括：任务的添加、删除、编辑和选定，以及对所有任务、已完成任务和未完成任务的显示功能。具体实现代码如下：HTML代码：html>html>head lang="en"> meta charset="UTF-8"> link rel="stylesheet" href
复制链接

扫一扫