TodoMVC
TodoMVC1.0
实现的思路：
1.首先引入vue.js，创建vue的实例对象vm
2.在实例vm的data属性中设置遍历的数组，数组的每一项都是一个对象
3.使用v-for(item in list)遍历li标签，生成多个标签
4.通过item中的status的属性值来控值当前标签的选中状态（v-model="item.status"），同时控制着选中样式的改变（是否添加completed 类）
html的操作
<li :class="{completed : item.flag}" v-for="item in list">
<div class="view">
<input class="toggle" type="checkbox" v-model="item.flag">
<label>{{item.name}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
js的操作
;(function(window) {
// Your starting point. Enjoy the ride!
// 1.首先引入vue.js，创建vue的实例对象vm
// 2.在实例vm的data属性中设置遍历的数组，数组的每一项都是一个对象
// 3.使用v-for(item in list)遍历li标签，生成多个标签
// 4.通过item中的status的属性值来控值当前标签的选中状态（v-model="item.status"），同时控制着选中样式的改变（是否添加completed 类）
const vm = new Vue({
el:'#app',
data:{
list:[{id:1,name:'羽毛球',flag:true},{id:2,name:'篮球',flag:false},{id:3,name:'排球',flag:true},{id:4,name:'乒乓球',flag:true},{id:5,name:'桌球',flag:false},]
}
});
})(window)
TodoMVC1.1
删除操作
思路：
1.给删除按钮注册事件
2.获取删除的索引值
3.通过数组的splice方法删除
//html中
<button class="destroy" v-on:click="delItem(index)"></button>
//methods中
delItem(index) {
this.list.splice(index, 1);
},
添加操作
思路：
1.首先给输入框添加 v-model = "ItemName" 和 @click.enter = "addItem($event)"
2.给data中添加属性 ItemName ，同时在methods中添加方法addItem(e)
3.将数据添加到this.list中
4.非空校验
5.输入框清空
6.id自动获取并累加
//html
<input
class="new-todo"
placeholder="What needs to be done?"
//1.首先给输入框添加 v-model = "ItemName" 和 @click.enter = "addItem($event)"
v-model="ItemName"
@keyup.enter="addItem($event)"
autofocus>
//data
ItemName: '',
//methods
addItem(e) {
//添加操作
//1.首先给输入框添加 v-model = "ItemName" 和 @click.enter = "addItem($event)"
//2.给data中添加属性 ItemName ，同时在methods中添加方法addItem(e)
//4.非空校验
if(this.ItemName===""){
return ;
}
//6.id自动获取并累加
let id = this.list[this.list.length-1].id+1;
//3.将数据添加到this.list中
this.list.push({id:id,name:this.ItemName,status:false});
//5.输入框清空
this.ItemName = " ";
},
编辑操作
思路：
1.双击任务信息，出现编辑输入框
1.1给li添加类editing则可以显示编辑框，类名的设置与移除 edId === item.id
1.2修改编辑框中的默认值为item.name
1.3给label标签设置双击事件
1.4在methods中添加方法 showEdit显示编辑框 修改 edId 的值为 当前编辑的任务的id
1.5在menthod中添加方法 hideEdit隐藏编辑框 修改 edId 的值为 -1
2.在输入框中修改信息
3.修改完成，回车键关闭编辑输入框
//编辑实现的思路
//html
//1.1给li添加类editing则可以显示编辑框，类名的设置与移除 edId === item.id
<li :class="{completed : item.status,editing:edId ===item.id}" v-for="(item,index) in list">
//1.2修改编辑框中的默认值为item.name
<input class="edit" v-model="item.name" @keyup.enter="hideEdit()">
//1.3给label标签设置双击事件
<label @dblclick="showEdit(item.id)">{{item.name}}</label>
//methods
//1.双击任务信息，出现编辑输入框
//1.1给li添加类editing则可以显示编辑框，类名的设置与移除 edId === item.id
//1.2修改编辑框中的默认值为item.name
//1.3给label标签设置双击事件
// 显示编辑框
showEdit(id){
//1.4在methods中添加方法 showEdit显示编辑框 修改 edId 的值为 当前编辑的任务的id
this.edId = id;
},
//隐藏编辑框
hideEdit(){
//1.5在menthod中添加方法 hideEdit隐藏编辑框 修改 edId 的值为 -1
this.edId = -1;
},
footer的显示和未完成条数
思路：
- 根据任务数组的长度决定尾部是否显示 true为显示，false为隐藏
- 计算当前还有多少未完成任务 filter过滤符合条件的元素，求其长度即可
//html
//根据任务数组的长度决定尾部是否显示
<footer class="footer" v-show="isShowFooter">
//计算当前还有多少未完成任务
<span class="todo-count"><strong>{{leftCont}}</strong> item left</span>
//computed
//根据任务数组的长度决定尾部是否显示
isShowFooter(){
return this.list.length>0;
},
//计算当前还有多少未完成任务
leftCont(){
return this.list.filter(item=>!item.status).length;
},
清除所有已完成的任务
思路：
1.给按钮添加v-if属性，通过数组的some方法判断是否有已完成任务 ，true显示，false隐藏
2.给清除的按钮注册点击事件，通过数组的filter方法，过滤掉已完成的任务，然后将过滤后的结果赋值给this.list
//html
//给按钮添加v-if属性
//清除的按钮注册点击事件
<button class="clear-completed" v-if="isClear" @click="clearOk">Clear completed</button>
//methods
//当点击了清除已完成的按钮，将未完成的数据过滤出来，并赋值给之前的数组
clearOk(){
this.list = this.list.filter(item=>!item.status);
}
//computed
//判断当前是否还有已完成的任务
isClear(){
return this.list.some(item=>item.status);
}
