序：目前前端框架如：vue、react、angular，構建工具fis3、gulp、webpack等等...... 可謂是五花八門，層出不窮，眼花繚亂。。。其實吧只要你想玩還是可以玩玩的..下麵是看了2天vuejs的官方文檔實現了一個簡單的todo list.感覺確實方便~！~ 預覽戳這裡 vuej ...
序：目前前端框架如：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追加一個選項，未完待續...
