第 2 篇：上手 Vue 展示 todo 列表
作者：HelloGitHub-追夢人物
追夢人物的 Vue 系列教程在他的博客已經全部更新完成，地址：
注意：追夢的博客在國外所以訪問速度慢，需要耐心等待一下。本號將不再連載本系列，望周知。
UI
我們先來寫好 Todo 應用的 HTML 文檔模板，然後再用 Vue 來操作模板中的數據。由於我們的重點在 Vue 的學習，因此 Todo 應用的 UI 採用了極簡風格設計。可以看到模板的代碼量非常少，如果加入過多的 CSS 樣式，在教程中代碼看起來就會非常混亂。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloVue Todo Tutorial</title>
<style>
.completed {
text-decoration: line-through;
}
.selected {
color: red;
}
</style>
</head>
<body>
<div id="todo-app">
<div>
<input type="button" value="全部標為完成"/>
<input type="text" placeholder="添加 todo"/>
</div>
<!-- todo list -->
<ul>
<li>
<span class="completed">學習 Vue</span>
<input type="button" value="標為完成">
<input type="button" value="刪除">
<input type="text" value="編輯 todo..."/>
</li>
<li>
<span>整個牛項目</span>
<input type="button" value="標為完成">
<input type="button" value="刪除">
<input type="text" value="編輯 todo..."/>
</li>
<li>
<span>迎娶白富美走上人生巔峰</span>
<input type="button" value="標為完成">
<input type="button" value="刪除">
<input type="text" value="編輯 todo..."/>
</li>
</ul>
<!-- end todo list -->
<div>
<span>剩餘 3 項未完成 ---</span>
<span>篩選：
<input type="button" class="selected" value="全部">
<input type="button" value="進行中">
<input type="button" value="已完成">
<input type="button" value="清除已完成">
<input type="button" value="清除全部">
</span>
</div>
</div>
</body>
</html>
請複製上述代碼到一個 HTML 文件然後使用瀏覽器打開，你就可以看到界面了。
不過目前還只有 UI，我們接下來將使用 Vue 一步步實現以下完整的功能：
- 在頂部輸入框輸入內容，按回車鍵添加 todo
- 全部 todo 列表顯示在輸入框下方的列表
- 將單個 todo 標為完成
- 刪除單個 todo
- 雙擊 todo 進行編輯，按 esc 鍵取消編輯
- 下方顯示未完成的 todo 數量
- 可通過篩選按鈕篩選未完成的 todo、已完成的 todo 等
- 可一次性將全部 todo 標為完成，可一次性清除全部已完成 todo，或者一次性清除全部 todo。
- 其它更加豐富的功能
接下來就讓我們一個一個以 Vue 的方式來實現它們吧！
todo 列表
在上面的模板代碼中，todo 列表的值都是我們直接寫在 HTML 文檔里的。合理的情況應該是根據用戶添加和刪除 todo 時動態地顯示全部內容，這就要交給 Vue 了。當然，第一步是要先構建 Vue 的實例，注意這個實例目前是沒有綁定任何數據的，其 data 是一個空函數，不返回任何有用的數據：
<body>
<div id="todo-app">
...
</div>
<script src="//cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
var app = new Vue({
el: '#todo-app',
data: function () {
},
})
</script>
</body>
我們現在還沒有實現用戶添加 todo 的功能，我們先做個弊，假設用戶已經輸入了一些 todo，存在一個 todos 列表裡，現在需要將 Vue 實例和這個 todos 綁定：
var app = new Vue({
el: '#todo-app',
data: function () {
return {
todos: [
{id: 0, title: '學習 Vue'},
{id: 1, title: '整個牛項目'},
{id: 2, title: '迎娶白富美走上人生巔峰'},
]
}
},
})
現在每一個 todo 都是一個對象，它有 id 和 title 兩個屬性，id 用來唯一標識這個 todo。然後我們就在模板中循環顯示這個 todos 列表，Vue 中循環指令用 v-for：
<div id="todo-app">
...
<!--todo list-->
<ul>
<li v-for='todo in todos' :key='todo.id'>
<span>{{ todo.title }}</span>
<input type="button" value="標為完成">
<input type="button" value="刪除">
<input type="text" value="編輯 todo..."/>
</li>
</ul>
<!-- end todo list -->
...
</div>
注意到 v-for='todo in todos' 這種寫法，其含義就是循環 todos 列表，將列表的每一項保存到 todo 變量，循環渲染 li 元素的內容。特別注意我們還給 li 元素綁定了一個 key 屬性，這將告訴 Vue 每個渲染的 li 元素都是不同的，因為 id 不同。
你可以刪除或者添加 todos 列表中的元素，然後刷新瀏覽器，可以看到頁面渲染的內容會跟着變化。你也可以在按 F12 進入瀏覽器的調試窗口，在命令行（console）輸入命令：
app.todos = [
{id: 1, title: '整個牛項目'},
{id: 2, title: '迎娶白富美（或走上人生巔峰）'},
]
這個 app 是我們創建的 Vue 實例的名字，然後引用它綁定的數據 todos，我們給它賦了一個新的值，你會實時地看到瀏覽器渲染的結果變化了。Vue 就是這麼神奇！
顯然，人工為 todos 列表添加數據是一點也不好玩的，我們希望在上方的輸入框輸入想要添加的 todo，然後按回車就自動給我們添加 todo，接下來我們就來實現它。
追夢人物的 Vue 系列教程在他的博客已經全部更新完成，地址：
注意：追夢的博客在國外所以訪問速度慢，需要耐心等待一下。本號將不再連載本系列，望周知。
