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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
vuex实现简易计数器
Oct 27 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php通过session防url攻击方法
2014/12/10 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
python 合并文件的具体实例
2013/08/08 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python flask搭建web应用教程
2019/11/19 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
天游软件面试
2013/11/23 面试题
一套.net面试题及答案
2016/11/02 面试题
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
律师函格式范本
2015/05/27 职场文书
会议主持词开场白
2015/05/28 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python