上QQ阅读APP看书，第一时间看更新
2.2.3 HTML代码的<body>部分
注释如下所示。
<body>
<section class="todoapp">
<!-- 这里定义了header，包括了文字的提示和输入框-->
<header class="header">
<h1>待办事项</h1>
<input class="new-todo"
autofocus autocomplete="off"
placeholder="例如:背10个单词. 回车保存, 双击编辑"
v-model="newTodo"
@keyup.enter="addTodo">
</header>
<!-- 这里的代码把用户已经输入的待办事项做循环展示 -->
<section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list">
<!-- 这里使用了 v-for 用来循环 -->
<li v-for="todo in filteredTodos"
class="todo"
: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)"
@keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
</li>
</ul>
</section>
<!-- 页面底部，显示还剩余几个待办事项-->
<footer class="footer" v-show="todos.length" v-cloak>
<span class="todo-count">
<strong>{{ remaining }}</strong> left
</span>
</footer>
</section>
</body>