【IMWeb训练营作业】todo-list

最终效果图如下:

1.HTML结构如下：

<div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" class="task-input" type="text" v-model="todo" @keyup.enter="addTodo" />
        <ul class="task-count" v-show="list.length">
            <li>{{unfinishedTodo}}个任务未完成</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" v-for="item in filteredList" :class="{completed: item.isChecked, editing: currentTodo === item}">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="item.isChecked" />
                        <label @dblclick="editingTodo(item)">{{item.title}}</label>
                        <button class="destroy" @click="delTodo(item)"></button>
                    </div>
                    <input class="edit" type="text" v-focus="currentTodo === item" v-model="item.title" @keyup.enter="confirmTodo(item)" @blur="confirmTodo(item)" @keyup.esc="cancelTodo(item)" />
                </li>
            </ul>
        </div>
    </div>

2.js代码如下：

var store = {
    save: function(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    fetch: function(key) {
        return JSON.parse(localStorage.getItem(key)) || [];
    }
};
var filter = {
    all: function(list) {
        return list;
    },
    unfinished: function(list) {
        return list.filter(function(item) {
            return item.isChecked;
        });
    },
    finished: function(list) {
        return list.filter(function(item) {
            return !item.isChecked;
        });
    }
};
var list = store.fetch('tank-task');
var vm = new Vue({
    el: '.main',
    data: {
        list: list,
        todo: '',
        currentTodo: null,
        currentTodoTitle: '',
        visibility: 'all' // 通过这个属性值的变化对数据进行筛选
    },
    methods: {
        addTodo: function() {
            var createTodo = function(title) {
                var todo = {};
                todo.title = title;
                todo.isChecked = false;
                return todo;
            };
            if (this.todo) {
                this.list.push(createTodo(this.todo));
                this.todo = '';
            }
        },
        editingTodo: function(todo) {
            this.currentTodo = todo;
            this.currentTodoTitle = todo.title;
        },
        confirmTodo: function(todo) {
            if (todo.title) {
                this.currentTodoTitle = '';
                this.currentTodo = null;
            } else {
                todo.title = this.currentTodoTitle;
                alert('工作内容必须填写才能保存');
            }
        },
        cancelTodo: function(todo) {
            todo.title = this.currentTodoTitle;
            this.currentTodoTitle = '';
            this.currentTodo = null;
        },
        delTodo: function(todo) {
            var idx = this.list.indexOf(todo);
            if (idx > -1) {
                this.list.splice(idx, 1);
            }
        },
        filterList: function(type) {
            this.listType = type || '';
        }
    },
    watch: {
        list: {
            handler: function() {
                store.save('tank-task', this.list);
            },
            deep: true
        }
    },
    computed: {
        unfinishedTodo: function() {
            return this.list.filter(function(item) {
                return !item.isChecked;
            }).length;
        },
        filteredList: function() {
            // 过滤的时候有三种情况

            return filter[this.visibility] ? filter[this.visibility](this.list) : this.list;
        }
    },
    directives: {
        focus: {
            update: function(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.从该实例中可以学习到几个很有趣的概念，其中计算属性 和 指令两个概念比较有趣。感觉用得好可以简化很多操作并且提升用户体验。

2.学习还是要从基础一些的例子学起。这样自信心会大点。

3.vue有个vue-cli。这个跟着例子改可以改出来一些东西，但里面的配置是如何配置的就一头雾水了。还是要由浅入深。

update at 2017-4-22

上面代码经过第二次修改，最终效果与老师的最终效果是一样的。