UI

538 0 2019年1月7日

我们先来写好 Todo 应用的 HTML 文档模板,然后再用 Vue 来操作模板中的数据。由于我们采用了极简风格设计,因此可以看到模板的代码量非常少,如果加入过多的 CSS 样式,在教程中代码看起来就非常乱了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Todo</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 的方式来实现它们吧!

-- EOF --

最后更新:2018-11-11 12:21:12

0 条评论 / 0 人参与