在初步学习了vue之后，我们可以使用vue的基础知识来实现一个todolist列表，主要功能是通过一个输入框来输入，然后将输入的内容同步的显示在页面上，当点击其中的一项时，出现一条下划线。
首先列出在实现功能的过程中需要使用的一些vue语法。
1.因为要实现双向绑定，所以需要使用v-model。
2.涉及到循环渲染列表，需要使用v-for。
3.要实现点击事件，所以在列表上要通过v-on绑定点击事件。
4.点击时要在列表上添加或者会删除类名，从而控制下划线样式，所以要使用v-bind后面接{}的形式来判断是否显示类名。
接下来是实现代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script> <style> .underline{ text-decoration: underline; } </style> </head> <body> <div id="todoList"> <h1 v-text="msg"></h1> <input type="text" v-model="newItem" @keyup.enter="doAddNew"/> <ul> <li v-for="item in items" v-text="item.label" @click="finished(item)" :class="{underline:item.isFinished}"></li> </ul> </div> </body> <script> new Vue({ el:"#todoList", data:{ items:[], newItem:'', msg:"TodoList" }, methods:{ doAddNew: function () { this.items.push({ label:this.newItem, isFinished:false }); this.newItem = ''; }, finished: function (item) { item.isFinished = !item.isFinished; } } }); </script> </html>