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