什么是生命周期鉤子？

接著上次的來講，上從我們使用到了一個created()函數，

其實這個created()函數，就是生命周期鉤子 。每個Vue 實例都嚴格遵守著一個生命周期，包括多個環節：創建、掛載到新頁面、更新、銷毀。鉤子 是一組特殊的函數，會在某個特殊的時間點被調用。舉個例子：在創建Vue實例的時候調用一個方法，可以使用created() 。

下面來看一下每個環節的生命周期鉤子：

• beforeCreate ：在Vue實例被創建時（例如使用new Vue({}) ）、完成其他事項之前調用。

• created ：在實例準備就緒之后調用。注意，此時實例還沒有掛載到DOM中。

• beforeMount ：在掛載（添加）實例到Web頁面之前調用。

• mounted ：當實例被掛載到頁面并且DOM可見時調用。

• beforeUpdate ：當實例需要更新時（一般來說，是當某個數據或計算屬性發生改變時）調用。

• updated ：在把數據變化應用到模板之后調用。注意此時DOM可能還沒有更新。

• beforeDestroy ：在實例銷毀之前調用。

• destroyed ：在實例完全銷毀之后調用。

上次最后我們想要保存筆記本的更改，下次打開應用時能夠加載并呈現出來。那么我們就可以使用created 鉤子來恢復筆記內容。

new Vue({// ...// 當實例準備就緒會調用這個鉤子created() {// 將content設置為存儲的內容// 如果沒有保存任何內容則設置為一個默認字符串this.content = localStorage.getItem('content') || 'You can write in ** markdown ** '}, //注意‘||’，若前面表達式結果為假，則會設置后半句，即之前沒有保存過任何內容 })

當然，對于數據的保存加載，我們也可以不使用生命周期鉤子，直接在數據中初始化 ，就是用恢復出來的值直接初始化content數據屬性，在data()中做更改：

new Vue({// ...data() {return {content: localStorage.getItem('content') || 'You can write in **markdown**',}}, })

2. 多條筆記

2.1 添加筆記列表

我們要制作的是一個筆記本，應該具有能力容納多條筆記，而不是只能記住一條內容。可以在界面的左邊添加一個新的側邊欄來呈現出筆記列表，然后增加一些功能按鈕，例如：重命名、收藏等。

• 跟創建預覽面板一樣，我們需要為筆記列表欄設置一個aside 元素，其calss設置為sider-bar:

• 添加一個新的數據屬性，名為notes 。這個屬性是一個數組，包含了所有的筆記：

2.1.1 添加新建筆記的方法

每一條筆記都應該有下面的屬性：

• id ：筆記的唯一標識符。
• title ：筆記的標題，用來顯示在筆記列表中。
• content ：筆記的Markdown格式內容。
• created ：筆記創建的日期。
• favorite ：這是一個布爾值，用于表示是否收藏了筆記，已收藏的筆記顯示在筆記列表的頂部。

添加一個名為addNote的方法，它會用默認值創建一個新的筆記對象：

Code:

2.1.2 用 v-on 實現按鈕的單機事件

我們需要一個添加筆記的按鈕，因此在左側邊欄中添加一個新的按鈕，在index.html文件中加入：

運行一下在瀏覽器看看效果：

2.1.3 用 v-bind 綁定屬性

創建筆記的時候我們并不知道有多少條筆記，如果能夠有一個提示，提示現在已經有多少條筆記就更方便了，這里使用 v-bind 指令來綁定title屬性（title屬性是當鼠標懸浮在元素上方時，可以顯示title的信息）

Code：

<button v-bind:title="notes.length + ' note(s) already'"> <!--簡寫： <button :title="notes.length + ' note(s) already'"> -->

2.1.4 用 v-for 顯示列表

想要在左邊欄顯示筆記列表的標題，則需要使用 v-for 指令來實現，看看需要在index.html添加的代碼:

再次刷新瀏覽器，添加幾條新的筆記，看看效果:

總結

以上是生活随笔為你收集整理的Vue项目：Markdown笔记本(中)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。