- TodoMVC 是一个非常经典的案例，功能非常丰富，并且针对多种不同技术分别都开发了此项目，比如
- React、AngularJS、JQuery等等。
- TodoMVC 案例官网：https://todomvc.com/examples/vue/
当任务列表（items ）没有数据时， #main 和 #footer 标识的标签应该被隐藏
任务涉及字段 : id 、任务名称（name ）、是否完成（ completed true 为已完成）
添加任务
1. 在最上面的文本框中添加新的任务。
2. 不允许添加非空数据。
3. 按 Enter 键添加任务列表中，并清空文本框。
4. 当加载页面后文本框自动获得焦点，在 input 上使用 autofocus 属性可获得。
1. 左下角要显示未完成的任务数量。确保数字是由 <strong> 标签包装的。
2. 还要将 item 单词多元化( 1 没有 s , 其他数字均有 s )： 0 items , 1 item , 2 items 示例： 2 items left
切换所有任务状态
1. 点击复选框 V 后，将所有任务状态标记为复选框相同的状态。
2. 当 选中/取消 了单个任务时，复选框 V 也应同步更新。
移除任务项
1. 悬停在某个任务项上显示 X 移除按钮，可点击移除当前任务项
1. 单击右下角 Clear completed 按钮时，移除所有已完成任务。
2. 单击 Clear completed 按钮后，确保复选框清除了选中状态。
3. 当列表中没有已完成的任务时，应该隐藏 Clear completed按钮。
1. 双击 <label> （某个任务项）进入编辑状态（在 <li> 上通过 .editing 进行切换状态）。
2. 进入编辑状态后输入框显示原内容，并获取编辑焦点。
3. 输入状态按 Esc 取消编辑， editing 样式应该被移除。
4. 按 Enter 键 或 失去焦点时 保存改变数据，移除 editing 样式；
路由状态切换（过滤不同状态数据）
根据点击的不同状态（ All / Active / Completed ），进行过滤出对应的任务，并进行样式的切换。
将所有任务项数据持久化到 localStorage 中,它主要是用于本地存储数据。
部分代码
<!doctype html>
<html data-framework="vue">
<head>
<meta charset="utf-8">
<title>Vue.js • TodoMVC</title>
<link rel="stylesheet" href="css/todomvc-common/base.css">
<link rel="stylesheet" href="css/todomvc-app-css/index.css">
<style> [v-cloak] { display: none; } </style>
</head>
<body>
<section class="todoapp" v-cloak>
<header class="header">
<h1>todos</h1>
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keydown.enter="addTodo">
</header>
<section class="main" v-show="todos.length">
<input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<li class="todo" v-for="todo in filteredTodos" :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)" @keydown.enter="doneEdit(todo)" @keydown.esc="cancelEdit(todo)">
</li>
</ul>
</section>
<footer class="footer" v-show="todos.length">
<span class="todo-count">
<strong v-text="remaining"></strong> {{pluralize('item', remaining)}} left
</span>
<ul class="filters">
<li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
<li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
<li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
</ul>
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
Clear completed
</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://evanyou.me">Evan You</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="node_modules/todomvc-common/base.js"></script>
<script src="node_modules/director/build/director.js"></script>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/store.js"></script>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
</body>
</html>
gitee源码：https://gitee.com/cyzgw/vue_demo.git
https://gitee.com/cyzgw/vue_demo/tree/master/todomvc