網上有很多關於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 name="viewport" content="width=device-width, initial-scale=1"> <title>vue版todolist</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="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 class="container text-center" id="app"> <h2>{{title}}</h2> <div class="row"> <div class="col-md-7"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="toitem">添加任務事項</label> <input class="form-control" type="text" id="toitem" v-model="newitem" @keyup.enter="addItem()"> </div> <!-- <div class="form-group text-left"> <button class="btn btn-primary btn-sm">確認添加</button> </div>--> <div class="list-group text-left form-group" style="margin-top: 2em;"> <a href="#" class="list-group-item active text-left"> 任務清單: </a> <a href="#" v-for="item in items" class="list-group-item" v-on:click="toogleFinsih(item)"> <span class="itemcount">{{item.id}}</span> {{item.lable}} <span class="badge" v-bind:class="{isFinish:item.isFinish}">√</span> </a> </div> </form> </div> <div class="col-md-5"> <div class="panel panel-default"> <div class="panel-heading">任務計劃:</div> <div class="panel-body"> 請在一周內完成這些計劃! </div> <div class="panel-footer text-right"> <button class="btn btn-info btn-sm" @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>
github:demo
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。