第 2 篇：上手 Vue 展示 todo 列表作者：HelloGitHub-追梦人物追梦

文章插图
作者：HelloGitHub-追梦人物
追梦人物的 Vue 系列教程在他的博客已经全部更新完成，地址：
注意：追梦的博客在国外所以访问速度慢，需要耐心等待一下。本号将不再连载本系列，望周知。
UI我们先来写好 Todo 应用的 HTML 文档模板，然后再用 Vue 来操作模板中的数据。由于我们的重点在 Vue 的学习，因此 Todo 应用的 UI 采用了极简风格设计。可以看到模板的代码量非常少，如果加入过多的 CSS 样式，在教程中代码看起来就会非常混乱。
HelloVue Todo Tutorial.completed { text-decoration: line-through; } .selected { color: red; }

学习 Vue
整个牛项目
迎娶白富美走上人生巅峰

剩余 3 项未完成 --- 筛选：
请复制上述代码到一个 HTML 文件然后使用浏览器打开，你就可以看到界面了。
不过目前还只有 UI ，我们接下来将使用 Vue 一步步实现以下完整的功能：

在顶部输入框输入内容，按回车键添加 todo
全部 todo 列表显示在输入框下方的列表
将单个 todo 标为完成
删除单个 todo
双击 todo 进行编辑，按 esc 键取消编辑
下方显示未完成的 todo 数量
可通过筛选按钮筛选未完成的 todo、已完成的 todo 等
可一次性将全部 todo 标为完成，可一次性清除全部已完成 todo ，或者一次性清除全部 todo 。
其它更加丰富的功能

接下来就让我们一个一个以 Vue 的方式来实现它们吧！
todo 列表在上面的模板代码中， todo 列表的值都是我们直接写在 HTML 文档里的。合理的情况应该是根据用户添加和删除 todo 时动态地显示全部内容，这就要交给 Vue 了。当然，第一步是要先构建 Vue 的实例，注意这个实例目前是没有绑定任何数据的，其 data 是一个空函数，不返回任何有用的数据：
...
我们现在还没有实现用户添加 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：
...

{{ todo.title }}

...
注意到 v-for='todo in todos' 这种写法，其含义就是循环 todos 列表，将列表的每一项保存到 todo 变量，循环渲染 li 元素的内容。特别注意我们还给 li 元素绑定了一个 key 属性，这将告诉 Vue 每个渲染的 li 元素都是不同的，因为 id 不同。
你可以删除或者添加 todos 列表中的元素，然后刷新浏览器，可以看到页面渲染的内容会跟着变化。你也可以在按 F12 进入浏览器的调试窗口，在命令行（console）输入命令：
【第 2 篇：上手 Vue 展示 todo 列表】app.todos = [ {id: 1, title: '整个牛项目'}, {id: 2, title: '迎娶白富美（或走上人生巅峰）'}, ]