28

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

 3 years ago
source link: https://mp.weixin.qq.com/s?__biz=MzA5MzYyNzQ0MQ%3D%3D&%3Bmid=2247491597&%3Bidx=1&%3Bsn=daf3969cc668df69b9992c1f8abd4844
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

uqM7R3E.jpg!mobile

作者：HelloGitHub- 追梦人物

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

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

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

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，接下来我们就来实现它。

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

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

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

fqyUVjv.png!mobile

关注公众号第一时间收到更新


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK