小編給大家分享一下VUE項(xiàng)目中如何加載已保存的筆記，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供惠濟(jì)企業(yè)網(wǎng)站建設(shè),專(zhuān)注與網(wǎng)站制作、成都做網(wǎng)站、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為惠濟(jì)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

將使用 localStorage.getItem() API。將下面的代碼添加到 JavaScript 文件的最后：

 一個(gè)基本的筆記編輯器

console.log('restored note:', localStorage.getItem('content'))

當(dāng)刷新應(yīng)用時(shí)，可以看到在瀏覽器控制臺(tái)打印出了已經(jīng)保存的筆記內(nèi)容。

1. 生命周期鉤子

將筆記內(nèi)容恢復(fù)到 Vue 實(shí)例中的第一種方法就是在創(chuàng)建實(shí)例的時(shí)候設(shè)置 content 數(shù)據(jù)屬性
的內(nèi)容。

每個(gè) Vue 實(shí)例都嚴(yán)格遵循一個(gè)生命周期，包括多個(gè)環(huán)節(jié)：創(chuàng)建，掛載到頁(yè)面，更新，最終被
銷(xiāo)毀。例如，在創(chuàng)建實(shí)例階段，Vue 會(huì)將實(shí)例數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)。

鉤子是一組特殊的函數(shù)，會(huì)在某個(gè)時(shí)間點(diǎn)被自動(dòng)調(diào)用。這就允許我們自定義框架
的邏輯。例如，可以在創(chuàng)建 Vue 實(shí)例時(shí)調(diào)用一個(gè)方法。

在每個(gè)環(huán)節(jié)之中或之前，有多個(gè)鉤子可以用于執(zhí)行邏輯。

beforeCreate：在 Vue 實(shí)例被創(chuàng)建時(shí)（例如使用 new Vue({})）、完成其他事項(xiàng)之前

調(diào)用

• created：在實(shí)例準(zhǔn)備就緒之后調(diào)用。注意，此時(shí)實(shí)例還沒(méi)有掛載到 DOM 中。

• beforeMount：在掛載（添加）實(shí)例到 Web 頁(yè)面之前調(diào)用。

• mounted：當(dāng)實(shí)例被掛載到頁(yè)面并且 DOM 可見(jiàn)時(shí)調(diào)用。

• beforeUpdate：當(dāng)實(shí)例需要更新時(shí)（一般來(lái)說(shuō)，是當(dāng)某個(gè)數(shù)據(jù)或計(jì)算屬性發(fā)生改變時(shí)）

調(diào)用

• updated：在把數(shù)據(jù)變化應(yīng)用到模板之后調(diào)用。注意此時(shí) DOM 可能還沒(méi)有更新。

• beforeDestroy：在實(shí)例銷(xiāo)毀之前調(diào)用。

• destroyed：在實(shí)例完全銷(xiāo)毀之后調(diào)用。

目前，我們只使用 created 鉤子來(lái)恢復(fù)筆記內(nèi)容。要添加一個(gè)生命周期鉤子，只需要將相
應(yīng)的名字作為函數(shù)添加到 Vue 實(shí)例選項(xiàng)中即可：

new Vue({
// ...

// 當(dāng)實(shí)例準(zhǔn)備就緒會(huì)調(diào)用這個(gè)鉤子 


created() {

// 將 content 設(shè)置為存儲(chǔ)的內(nèi)容
// 如果沒(méi)有保存任何內(nèi)容則設(shè)置為一個(gè)默認(rèn)字符串
this.content = localStorage.getItem('content') || 'You can write in
** markdown ** '
},
})

現(xiàn)在刷新應(yīng)用，created 鉤子會(huì)在實(shí)例創(chuàng)建時(shí)被自動(dòng)調(diào)用。這將把 content 數(shù)據(jù)屬性設(shè)置

為恢復(fù)出來(lái)的數(shù)據(jù)；如果表達(dá)式結(jié)果為假值（之前沒(méi)有保存過(guò)任何內(nèi)容），則會(huì)設(shè)置為'You can

以上是“VUE項(xiàng)目中如何加載已保存的筆記”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：VUE項(xiàng)目中如何加載已保存的筆記
轉(zhuǎn)載來(lái)于：http://www.rwnh.cn/article26/jihocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶(hù)體驗(yàn)、電子商務(wù)、網(wǎng)站維護(hù)、云服務(wù)器、網(wǎng)頁(yè)設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)