Vue项目：Markdown笔记本(中)

什么是生命周期钩子？

接着上次的来讲，上从我们使用到了一个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添加的代码:

再次刷新浏览器，添加几条新的笔记，看看效果: