第 2 篇：上手 Vue 展示 todo 列表

作者：HelloGitHub-追梦人物

追梦人物的 Vue 系列教程在他的博客已经全部更新完成，地址：

https://www.zmrenwu.com/courses/vue2x-todo-tutorial/

注意：追梦的博客在国外所以访问速度慢，需要耐心等待一下。本号将不再连载本系列，望周知。

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="https://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，接下来我们就来实现它。