作者: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="https://www.geekschool.org/wp-content/uploads/2021/01/1610167511.8656764.jpg"></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 系列教程在他的博客已经全部更新完成,地址:
注意:追梦的博客在国外所以访问速度慢,需要耐心等待一下。本号将不再连载本系列,望周知。