序：目前前端框架如：vue、react、angular，构建工具fis3、gulp、webpack等等......
可谓是五花八门，层出不穷，眼花缭乱。。。其实吧只要你想玩还是可以玩玩的..下面是看了2天vuejs的官方文档实现了一个简单的todo list.感觉确实方便~！~
vuejs官方:http://cn.vuejs.org/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist-vue</title> <script src="src/vue.js"></script> <style> *{ list-style: none; outline: none; border: none; } #app{ font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } .app{ width: 90%; margin: 0 auto; background: #c5c5c5; padding: 5%; border: 1px solid #000; margin-top: 10px; } .app li.finished{ text-decoration: line-through; } .typeInput input{ width: 70%; font-size: 24px; border: 1px solid #000; padding-left:5px; } </style> </head> <body> <div id="app" class="app"> <h1 v-text='title'></h1> <p class='typeInput'> <input type="text" v-model='newText' v-on:keyup.enter='addNewlist'> </p> <ul> <li v-for='item in items' v-bind:class='{finished:item.isFinished}' v-on:click='toggleFinish(item)'>{{item.text}}</li> </ul> </div> <script> var app=new Vue({ el:'#app', data:{ title:'My todo list', items:[ { text:'Learn CSS', isFinished:true }, { text:'Learn javascript', isFinished:false } ], newText:'' }, methods:{ toggleFinish:function(item){ // console.log(item.isFinished); item.isFinished=!item.isFinished; }, //3、输入后按enter键盘的事件 addNewlist:function(){ var _self=this; //3.1 如果不为空就将刚刚输入的内容以对象的形式，追加到items数组对象内部， //默认新追加的是没完成的为false if(_self.newText){ _self.items.push({ text:_self.newText, isFinished:false }); } // console.log(_self.newText); // console.log(this); //3.2 同时清空input输入框 _self.newText=''; } } }); </script> </body> </html>
目前只能输入按entry追加一个选项，未完待续...