利用vue寫(xiě)todolist單頁(yè)應(yīng)用
網(wǎng)上有很多關(guān)于vue的todolist小程序。大多是利用vue-cli腳手架工具開(kāi)發(fā)的,這個(gè)官網(wǎng)的文檔也不支持新手從單文件開(kāi)始學(xué)習(xí)。所以用大家熟悉的開(kāi)發(fā)方式寫(xiě)了這個(gè)todolist,希望和大家一起學(xué)習(xí)。
1、vue是啥?
Vue.js(讀音 /vjuː/, 類(lèi)似于 view) 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。簡(jiǎn)單說(shuō)是一個(gè)模板引擎,做過(guò)后端的應(yīng)該很清楚,以前靠服務(wù)器端渲染的dom,放在瀏覽器端端渲染,vue拿到數(shù)據(jù)渲染成dom.當(dāng)然vue不僅僅是用來(lái)干這個(gè)的,數(shù)據(jù)驅(qū)動(dòng),數(shù)據(jù)雙向綁定,賦予了用戶很好的體驗(yàn),以及快速的開(kāi)發(fā),應(yīng)用的項(xiàng)目的益于維護(hù)等。。
2、下面開(kāi)始代碼吧,提前引入vue.js,以及bootstrap。由于沒(méi)采用vue單文件開(kāi)發(fā)。所以只有一個(gè)html文件.
3、為了方便你可以使用cdn來(lái)引入你需要的文件。demo使用了localstorage來(lái)存放數(shù)據(jù)。所以你必須開(kāi)啟web端口來(lái)瀏覽。未了方便你可以使用webstorm來(lái)開(kāi)發(fā)。否則你直接打開(kāi)靜態(tài)頁(yè)是不能存取數(shù)據(jù)的。當(dāng)然這些數(shù)據(jù)你可以換成從數(shù)據(jù)庫(kù)來(lái)處理
<!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ù)。如果沒(méi)有數(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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue中父子組件通訊之todolist組件功能開(kāi)發(fā)
- Vue從TodoList中學(xué)父子組件通信
- 詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
- vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
- vue組件編寫(xiě)之todolist組件實(shí)例詳解
- vue2的todolist入門(mén)小項(xiàng)目的詳細(xì)解析
- 使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
- Vue.js實(shí)現(xiàn)簡(jiǎn)單ToDoList 前期準(zhǔn)備(一)
- vue實(shí)現(xiàn)留言板todolist功能
- 使用Vue父子組件通信實(shí)現(xiàn)todolist的功能示例代碼
相關(guān)文章
在vue2.0中引用element-ui組件庫(kù)的方法
這篇文章主要介紹了在vue2.0中引用element-ui組件庫(kù),需要的朋友可以參考下2018-06-06Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼
本文主要介紹了Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07nginx如何配置vue項(xiàng)目history的路由模式(非根目錄)
這篇文章主要介紹了nginx如何配置vue項(xiàng)目history的路由模式(非根目錄),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10使用keep-alive時(shí),數(shù)據(jù)無(wú)法刷新的問(wèn)題及解決
這篇文章主要介紹了使用keep-alive時(shí),數(shù)據(jù)無(wú)法刷新的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue項(xiàng)目識(shí)別不到@別名問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目識(shí)別不到@別名問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖
這篇文章主要為大家詳細(xì)介紹了基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08