第4章 TodoList 案例
上市产品： ToDoList 、奇妙清单 、滴答清单
学习练手项目 ： TodoMVC 、 Vue官方示例
为什么选择这样的案例：
产品功能简洁，需求明确，所需知识点丰富；实现基本功能容易，涵盖所学基础知识；而可扩展性强，完善所有功能比较复杂，所需技术众多；在学习中，可以灵活取舍；
4.1 项目初始化
在项目目录中执行 npm install 命令，下载所需静态资源 ; 将Vue.js框架代码，复制到 js 目录，在index.html中引入 vue : <script src="./js/vue.js"></script>
同时 在 index.html 最下方，项目引入了app.js ; 而我们要写的 vuejs 代码，都放在这个文件中；
4.2 数据遍历
const list_data = [
{id:1,title:'吃饭',stat:true},
{id:2,title:'睡觉',stat:false},
{id:3,title:'打豆豆',stat:true},
]
new Vue({
el:'#todoapp',
data:{
// list_data:list_data,
list_data,// es6属性简写
}
})
<ul class="todo-list">
<li v-for="(val,key) in list_data">
<div class="view">
<input class="toggle" type="checkbox" v-model="val.stat">
<label>{{val.title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
</li>
</ul>
4.3 展示无数据状态
标签及内容都是在 section footer 两个标签中的，当 list_data 中没有数据时，我们只需要隐藏这个两个标签即可：
<section v-if="list_data.length" class="main">
……
</section>
<footer v-if="list_data.length" class="footer">
……
</footer>
两个标签都有 v-if 判断 ，因此我们可以使用一个 div 包裹两个标签，使 div 隐藏即可：
<div v-if="list_data.length">
<section class="main">
……
</section>
<footer class="footer">
……
</footer>
</div>
如果有内容，那么 DOM 书中就会多出一个 div 标签，那么我们可以选择使用 template (vue中的模板标识)，有内容时，浏览器渲染不会有此节点；
<template v-if="list_data.length">
<section class="main">
……
</section>
<footer class="footer">
……
</footer>
</template>
4.3 添加任务
绑定 enter 键盘事件:
<input @keyup.enter="addTodo" class="new-todo" placeholder="请输入" autofocus>
new Vue({
el:'#todoapp',
data:{
// list_data:list_data,
list_data,// es6属性简写
},
//添加事件处理器
methods:{
// addTodo:function(){}
// 简写形式
addTodo(){
console.log(123);
}
}
})修改代码完成任务添加：
methods: {
// 添加任务
// addTodo:function(){}
// 简写形式
addTodo(ev) {
// 获取当前触发事件的元素
var inputs = ev.target;
// 获取value值，去除空白后判断，如果为空，则不添加任务
if (inputs.value.trim() == '') {
return;
}
// 组装任务数据
var todo_data = {
id: this.list_data.length + 1 + 1,
title: inputs.value,
stat: false
};
// 将数据添加进数组
this.list_data.push(todo_data);
// 清空文本框内容
inputs.value = '';
}
}4.4 任务的全选与反选
点击文本框左边的下箭头，实现全选和反选操作
为元素绑定点击事件：
<input @click="toggleAll" id="toggle-all" class="toggle-all" type="checkbox">
添加处理程序：
toggleAll(ev){
// 获取点击的元素
var inputs = ev.target;
// console.log(inputs.checked);
// 循环所有数据为状态重新赋值
// 因为每个元素的选中状态都是使用 v-model 的双向数据绑定，
// 因此 数据发生改变，状态即改变，状态改变，数据也会改变
for(let i=0;i<this.list_data.length;i++){
this.list_data[i].stat = inputs.checked;
}
}4.5 完成任务
如果任务完成，状态改为选中， li 的 class 属性为 completed 时文字有中划线；
<li v-for="(val,key) in list_data" v-bind:class="{completed:val.stat}">4.6 删除任务
绑定点击事件，将当前索引值传入事件处理程序：
<button @click="removeTodo(key)" class="destroy"></button>
按照索引，删除相应的数据：
removeTodo(key){
this.list_data.splice(key,1);
},4.7 删除已完成的任务
绑定事件
<button @click="removeAllDone" class="clear-completed">Clear completed</button>
循环遍历所有数据，删除已被标记为完成的任务：
removeAllDone(){
for(let i=0;i<list_data.length;i++){
if(list_data[i].stat == true){
this.list_data.splice(i,1);
}
}
}循环的代码看起来很不舒服, Array.prototype.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
var arr = [1,4,6,2,78,23,7,3,8];
// 原始写法
// var new_arr = arr.filter(function(v){
// // if(v>8){
// // return true;
// // }
// return v>8;
// })
// 箭头函数写法
// var new_arr = arr.filter((v)=>{
// return v>8;
// })
// 精简写法
var new_arr = arr.filter((v)=> v>8);
console.log(new_arr);
修改项目代码：
removeAllDone(){
// 原始循环判断用法
// for(let i=0;i<list_data.length;i++){
// if(list_data[i].stat == true){
// this.list_data.splice(i,1);
// }
// }
// 上面是循环删除符合条件的数据
// 下面是保留不符合条件的数据
// 原始标准库对象方法
// this.list_data = this.list_data.filter(function(v){
// if(v.stat == false){
// return true;
// }
// })
// 箭头函数方法
// this.list_data = this.list_data.filter(function(v){
// return !v.stat;
// })
// 精简方法
this.list_data = this.list_data.filter((v)=>!v.stat);
},TodoList案例暂时告一段落，我们并没有将产品做完，因为我们需要用到其他知识了；
