IMWeb训练营作业--todolist

来源：互联网发布：林彪为什么出逃知乎编辑：程序博客网时间：2024/05/16 11:25

最近两天忙的我。。。。没有时间写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);

0 0