VUE项目中加载已保存的笔记实例方法


Posted in Javascript onSeptember 14, 2019

现在笔记内容每次改变都会进行保存操作,我们需要在应用重新打开的时候恢复数据。这里
将使用 localStorage.getItem() API。将下面的代码添加到 JavaScript 文件的最后:

 一个基本的笔记编辑器

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

当刷新应用时,可以看到在浏览器控制台打印出了已经保存的笔记内容。

1. 生命周期钩子

将笔记内容恢复到 Vue 实例中的第一种方法就是在创建实例的时候设置 content 数据属性
的内容。

每个 Vue 实例都严格遵循一个生命周期,包括多个环节:创建,挂载到页面,更新,最终被
销毁。例如,在创建实例阶段,Vue 会将实例数据变成响应式数据。

钩子是一组特殊的函数,会在某个时间点被自动调用。这就允许我们自定义框架
的逻辑。例如,可以在创建 Vue 实例时调用一个方法。

在每个环节之中或之前,有多个钩子可以用于执行逻辑。

beforeCreate:在 Vue 实例被创建时(例如使用 new Vue({}))、完成其他事项之前

调用

  • created:在实例准备就绪之后调用。注意,此时实例还没有挂载到 DOM 中。
  • beforeMount:在挂载(添加)实例到 Web 页面之前调用。
  • mounted:当实例被挂载到页面并且 DOM 可见时调用。
  • beforeUpdate:当实例需要更新时(一般来说,是当某个数据或计算属性发生改变时)

调用

  • updated:在把数据变化应用到模板之后调用。注意此时 DOM 可能还没有更新。
  • beforeDestroy:在实例销毁之前调用。
  • destroyed:在实例完全销毁之后调用。

目前,我们只使用 created 钩子来恢复笔记内容。要添加一个生命周期钩子,只需要将相
应的名字作为函数添加到 Vue 实例选项中即可:

new Vue({
// ...

// 当实例准备就绪会调用这个钩子 


created() {

// 将 content 设置为存储的内容
// 如果没有保存任何内容则设置为一个默认字符串
this.content = localStorage.getItem('content') || 'You can write in
** markdown ** '
},
})

现在刷新应用,created 钩子会在实例创建时被自动调用。这将把 content 数据属性设置

为恢复出来的数据;如果表达式结果为假值(之前没有保存过任何内容),则会设置为'You can

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
原生js实现验证码功能
Mar 16 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
layui表格数据复选框回显设置方法
Sep 13 #Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 #Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 #Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 #Javascript
You might like
第四章 php数学运算
2011/12/30 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
公司年会晚宴演讲稿
2014/01/06 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
公司端午节活动方案
2014/02/04 职场文书
《观舞记》教学反思
2014/04/16 职场文书
运动会口号大全
2014/06/07 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL