1. 程式人生 > >IMWeb訓練營作業

IMWeb訓練營作業

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任務計劃列表</title>
<link rel="stylesheet" href="./css.css">
<script src="./vue.js"></script>
<script src="./app.js"></script>
</head>
<body>
<h3 class="title">任務計劃列表</h3>

<div id="main">
<h4 >新增任務:</h4>
<input type="text" placeholder="提示:回車即可新增任務" class="task-input" v-model="todo" v-on:keyup.enter="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="list">任務列表:</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!filterdList.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 type="checkbox" class="toggle" v-model="item.isChecked" />
<label @dblclick="edtorTodo(item)">{{item.title}}</label>
                        <button class="destroy" @click="deleteTodo(item)"></button>
                    </div>
                        <input 
                         type="text" 
                         class="edit"
                         v-model="item.title"
                         v-focus="edtorTodos===item"
                         @blur="edtorTodoed(item)"
                         @keyup.13="edtorTodoed(item)"
                         @keyup.esc="cancelTodo(item)"
                        />
                     
</li>
</ul>
</div>


</div>
</body>
</html>


js:


//本地存取localStorage中資料
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);