IMWeb训练营作业--todolist

最新推荐文章于 2017-04-22 01:07:07 发布

煮一壶江湖好酒

最新推荐文章于 2017-04-22 01:07:07 发布

阅读量331

点赞数 1

本文链接：https://blog.csdn.net/qq_20974467/article/details/70256861

版权

最近两天忙的我。。。。没有时间写CSS了，只能先上车后补票了，以下是最终效果图：

这里写图片描述

以下是页面 HTML 代码，通过 <script> 引入 Vue.js 开发版本：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <meta charset='utf-8'>
    <title>任务计划列表</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>
<body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input
            placeholder="按回车键即可添加任务"
            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  v-bind:class="{active: visibility == 'all'}" href="#all">所有任务</a>
                <a  v-bind:class="{active: visibility == 'unfinished'}" href="#unfinished">未完成的任务</a>
                <a  v-bind:class="{active: visibility == 'finished'}" href="#finished">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">

            <span class="no-task-tip" v-show="!filteredList.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>
    <script src="./lib/vue.js"></script>
    <script src="./todo.js"></script>
</body>
</html>

接下来是核心的 JavaScript 代码，用于处理todolist任务列表的增删改查：

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

    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 list = store.fetch("miaov-new-class");
    var vm = new Vue({
        el: ".main",
        data: {
            list: list,
            todo: "",
            edtorTodos: '',
            beforeTitle: '',
            visibility: "all"
        },
        watch: {
            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](this.list) : this.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.beforeTitle = todo.title;

                this.edtorTodos = todo;



            },
            edtorTodoed(todo) {
                this.edtorTodos = '';
            },
            cancelTodo(todo) {

                todo.title = this.beforeTitle;

                this.beforeTitle = '';

                this.edtorTodos = '';
            }
        },
        directives: {
            "foucs": {
                update(el, binding) {
                    if (binding.value) {
                        el.focus();
                    }
                }
            }
        }
    });

    function watchHashChange() {
        var hash = window.location.hash.slice(1);
        vm.visibility = hash||'all';  
    }

    window.onload=watchHashChange();
    window.addEventListener("hashchange", watchHashChange);

煮一壶江湖好酒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IMWeb训练营作业--todolist

最近两天忙的我。。。。没有时间写CSS了，只能先上车后补票了，以下是最终效果图：以下是页面 HTML 代码，通过 <script> 引入 Vue.js 开发版本：<!DOCTYPE html><html lang="zh-cmn-Hans"> <meta charset='utf-8'> <title>任务计划列表</title> <link rel="stylesheet
复制链接

扫一扫