vue實現(xiàn)todolist單頁面應(yīng)用
剛學(xué)習(xí)vue的小伙伴不知道從哪入手，很多網(wǎng)上的教程一來就搭建腳手架環(huán)境，可以新手更本看不懂，建議還是用引入script的方式引入vue.js，然后看官網(wǎng)的教程，再拿那這個demo練練手，也可以看看官網(wǎng)的demo，然后再去熟悉安裝，搭建單頁面應(yīng)用。
效果：
功能：
在input輸入文字點擊按鈕或者enter，下面會添加一個帶復(fù)選框和文字還有刪除按鈕的li
用到的vue函數(shù)：
data，methods，watch，還有localstorage
頁面非常簡單：
先寫外面的盒子，這里用到v-model雙向綁定input的值和js里的inputValue
<div id="vue-todolist" class="todolistDiv"> <span> todolist</span> <input class="ipt" type="text" v-model="inputVaule" /> </div>
然后在js綁定：
var vm=new Vue({
el: '#vue-todolist',
data: {
inputVaule:""
}
})
頁面添加ul和button：
<div id="vue-todolist" class="todolistDiv">
<span> todolist</span>
<input class="ipt" type="text" v-model="inputVaule" v-on:keyup.enter="add"/>
<button v-on:click="add" class="btn">add</button>
<ul >
<li v-for="item in items" >
<div class="liDiv">
<label>{{item.text}}</label>
</div>
</li>
</ul>
</div>
button的點擊事件為methods里的add方法v-for就是遍歷items數(shù)組，將item的text顯示
js里的data要加上items,還要有methods:
var vm=new Vue({
el: '#vue-todolist',
data: {
items:[{text:'1'},{text:'2'}]
inputVaule:""
},
methods:{
add:function(){
this.items.push({text:this.inputVaule});
this.inputVaule="";
}
}
})
點擊按鈕時，就添加input的值到items數(shù)組，并重置值。這樣view就自動更新li添加一項，因為數(shù)據(jù)變化頁面也會實時更新，vue的好處開始浮現(xiàn)
在li加上checkbox和delete，再給items添加completed這個屬性，代表完成沒有，使用v-bind：class，意思是item.completed是true，那么就會使用complete這個class，如果false，就沒有class，complete這個class我們可以設(shè)置字體red，便于識別。
<li v-for="item in items" >
<div class="liDiv">
<input type="checkbox" v-model="item.completed">
<label v-bind:class="{ complete:item.completed }">{{item.text}}</label>
<button v-on:click="removeTodo(item)" class="btn">x</button>
</div>
</li>
js這里添加了completed屬性，還添加了removeTodo方法用于刪除指定item：
var vm=new Vue({
el: '#vue-todolist',
data: {
items:[{text:'1',completed:true},{text:'2',completed:false}]
inputVaule:""
},
methods:{
add:function(){
this.items.push({text:this.inputVaule});
this.inputVaule="";
},
removeTodo: function (todo) {
this.items.splice(this.items.indexOf(todo), 1)
}
}
})
現(xiàn)在已經(jīng)完善的差不多了，可是我們發(fā)現(xiàn)，每次瀏覽器刷新，或者頁面重新打開，我們新增加的li就會消失，那我們要保存我們添加的數(shù)據(jù)，要怎么做呢，很簡單，html5為我們提供了localstorage這個東西，它保存數(shù)據(jù)在瀏覽器，使得頁面刷新或者重新打開或者瀏覽器關(guān)閉也不會數(shù)據(jù)丟失。
我們一步步來看怎么實現(xiàn)
1.添加li時保存數(shù)據(jù)到localstorage:
var STORAGE_KEY = 'todos-vuejs'//名稱
var todoStorage = {
save: function (todos) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
}
}
很簡單，調(diào)用setItem傳入key和我們的items數(shù)組即可，這時候我們要用到watch函數(shù)了，去監(jiān)視items數(shù)組，如果items數(shù)組有變化即添加或者刪除，我們都自動調(diào)用todostorage的save方法
watch:{
items:{
handler:function(items){
todoStorage.save(items)
},
deep:true//一定要加
}
}
我們打開瀏覽器的開發(fā)者選項的dom，然后添加幾個li，可以看到localstorage里面已經(jīng)保存了todos-vuejs，里面保存了我們添加的item數(shù)據(jù)
2.數(shù)據(jù)保存到瀏覽器的localstorage后，我們的items數(shù)組的數(shù)組源是不是也應(yīng)該設(shè)置為localstorage的呢
添加fetch方法
var STORAGE_KEY = 'todos-vuejs'//名稱
var todoStorage = {
fetch: function () {
var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
todos.forEach(function (todo, index) {
todo.id = index
})
todoStorage.uid = todos.length
return todos
},
save: function (todos) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
}
}
還有我們data里的items：
data: {
items:todoStorage.fetch(),//直接從localstroage拿數(shù)據(jù)
inputVaule:""
},
到這里功能就齊全了，小伙伴可以再添加更多的功能，比如全部刪除等，
最后附上源碼：https://github.com/gdmec07140603/todolist.git
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue3中refs用法舉例的相關(guān)資料,Vue.js中的$refs是一個對象,它持有已注冊過ref特性的所有組件和元素,需要的朋友可以參考下2023-08-08
在vue.js渲染完界面之后如何再調(diào)用函數(shù)
這篇文章主要介紹了在vue.js渲染完界面之后如何再調(diào)用函數(shù)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue結(jié)合AntV?G2的使用踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue+eslint+vscode配置教程，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了淺談Vue入門需掌握的知識，感興趣的同學(xué)參考下2021-04-04
今天小編就為大家分享一篇vue移動端彈框組件的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了手把手教學(xué)vue的路由權(quán)限問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue如何局部修改Element樣式，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10