最新 热门 RSS订阅
筛选
接下来就是筛选功能,有了之前筛选全部未完成的 todo 的经验,相信实现其它的筛选思路也就非常清晰了,我们这里有三种筛选: 全部:显示全部 todo 进行中:显示未完成的 todo 已完成:显示已完成的 todo 为了增强用户体验,选中的按钮应该高亮显示,我们这里把它标红了。 现在唯一的问题是, ...
84 0 Vue 2.x Todo 教程
还剩多少todo未完成
左下角显示了还有多少个 todo 没有完成,现在固定显示 3,因为我们之前在 html 页面中设置的是 3,这显然没意思。我们应该动态地根据实际未完成 todo 的数量来显示。 这里的关键就是计算 todos 列表中还有多少个 todo 的 completed 属性为 false,这些 todo 就 ...
152 0 Vue 2.x Todo 教程
自定义指令实现自动聚焦
我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点,而不是需要先手动点一下。input 元素有一个 focus 方法可以来帮我们完成这个事情,但现在的问题是如何在 Vue 中获得这个 input 元素,从而来操作它。Vue 的自定义指令可以完成这个功能。 我们先来看看 Vue 官网的一个示 ...
128 0 Vue 2.x Todo 教程
编辑todo
编辑 todo 的功能略微有点复杂,我们一点点来分解。 首先根据之前的分析,Vue 很容易知道我们想要编辑的是哪一个 todo,只要把当前的 todo 传给绑定的方法即可。我们实现的功能是双击当前的 todo 进入编辑状态,我们就可以在后边的输入框编辑这个 todo,因此需要给元素绑定一个双击监听事 ...
125 0 Vue 2.x Todo 教程
删除todo
有了之前的基础,删除 todo 的功能变得易如反掌,我们只需要监听用户点击删除按钮的事件,绑定一个删除 todo 的方法,将当前需要删除的 todo传给 vue,vue 就知道我们要删除哪个 todo了。<ul> <li v-for='todo in todos& ...
133 0 Vue 2.x Todo 教程
标为完成
用户点击标为完成按钮,则将对应的 todo 标为完成,为了标记 todo 是已完成还是未完成的状态,我们需要稍微改造一下我们的 todo 模型,一开始我们的 todo 有 id、title 两个属性,现在加一个 completed 属性,默认值是 false,表示未完成。todo = {id:1, ...
152 0 Vue 2.x Todo 教程
添加todo
在教程的第一篇我们演示了一个 Vue 绑定 input 输入值的示例,添加 todo 的功能和那个例子有异曲同工之妙。为了知道用户输入了什么内容,我们使用 v-model 指令将 input 的 value 值和 Vue 的实例绑定,这样在 Vue 中我们就知道了用户输入的值。然后我们监听用户按下 ...
195 0 Vue 2.x Todo 教程
显示todo列表
在我们的当前模板中,todo 列表的值都是我们直接写在 HTML 文档里的。合理的情况应该是根据用户添加和删除 todo 时动态地显示全部内容,这就要交给 Vue 了。当然,第一步是要先构建 Vue 的实例,注意这个实例目前是没有绑定任何数据的,其 data 是一个空函数,不返回任何有用的数据: & ...
297 0 Vue 2.x Todo 教程
UI
我们先来写好 Todo 应用的 HTML 文档模板,然后再用 Vue 来操作模板中的数据。由于我们采用了极简风格设计,因此可以看到模板的代码量非常少,如果加入过多的 CSS 样式,在教程中代码看起来就非常乱了。 <!DOCTYPE html> <html lang="en ...
266 0 Vue 2.x Todo 教程