在教程的第一篇 入门仪式：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 --