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实现冻结表头的方法
Mar 09 Javascript
JScript中的条件注释详解
Apr 24 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
vue 数据操作相关总结
Dec 17 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学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
js的2种继承方式详解
2014/03/04 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python实现统计代码行数的方法
2015/05/22 Python
Python机器学习之决策树算法
2017/12/22 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
民间借贷被告代理词
2015/05/23 职场文书
运动会5000米加油稿
2015/07/21 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP