【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

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