vue實現(xiàn)todolist單頁面應用
剛學習vue的小伙伴不知道從哪入手，很多網(wǎng)上的教程一來就搭建腳手架環(huán)境，可以新手更本看不懂，建議還是用引入script的方式引入vue.js，然后看官網(wǎng)的教程，再拿那這個demo練練手，也可以看看官網(wǎng)的demo，然后再去熟悉安裝，搭建單頁面應用。
效果：
功能：
在input輸入文字點擊按鈕或者enter，下面會添加一個帶復選框和文字還有刪除按鈕的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我們可以設置字體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)在已經完善的差不多了，可是我們發(fā)現(xiàn)，每次瀏覽器刷新，或者頁面重新打開，我們新增加的li就會消失，那我們要保存我們添加的數(shù)據(jù)，要怎么做呢，很簡單，html5為我們提供了localstorage這個東西，它保存數(shù)據(jù)在瀏覽器，使得頁面刷新或者重新打開或者瀏覽器關閉也不會數(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))
}
}
很簡單，調用setItem傳入key和我們的items數(shù)組即可，這時候我們要用到watch函數(shù)了，去監(jiān)視items數(shù)組，如果items數(shù)組有變化即添加或者刪除，我們都自動調用todostorage的save方法
watch:{
items:{
handler:function(items){
todoStorage.save(items)
},
deep:true//一定要加
}
}
我們打開瀏覽器的開發(fā)者選項的dom，然后添加幾個li，可以看到localstorage里面已經保存了todos-vuejs，里面保存了我們添加的item數(shù)據(jù)
2.數(shù)據(jù)保存到瀏覽器的localstorage后，我們的items數(shù)組的數(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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這個插件可以用來在未使用組件庫,沒有自帶好的校驗規(guī)則時使用,進行表單校驗，非常的實用，感興趣的朋友可以參考下本文，了解該插件的使用方法2021-06-06
這篇文章主要介紹了Vue中關于computed計算屬性的妙用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽滑動分割面板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue實現(xiàn)移動端H5數(shù)字鍵盤組件使用詳解
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端H5數(shù)字鍵盤組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
例如組件使用頻率非常高,幾乎每個頁面都在使用便可以封裝成全局組件,下面通過本文給大家介紹Vue3注冊全局組件的相關知識,感興趣的朋友一起看看吧2024-01-01
vue和react等項目中更簡單的實現(xiàn)展開收起更多等效果示例
這篇文章主要介紹了vue和react等項目中更簡單的實現(xiàn)展開收起更多等效果示例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)單一篩選、刪除篩選條件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Vue3中的ref為何要用.value進行值的調用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定
這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學習指令和綁定的相關知識，本文通過實例代碼相結合的形式給大家介紹的非常詳細 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vuex入門之Module使用詳解,由于使用單一狀態(tài)樹,應用的所有狀態(tài)會集中到一個比較大的對象,當應用變得非常復雜時,store?對象就有可能變得相當臃腫,需要的朋友可以參考下2023-11-11