Vue项目TODO-LIST-VIEW_vue list-view

todo-list-view

1 项目内容展示

1.1 首先在app.js中新建Vue实例，挂载结点，构建数据内容模板。数据内容包括（id，数据内容，完成状态）：

todos:[
	    {id: 1, title: '示例内容1' , completed: true},
		{id: 2, title: '示例内容2' , completed: false},
		{id: 3, title: '示例内容3' , completed: false} 
]
1
2
3
4
5

1.2 在index.html中书写内容展示的功能，首先循环遍历数组，其次使用：key绑定数据ID，设置事件完成状态：class = "{completed: todo.completed}"，最后在相应位置书写插值表达式。

<li v-for="todo in todos" :key="todo.id" :class="{completed: todo.completed}">
	<div class="view">
		<input class="toggle" type="checkbox" v-model="todo.completed">
		<label>{{todo.title}}</label>
		<button class="destroy"></button>
	</div>
</li>
1
2
3
4
5
6
7

1.3 有数据和无数据状态的展示。通过v-show 进行数据的显示和隐藏。

v-show与v-if区别
v-show 用于数据的显示和隐藏，v-if用于数据的创建与销毁
1
2

依据数组中数据的有无，进行其余事项的展示和隐藏
<section class="main" v-show="todos.length">
<footer class="footer" v-show="todos.length">
1
2
3

2 数据个数的展示。

2.1 通过数组方法filter()来筛选符合条件的数据

用到了语法糖

//普通写法
remaining: function(){
	return this.todos.filter(function(todo){
		   return !todo.completed;
	}).length;
}
computed:{
    //展示未完成数据的个数
    remaining: function(){
		return this.todos.filter(todo => !todo.completed).length;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

3 事件的双向数据绑定

3.1 通过单个点击事件来反馈到整个全选按钮

使用computed中的get方法得到数据的反馈

allDone: {
	get: function(){
	    return this.remaining === 0;
	}
}
1
2
3
4
5

3.2 通过全选按钮选择全部数据

使用computed中的set方法设置全选

allDone:{
	set: function(value){
	//value 全部选框的状态
		this.todos.forEach(todo => {
			todo.completed = value;
			})
	}
}
1
2
3
4
5
6
7
8

3.3 数组的遍历以及数组的过滤

通过forEach()来遍历数组元素。
通过filter()来过滤符合条件的数组元素。

4 通过input来添加数据信息

4.1 首先输入框内容绑定，在data中声明一个空间用于数据的接收。在input中设置v-model绑定数据。

newTodo: ' '
1

v-model="newTodo"
1

4.2 添加数据内容，通过@keyup来触发函数的执行，函数逻辑，先判断输入数据是否为空，空则返回。如果输入的有数据，则通过数组的push()方法将数据对象添加到数组中。

addTodo(){
	var newtodo = this.newTodo.trim(); 
	if(!newtodo) return;
	this.todos.push({
		id: this.todos.length+1,
		title: newtodo,
		completed: false
	});
	this.newTodo = '';
}
1
2
3
4
5
6
7
8
9
10

tips : 在函数中使用trim()，可以减少数据的交互，降低损耗。如果在input中设置trim()，每次更改过程中有空格都会运行，而在函数中使用trim()，只有触发时才会出现运行。

5 事项的删除操作

5.1 单个事项的删除操作

首先获取到当前数据todo，通过indexOf()来获取当前todo的索引，然后再通过数组方法splice()来删除当前todo元素

removeTodo(todo){
	var index = this.todos.indexOf(todo);
	this.todos.splice(index,1);
}
1
2
3
4

5.2 多个已完成事项的删除操作。

首先判断一下当前是否存在已完成事项，如果有，则通过v-show来展示。

completed all 
v-show="remaining===todos.length"
1
2

removeCompleted(){
	this.todos = this.todos.filter(todo=>!todo.completed);
}
1
2
3

6 事项的编辑操作

6.1 通过设置正在编辑和编辑之前的挂载点来获取更改的元素

首先设置editingTodo来存储编辑的数据，设置titleBeforeEdit来存储编辑之前的数据。

			//存储正在编辑的todo的内容
			editingTodo:null ,
			//存储正在编辑的原始内容
			titleBeforeEdit:''
1
2
3
4

对将要编辑的事件双击触发操作

<label @dblclick="editTodo(todo)">{{todo.title}}</label>
1

通过对比todo和editingTodo来判断是否加入editing类。

:class="{completed: todo.completed ,editing:todo===editingTodo}">
1

6.3自定义指令

directives:{ 
	'需要设置的标签'(el,binding){
	//el指设置的元素标签，binding指一个对象
	}	}
1
2
3
4

6.4 取消正在编辑的内容

取消编辑内容：
（1）将正在编辑的内容设置为空；
（2）将todo中title内容赋值给titleBeforeEdit

6.5 删除编辑后内容为空的元素

editDone(todo){
	this.editingTodo = null;	
	todo.title = todo.title.trim();
	if(!todo.title){
		this.removeTodo(todo);
	}
}
1
2
3
4
5
6
7

如果回车和鼠标blur都会触发删除操作，则需要判断当前元素是否存在，不存在则返回，存在则进行删除操作。