正文
[vue案例的知识点]todo-list
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
文章的原材料来自于vue的官方示例：https://cn.vuejs.org/v2/examples/todomvc.html，我们在学习过程中，试着对其中的一些知识点进行记录：
一、浏览器数据存储，为了方便，此处将数据存储到客户端的缓存中，使用localStorage,他的主要api有
localStorage.getItem(key)和localStorage.setItem(key,value)
二、对于localStorage中的数据采取json数组形式保存，因此在保存value和获取时候需要先做json和string的转化，ECMA5提供了两个转化方法：
将指定格式数据转为json：JSON.parse(string);将json转为string：JSON.stringify(json)
var TODO_KEY="vue-todo";
var todoStorage={
fetch:function(){
var todos=JSON.parse(localStorage.getItem(TODO_KEY)||'[]')
todos.forEach(function(todo,index){
todo.id=index;
});
todoStorage.uid=todos.length;
return todos;
},
save:function(todos){
localStorage.setItem(TODO_KEY,JSON.stringify(todos));
}
}
三、使用hashchange监听浏览器地址栏变化
在单页应用同页跳转的情况下，添加监听window.addEventListener('hashchange',onHashChange)来获取地址栏的变化，然后可以使用window.location.hash来监听到地址栏的后缀变化，如果xxx.html#/all,此处值为"#/all",获取地址栏的值变化，此处主要根据地址栏的visibility过滤不同的内容
function onHashChange(){
var visibility=window.location.hash.replace(/#\/?/,'');
if(filters[visibility]){
app.visibility=visibility;
}else{
window.location.hash='';
app.visibility='all';
}
}
window.addEventListener('hashchange', onHashChange)
onHashChange()
三、json或者数组的过滤
如果要根据todos中的completed的状态过滤掉对应的子项，需要使用filter，如过滤掉非completed的项，是如下写法
function(todos){
return todos.filter(function(todo){
return !todo.completed;
});
四、json或者数组中的某一项，修改
如果要将todos的子项中的内容进行修改，需要使用forEach操作，如将所有completed修改为true，如下写法：
this.todos.forEach(function(todo){
todo.completed=true;
});
五、自定义vue标签
<input class="edit" type="text"
v-model="todo.title"
v-todo-focus="todo == editedTodo"
@blur="doneEdit(todo)"
@keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
在此input标签中，我们希望如果是正在编辑的todo时候，自动被选中，此处自定义了一个v-todo-focus标签，此标签的格式如下
directives: {
'todo-focus': function (el, value) {
if (value) {
el.focus()
}
}
}
指令定义，官方提供了五个钩子函数来供我们使用，分别代表了一个组件的各个生命周期
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
在这里其他几个都好理解，关于模板更新（update）这里，本人的理解是：该指令所在的模板有变化而需要重新渲染的时候，比如当一个输入框的model发生了变化就会触发指令。当然此处说的比较模糊，具体的还有待研究。
六、
v-cloak标签
vuejs做的界面加载过程中会闪现vue的变量，如{{msg}}，在标签加上v-cloak,在css定义可以解决此问题
[v-cloak] {
display: none;
}
<section class="main" v-show="todos.length" v-cloak>
这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。
在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见。问题来了，怎么才算是 ready 呢？这就需要了解 vuejs instance 的生命周期了
七、使用watch完成localStorage的写入操作
watch: {
todos: {
handler: function (todos) {
todoStorage.save(todos)
},
deep: true
}
},
在todo-list的应用中，整个操作过程中的增删改查操作很多，系统使用todos来保存每次操作后的结果，然后使用watch监控todos的变化，完成缓存的更新，注：deep表示深复制，即元素发生变化，也会导致他的变化
八、计算属性和观察属性
在todo-list有一个全选按钮，如果选中的时候，所有任务被标记为完成，如果任务全部完成，此标记也会被标记选中
1、以下是我的实现，对allDon进行watch，如果发生了改变，则修改所有任务状态，
allDone:function(){
this.allDone!=this.allDone;
var selDone=this.allDone;
this.todos.forEach(function(todo){
todo.completed=selDone;
});
}
同时在computed计算remaining的时候，根据remaining修改allDone
remaining:function(){
var remaining=filters.active(this.todos).length;
this.allDone=remaining===0?true:false;
return remaining;
}
2、以下是官方实现，使用computed的get和set操作allDone，减少了元素定义，也更为清晰
allDone: {
get: function () {
return this.remaining === 0
},
set: function (value) {
this.todos.forEach(function (todo) {
todo.completed = value
});
}
九、数组的操作-使用push和slice进行添加数组元素和删除数组元素，略
十、使用filters进行格式化，此处其实可以使用computed进行实现
filters: {
pluralize: function (n) {
return n === 1 ? 'item' : 'items'
}
},
十一、在做var app=new Vue()的时候，我们可以不用指定元素，等其他初始化完成后，最后一步再使用mount进行绑定
// mount
app.$mount('.todoapp')
十二、对于todo的编辑和展示切换
对于某一条todo，我们要求双击进行切换到编辑模式，回车切换到展示模式，我们的处理是：对于此todo，两种模式在页面上共存，通过method方法，改变对应的class，达到切换的目的。
<li v-for="todo in filteredTodos"
class="todo"
:key="todo.id"
:class="{ completed: todo.completed, editing: todo == editedTodo }">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
<button class="destroy" @click="removeTodo(todo)"></button>
</div>
<input class="edit" type="text"
v-model="todo.title"
v-todo-focus="todo == editedTodo"
@blur="doneEdit(todo)"
@keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
</li>
代码可以看到，显示todo的地方有一个div用于显示，一个input用于编辑，根据editedTodo来确定是否给li绑定editing的class，如果绑定后，class如下，显示edit，隐藏view
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 12px 16px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
