添加todo

在教程的第一篇 入门仪式:Hello Vue 中我们演示了一个 Vue 绑定 input 输入值的示例,添加 todo 的功能和那个例子有异曲同工之妙。

为了知道用户输入了什么内容,我们使用 v-model 指令将 input 的 value 值和 Vue 的实例绑定,这样在 Vue 中我们就知道了用户输入的值。然后我们监听用户按下回车的事件,一旦这个事件被触发,我们就在 Vue 实例中调用相应的方法,把新的值添加到 todos 列表中,下面来一步步完成上面的步骤。

绑定 input 的输入:

<div id="todo-app">
    ...
  <div>
    ...
    <input type="text" 
           placeholder="添加 todo" 
           v-model="newTodoTitle"/>
  </div>
    ...
</div>
...
<script>
    var app = new Vue({
        el: '#todo-app',
        data: function () {
            return {
                todos: [],
                newTodoTitle: ''
            }
        },
    })
</script>

我们把预先填充在 todos 列表的值清空了,因为一开始是没有 todo 的。然后我们使用 v-model 指令将 input 的 value 属性的值与 Vue 实例的 newTodoTitle 值绑定。注意这里绑定的数据可以取任何名字,不一定要和 input 的属性 value 相同。

然后我们监听键盘敲击回车的事件:

<div id="todo-app">
    ...
   <input type="text" 
          placeholder="添加 todo"
          v-model="newTodoTitle"
          @keyup.enter="addTodo"/>
    ...
</div>
...
<script>
    var app = new Vue({
        el: '#todo-app',
        data: function () {
            return {
                todos: [],
                newTodoTitle: ''
            }
        },
    })
</script>

注意到 @keyup.enter="addTodo",我们之前的示例中绑定过 click 事件,绑定键盘按键的事件为 keyup,然后我们使用 enter 对事件进行修饰,表明这个事件是按下回车,而不是按下别的什么键。Vue为按键提供了很多修饰符,可以参考 Vue 按键修饰符的官方文档。事件绑定后,一旦用户按下回车,就会调用后边的 addTodo 方法。

实现 addTodo 方法:

<script>
    let id = 0; // 用于 id 生成
    var app = new Vue({
        ...
        methods: {
            addTodo: function () {
                this.todos.push({id: id++, title: this.newTodoTitle});
                this.newTodoTitle = ''
            }
        }
    })
</script>

示例中已经说过方法声明在 Vue 对象的 methods 属性里。这个 addTodo 方法做的事情很简单,生成一个新的 todo 对象,然后将其添加到 todos 列表里(push 方法就是把一个元素加入到数组的末尾),然后将用户的输入值清空。始终注意这里 newTodoTitle 和输入框的 value 值是双向绑定的,任何一个值改变,相应的值都会跟着变。

打开浏览器,试着添加几个 todo 吧!

练习

练习一:我们的方法有一个小 bug,如果用户什么内容也没有输入,但是敲下了回车,我们的应用会为其创建一个空的 todo,正确的效果应该是不做任何动作。尝试修改程序,实现正确的效果。

练习二:能否进一步地,当用户尝试创建空的 todo 时,我们的输入框边框变红色,提醒用户没有任何内容输入,以及在输入框后边显示“请输入内容”之类的提示信息呢?(hint:结合之前示例中给出的计算属性、动态绑定 class、v-if 指令来实现,你可能需要参考 Vue 的官方文档了解这些内容)。

涉及的官方文档:

-- EOF --


0 条评论 / 0 人参与