Vue 任务清单

<style>
li{ list-style: none; }
#root{
	width: 400px;
	min-height: 400px;
	box-shadow: 0 0 10px #666;
	margin: 20px auto;
	padding: 20px;
}
.task-input{
	width: 100%;
	height: 30px;
	padding-left: 10px;
	font-size: 13px;
	border: 1px solid #ccc;
}
.task-count{
	padding: 0;
	height: 30px;
	clear: both;
}
.task-count li:first-of-type{
	float: left;
	font-size: 14px;
	color: red;
}
.task-count .action{
	float: right;
	padding: 0;
}
.task-count .action a{
	font-size: 14px;
	text-decoration: none;
	color: #888;
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #fff;
}
.task-count .action .active{
	border-color: #888;
}
.tasks{
	box-shadow: 0 0 2px #ccc;
	padding: 10px;
}
.tasks .todo-list{
	padding: 0;
	margin: 0;
}
.tasks .todo-list .todo{
	height: 40px;
	line-height: 40px;
}
.tasks .todo-list .active{
	color: #999;
	text-decoration: line-through;
}
.tasks .todo-list .destroy{
	color: red;
	background: #fff;
	border: none;
	float: right;
	margin-top: 12px;
	cursor: pointer;
}
.tasks .todo-list .editing .view{
	display: none;
}
.tasks .todo-list .editing .edit{
	display: block;
}
.tasks .todo-list .edit{
	display: none;
	width: 80%;
	padding: 4px 10px;
}
</style>
<div id="root">
	<p>添加任务：</p>
	<input
		class="task-input"
		placeholder="输入任务 回车即可添加任务"
		type="text"
		v-on:keyup.enter="addTodo"
		v-model="todo"
	>
	<ul class="task-count" v-show="list.length">
		<li>{{noCheckedLength}} 个任务未完成 </li>
		<li class="action">
			<a class="active" href="javascript:;">所有任务</a>
			<a href="javascript:;">未完成的任务</a>
			<a href="javascript:;">完成的任务</a>
		</li>
	</ul>
	<p>任务列表：</p>
	<div class="tasks">
		<span v-show="!list.length">还没有添加任何任务</span>
		<ul class="todo-list">
			<todo-item
				class="todo"
				:class="{active: item.isChecked, editing: item === edtorTodos}"
				v-for="(item, index) in list"
				:content="item"
				:index="index"
			></todo-item>
		</ul>
	</div>
</div>
<script>
Vue.component('todo-item', {
	props: ['content', 'index'],
	template: `
		<li>
			<div class="view">
				<input class="toggle" type="checkbox" v-model="content.isChecked">
				<label @dblclick="edtorTodo(content)">{{content.title}}</label>
				<button class="destroy" @click="deleteTodo(index)">x</button>
			</div>
			<input 

				type="text"
				class="edit"
				v-model="content.title"
				@blur="edtorTodoed(content, index)"
				@keyup.13="edtorTodoed(content, index)"
				@keyup.esc="cancelTodo(content)"
			/>
		</li>
	`,
	data () {
		return {

		}
	}
})
new Vue({
	el: '#root',
	data: {
		list: [
			{
				title: 'xiaobai'
			}
		],
		todo: '',
		edtorTodos: '',  // 记录编辑的数据
		beforeTitle: ''
	},
	methods: {
		// addTodo () {
		// 	if(!this.todo) return;
		// 	this.list.push({
		// 		title: this.todo,
		// 		isChecked: false
		// 	})
		// 	this.todo = '';
		// },
		// watch: {
		// 	list: {

		// 	}
		// },
		// deleteTodo (index) { // 删除
		// 	this.list.splice(index, 1)
		// },
		// edtorTodo (todo) { // 编辑
		// 	this.beforeTitle = todo.title;
		// 	this.edtorTodos = todo;
		// },
		// edtorTodoed (todo, index) { // 编辑成功
		// 	// 如果输入框为空 则删除列表
		// 	if(!todo.title) this.list.splice(index, 1);
		// 	this.edtorTodos = ''
		// },
		// cancelTodo (todo) { // 取消编辑
		// 	todo.title = this.beforeTitle;
		// 	this.edtorTodos = ''
		// }
	},
	// directives: { // 自定义组件
	// 	'focus': {
	// 		update (el, binding){
	// 			if(binding.value){
	// 				el.focus();
	// 			}
	// 		}
	// 	}
	// },
	computed: {
		noCheckedLength () { // 计算未完成任务的数量
			return this.list.filter(function(item){
				return !item.isChecked
			}).length
		}
	}
})
</script>