基于vue2.0+vuex+localStorage開(kāi)發(fā)的本地記事本示例
本文采用vue2.0+vuex+localStorage+sass+webpack,實(shí)現(xiàn)一個(gè)本地存儲(chǔ)的記事本。兼容PC端和移動(dòng)端。
實(shí)現(xiàn)效果
功能說(shuō)明
- 支持回車(chē)添加事件
- 支持事件狀態(tài)切換
- 添加事件 -> 進(jìn)入未完成列表
- 未完成 -> 已完成(勾選checkbox)
- 未完成 -> 已取消(點(diǎn)擊取消按鈕)
- 已完成 -> 未完成(取消勾選checkbox)
- 已取消 -> 未完成(點(diǎn)擊恢復(fù)按鈕)
- 支持控制臺(tái)打印所有事件數(shù)據(jù)
- 支持篩選事件
- 支持編輯事件
- 支持刪除事件
- 支持清空所有事件
- 支持本地化存儲(chǔ)
- 支持折疊面板
項(xiàng)目筆記
本項(xiàng)目是使用vue-cli腳手架生成的項(xiàng)目,項(xiàng)目代碼可以到我的github上clone下來(lái)。clone下來(lái)之后可進(jìn)入文件目錄
// 執(zhí)行 npm install // 安裝依賴(lài)完成之后再執(zhí)行 npm run dev // 即可在本地開(kāi)啟 http://localhost:8080 訪(fǎng)問(wèn)該項(xiàng)目 // 如果 node-sass 安裝失敗,可使用 cnpm 安裝 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v // 查看cnpm版本號(hào)確認(rèn)安裝成功 cnpm install node-sass -D //安裝成功后再看看是否可以正確運(yùn)行了
一、目錄結(jié)構(gòu)
|——notepad/ | |——build/ | |——confg/ | |——node_modules/ | |——src/ | | |——assets/ | | |——components/ | | | |——add_event.vue //添加事件組件 | | | |——dialog.vue //彈出框組件 | | | |——event_table.vue //表格組件 | | | |——header.vue //頭部組件 | | | |——tools.vue //工具欄組件 | | |——store/ //存放vuex代碼 | | | |——actions.js //vuex的action文件 | | | |——index.js //vuex核心代碼 | | |——App.vue //父組件 | | |——main.js //入口文件 | |——static/ | |——.babelrc | |——.editorconfig | |——.gitgnore | |——index.html | |——package.json | |——README.md
二、主要難點(diǎn)
1.折疊面板
難點(diǎn):點(diǎn)擊折疊面板title,要?jiǎng)赢?huà)實(shí)現(xiàn)sliderUp和sliderDown,但是div高度auto,使用transition: height .3s無(wú)效。
解決方法:點(diǎn)擊時(shí)候獲取div高度值,賦值給style.height,然后再改變高度為0,這樣transition才會(huì)生效。
代碼如下:
<template> <div id="app"> <div class="event-tab" @click="changeCollapse(0,$event)">未完成</div> <ul class="event-box" :style="{'height':'auto','display':'block'}"> <li class="event-list" v-for="value in getToDo"> <div>{{value.content}}</div> </li> </ul> </div> </template> <script> export default { data(){ return { collapse:[ { show: true, // show == true, 表示當(dāng)前折疊面板顯示 contentHeight: 'auto' // contentHeight, 存儲(chǔ)當(dāng)前折疊面板高度 } ] } }, methods:{ changeCollapse(num,event){ // 根據(jù)折疊面板當(dāng)前狀態(tài)進(jìn)行顯示或折疊 if(this.collapse[num].show){ this.closeCollapse(num,event); this.collapse[num].show = false; }else{ this.openCollapse(num,event); this.collapse[num].show = true; } }, closeCollapse(num,event){ // closeCollapse,關(guān)閉折疊面板 const ulElement = event.currentTarget.nextElementSibling; ulElement.style.height = ulElement.offsetHeight + 'px'; this.collapse[num].contentHeight = ulElement.offsetHeight; setTimeout(function () { ulElement.style.height = '0px'; setTimeout(function () { ulElement.style.display = 'none'; },300) },10) }, openCollapse(num,event){ // openCollapse,顯示折疊面板 const ulElement = event.currentTarget.nextElementSibling, self = this; ulElement.style.display = 'block'; setTimeout(function () { ulElement.style.height = self.collapse[num].contentHeight + 'px'; setTimeout(function () { ulElement.style.height = 'auto'; },300) },10) } } } </script> <style lang="scss" rel="stylesheet/scss"> ul.event-box{ list-style: none; overflow: hidden; border:{ left:1px solid #eee; right:1px solid #eee; } transition: height .3s; // transition,添加折疊或顯示時(shí)的動(dòng)畫(huà)效果 } </style>
2.切換狀態(tài)
難點(diǎn):在不同的狀態(tài)間切換,實(shí)時(shí)地把事件在不同狀態(tài)列表中顯示出來(lái)
解決方法:利用vuex進(jìn)行狀態(tài)管理,把所有事件和狀態(tài)存儲(chǔ)在store對(duì)象中,在組件中通過(guò)計(jì)算屬性獲得事件,因此就有了實(shí)時(shí)性。
代碼如下:
// store/index.js import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions.js'; Vue.use(Vuex); const state = { event: [] // event,用來(lái)存儲(chǔ)所有事件 } const mutations = { EVENTDONE(states,obj){ // EVENTDONE,用來(lái)修改事件的狀態(tài)為已完成 for (let i = 0; i < states.event.length; i++) { if (states.event[i].id === obj.id) { states.event[i].type = 2; // type == 2,表示狀態(tài)為已完成 break; } } } } export default new Vuex.Store({ state, actions, mutations }) // store/actions.js export const eventdone = ({ commit }, param) =>{ commit('EVENTDONE',{id: param}); } // App.vue <template> <div id="app"> <ul class="event-box"> <li class="event-list" v-for="value in getToDo"> <input type="checkbox" @click="moveToDone(value.id,$event)"> <div>{{value.content}}</div> </li> </ul> </div> </template> <script> export default { computed:{ getToDo(){ // getToDo,實(shí)時(shí)獲取狀態(tài)為未完成的事件 return this.$store.state.event.filter(function(d){ if(d.type === 1){ // type == 1,表示狀態(tài)為未完成 return d; } }); } }, methods:{ moveToDone(id,event){ // moveToDone,選中checkbox將事件移至已完成 this.$store.dispatch('eventdone',id); } } } </script>
3.本地存儲(chǔ)
知識(shí)點(diǎn):localStorage是HTML5提供的一種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法,沒(méi)有時(shí)間限制,第二天、第二周或下一年之后,數(shù)據(jù)依然可用。
用法:
1)存儲(chǔ)數(shù)據(jù):localStorage.setItem(item, value)
2)獲取數(shù)據(jù):localStorage.getItem(item)
3)移除數(shù)據(jù):localStorage.removeItem(item)
代碼如下:
// store/index.js const LocalEvent = function(item){ // 定義一個(gè)本地存儲(chǔ)的構(gòu)造函數(shù) this.get = function () { // 拿數(shù)據(jù) return JSON.parse(localStorage.getItem(item)); } this.set = function (obj) { // 存數(shù)據(jù) localStorage.setItem(item,JSON.stringify(obj)); } this.clear = function () { // 刪數(shù)據(jù) localStorage.removeItem(item); } } const local = new LocalEvent('lx_notepad'); // 創(chuàng)建一個(gè)本地存儲(chǔ)的事例 const state = local.get() || { event: [], count: 0 } const mutations = { ADDEVENT(states,obj){ // ADDEVENT,添加新的事件,并存儲(chǔ)到localStorage里 states.count++; obj.items.id = states.count; states.event.unshift(obj.items); local.set(states); } }
4.父子組件間的通訊
知識(shí)點(diǎn):組件實(shí)例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。
1)父組件可以使用 props 把數(shù)據(jù)傳給子組件。
2)子組件可以使用 $emit 觸發(fā)父組件的自定義事件。
代碼如下:
// App.vue <template> <div id="app"> // 通過(guò) isShow、msg 把數(shù)據(jù)傳個(gè)子組件,監(jiān)聽(tīng)自定義事件cancel、sure。 <n-dialog :is-show="dialog" :msg="tips" @cancel="dialog = false" @sure="sureDialog"></n-dialog> </div> </template> <script> import nDialog from './components/dialog.vue'; export default { data(){ return { dialog: true, tips: '清除后無(wú)法恢復(fù),確認(rèn)清除嗎?' } }, components: { nDialog }, methods:{ sureDialog(){ this.$store.dispatch('clearevent'); this.dialog = false; } } } </script> // dialog.vue <template> <div class="dialog" :class="{'dialog-show':isShow}"> <div class="dialog-wrapper"> <div class="dialog-content"> {{msg}} </div> <div class="dialog-btns"> <button type="button" class="cancel-btn" @click="cancelEvent">取消</button> <button type="button" class="sure-btn" @click="sureEvent">確定</button> </div> </div> </div> </template> <script> export default { props:['isShow','msg'], // 通過(guò) props 屬性獲得父組件傳遞過(guò)來(lái)的數(shù)據(jù) methods: { cancelEvent(){ this.$emit('cancel'); // 取消按鈕觸發(fā)父組件的 cancel 自定義事件 }, sureEvent(){ this.$emit('sure'); // 確認(rèn)按鈕觸發(fā)父組件的 sure 自定義事件 } } } </script>
5.篩選功能
功能描述:可根據(jù) 類(lèi)型 和 關(guān)鍵詞 進(jìn)行篩選
知識(shí)點(diǎn):在返回所有事件的計(jì)算屬性上,使用過(guò)濾器( filter ),進(jìn)行對(duì) type 和 content 的篩選,返回符合條件的事件。
代碼如下:
<script> export default { data: function(){ return { screen_type: 0, // 篩選類(lèi)型,0 表示不篩選 screen_title: '', // 篩選關(guān)鍵詞,'' 表示不篩選 } }, computed:{ notapad(){ var self = this; return self.$store.state.event.filter(function(d){ // 使用過(guò)濾器 if(self.screen_type !== 0 && self.screen_title === ''){ // 只篩選類(lèi)型 if( d.type === self.screen_type ){ return d; } }else if(self.screen_type !== 0 && self.screen_title !== ''){ // 篩選類(lèi)型和關(guān)鍵詞 if( d.type === self.screen_type && d.content.indexOf(self.screen_title) !== -1){ return d; } }else if(self.screen_type === 0 && self.screen_title !== ''){ // 只篩選關(guān)鍵詞 if(d.content.indexOf(self.screen_title) !== -1){ return d; } }else{ // 不進(jìn)行篩選 return d; } }); } } } </script>
總結(jié)
雖然只是做了個(gè)小小的記事本,但是我感覺(jué)收獲還是很大的,很多知識(shí)點(diǎn)掌握得更加的牢固。這個(gè)記事本只做了一個(gè)頁(yè)面,就沒(méi)有用vue-router,路由也是vue里很強(qiáng)大的功能。
做這個(gè)記事本的初衷,是因?yàn)樵诠ぷ髦?,我都?huì)把最近要做的事情給記在本子上,完成之后就會(huì)打鉤,所以想把這個(gè)給放到電腦上去實(shí)現(xiàn)。
demo下載地址:notepad_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法
- Vue項(xiàng)目如何保持用戶(hù)登錄狀態(tài)(localStorage+vuex刷新頁(yè)面后狀態(tài)依然保持)
- 使用vuex存儲(chǔ)用戶(hù)信息到localStorage的實(shí)例
- Vue項(xiàng)目使用localStorage+Vuex保存用戶(hù)登錄信息
- vue2.0+vuex+localStorage代辦事項(xiàng)應(yīng)用實(shí)現(xiàn)詳解
- 詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage的變化
- vuex存儲(chǔ)數(shù)組(新建,增,刪,更新)并存入localstorage定時(shí)刪除功能實(shí)現(xiàn)
相關(guān)文章
Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法
Vue 路由過(guò)渡是對(duì) Vue 程序一種快速簡(jiǎn)便的增加個(gè)性化效果的的方法,這篇文章主要介紹了Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法,感興趣的可以了解一下2021-05-05Vue動(dòng)態(tài)組件與異步組件超詳細(xì)講解
這篇文章主要介紹了Vue動(dòng)態(tài)組件與異步組件,動(dòng)態(tài)組件是根據(jù)數(shù)據(jù)的變化,可以隨時(shí)切換不同的組件,比如咱們現(xiàn)在要展示一個(gè)文本框和輸入框,我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框2023-03-03vue3 template轉(zhuǎn)為render函數(shù)過(guò)程詳解
在 Vue 中,template 模板是我們編寫(xiě)組件的主要方式之一,而 Vue 內(nèi)部會(huì)將這些模板轉(zhuǎn)換為 render 函數(shù),render 函數(shù)是用于創(chuàng)建虛擬 DOM 的函數(shù),通過(guò)它,Vue 能夠高效地追蹤 DOM 的變化并進(jìn)行更新,下面我會(huì)通俗易懂地詳細(xì)解釋 Vue 如何將 template 轉(zhuǎn)換為 render 函數(shù)2024-10-10vue3中setup語(yǔ)法糖下父子組件間傳遞數(shù)據(jù)的方式
Vue3中父組件指的是包含一個(gè)或多個(gè)子組件的組件,它們通過(guò)props和事件等方式來(lái)傳遞數(shù)據(jù)和通信,這篇文章主要介紹了vue3中setup語(yǔ)法糖下父子組件間傳遞數(shù)據(jù)的方式,需要的朋友可以參考下2023-06-06vue.js中v-on:textInput無(wú)法執(zhí)行事件問(wèn)題的解決過(guò)程
大家都知道vue.js通過(guò)v-on完成事件處理與綁定,但最近使用v-on的時(shí)候遇到了一個(gè)問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于vue.js中v-on:textInput無(wú)法執(zhí)行事件問(wèn)題的解決過(guò)程,需要的朋友可以參考下。2017-07-07echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-10-10vue單頁(yè)應(yīng)用在頁(yè)面刷新時(shí)保留狀態(tài)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue單頁(yè)應(yīng)用在頁(yè)面刷新時(shí)保留狀態(tài)數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09