网上有很多关于vue的todolist小程序。大多是利用vue-cli脚手架工具开发的，这个官网的文档也不支持新手从单文件开始学习。所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习。
1、vue是啥？
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。简单说是一个模板引擎，做过后端的应该很清楚，以前靠服务器端渲染的dom，放在浏览器端端渲染，vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的，数据驱动，数据双向绑定，赋予了用户很好的体验，以及快速的开发，应用的项目的益于维护等。。
2、下面开始代码吧，提前引入vue.js,以及bootstrap。由于没采用vue单文件开发。所以只有一个html文件.
3、为了方便你可以使用cdn来引入你需要的文件。demo使用了localstorage来存放数据。所以你必须开启web端口来浏览。未了方便你可以使用webstorm来开发。否则你直接打开静态页是不能存取数据的。当然这些数据你可以换成从数据库来处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1"> <title>vue版todolist</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://www.jb51.net/src/vue.js"></script> </head> <style> .isFinish { background-color: #d58512 !important; } .itemcount { display: block; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 10px; float: left; background-color: #d9edf7; } </style> <body> <div> <h2>{{title}}</h2> <div> <div> <form role="form"> <div> <label for="toitem">添加任务事项</label> <input type="text" v-model="newitem" @keyup.enter="addItem()"> </div> <!-- <div> <button>确认添加</button> </div>--> <div> <a href="#"> 任务清单： </a> <a href="#" v-for="item in items" v-on:click="toogleFinsih(item)"> <span>{{item.id}}</span> {{item.lable}} <span v-bind:class="{isFinish:item.isFinish}">√</span> </a> </div> </form> </div> <div> <div> <div>任务计划：</div> <div> 请在一周内完成这些计划！ </div> <div> <button @click="clearItem">清空任务计划</button> </div> </div> </div> </div> </div> <script> //该网站的localStorage的键值，用于存放数据 var todoList = 'todolist'; //对localStorage的封装 var lsp = (function () { return ({ add: function (dataval) { //添加数据，键为todolist localStorage.setItem(todoList, JSON.stringify(dataval)); }, get: function () { //读取键为todolist的数据 return JSON.parse(localStorage.getItem(todoList)); }, remove: function () { //移除该站点下键为todolist的数据 localStorage.removeItem(todoList); }, clear: function () { //清空该站点下的所有localStorage的数据 localStorage.clear(); } }); })(); var app = new Vue({ el: '#app', data: { title: '任务清单demo', items: lsp.get() || [],//读取数据。如果没有数据赋值为数组[] newitem: '' //要添加的数据 }, methods: { addItem: function () { var that = this; this.items.push({ id: that.items.length + 1, lable: that.newitem, isFinish: false }); lsp.add(this.items); this.newitem = ''; }, toogleFinsih: function (item) { item.isFinish = !item.isFinish; }, clearItem: function () { this.items = []; } } }) </script> </body> </html>