網(wǎng)上有很多關(guān)于vue的todolist小程序。大多是利用vue-cli腳手架工具開發(fā)的，這個(gè)官網(wǎng)的文檔也不支持新手從單文件開始學(xué)習(xí)。所以用大家熟悉的開發(fā)方式寫了這個(gè)todolist,希望和大家一起學(xué)習(xí)。
1、vue是啥？
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。簡單說是一個(gè)模板引擎，做過后端的應(yīng)該很清楚，以前靠服務(wù)器端渲染的dom，放在瀏覽器端端渲染，vue拿到數(shù)據(jù)渲染成dom.當(dāng)然vue不僅僅是用來干這個(gè)的，數(shù)據(jù)驅(qū)動(dòng)，數(shù)據(jù)雙向綁定，賦予了用戶很好的體驗(yàn)，以及快速的開發(fā)，應(yīng)用的項(xiàng)目的益于維護(hù)等。。
2、下面開始代碼吧，提前引入vue.js,以及bootstrap。由于沒采用vue單文件開發(fā)。所以只有一個(gè)html文件.
3、為了方便你可以使用cdn來引入你需要的文件。demo使用了localstorage來存放數(shù)據(jù)。所以你必須開啟web端口來瀏覽。未了方便你可以使用webstorm來開發(fā)。否則你直接打開靜態(tài)頁是不能存取數(shù)據(jù)的。當(dāng)然這些數(shù)據(jù)你可以換成從數(shù)據(jù)庫來處理
<!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" > <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">添加任務(wù)事項(xiàng)</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">確認(rèn)添加</button> </div>--> <div class="list-group text-left form-group" style="margin-top: 2em;"> <a href="#" class="list-group-item active text-left"> 任務(wù)清單： </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">任務(wù)計(jì)劃：</div> <div class="panel-body"> 請(qǐng)?jiān)谝恢軆?nèi)完成這些計(jì)劃！ </div> <div class="panel-footer text-right"> <button class="btn btn-info btn-sm" @click="clearItem">清空任務(wù)計(jì)劃</button> </div> </div> </div> </div></div><script> //該網(wǎng)站的localStorage的鍵值，用于存放數(shù)據(jù) var todoList = 'todolist'; //對(duì)localStorage的封裝 var lsp = (function () { return ({ add: function (dataval) { //添加數(shù)據(jù)，鍵為todolist localStorage.setItem(todoList, JSON.stringify(dataval)); }, get: function () { //讀取鍵為todolist的數(shù)據(jù) return JSON.parse(localStorage.getItem(todoList)); }, remove: function () { //移除該站點(diǎn)下鍵為todolist的數(shù)據(jù) localStorage.removeItem(todoList); }, clear: function () { //清空該站點(diǎn)下的所有l(wèi)ocalStorage的數(shù)據(jù) localStorage.clear(); } }); })(); var app = new Vue({ el: '#app', data: { title: '任務(wù)清單demo', items: lsp.get() || [],//讀取數(shù)據(jù)。如果沒有數(shù)據(jù)賦值為數(shù)組[] newitem: '' //要添加的數(shù)據(jù) }, 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
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
