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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
浅析vue-router原理
Oct 19 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
JS实现简单打字测试
Jun 24 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP的自定义模板引擎
2017/03/24 PHP
html读出文本文件内容
2007/01/22 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
小学三年级数学教学反思
2014/01/31 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
教研处工作方案
2014/05/26 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers