vue中使用localstorage来存储页面信息


Posted in Javascript onNovember 04, 2017

今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻。

环境搭建:

参考:vue API

详情:

npm install --global vue-cli

vue中使用localstorage来存储页面信息

 vue init webpack vue-project

vue中使用localstorage来存储页面信息

然后:

 vue中使用localstorage来存储页面信息

cd vue-project

npm install    如果你配置了淘宝镜像,也可以用cnpm install

npm run dev

我们就在浏览器看到:

vue中使用localstorage来存储页面信息 

但我们最终要实现:

vue中使用localstorage来存储页面信息 

如何实现如图的效果呢?

1.将App.vue修改为:

<template>
 <div id="app">
  <div class='vue-demo'>
   <input type="text" class="txt" v-model='newItem' @keyup.enter='addItemFun'>
   <ul>
    <li v-for="its in items">{{its.name}}</li>
   </ul>
  </div>
 </div>
</template>
<script>
import store from './store'
export default {
 name: 'app',
 data() {
  return {
   newItem: '',
   items: store.fetch()
  }
 },
 watch: {
  items: {
   handler: function(val, oldVal) {
    store.save(val);
   },
   deep: true
  }
 },
 methods: {
  addItemFun() {
   var _this = this;
   _this.items.push({ 'name': _this.newItem });
   _this.newItem = '';
  }
 }
}

</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}

.vue-demo {
 width: 400px;
 margin: 0 30px;
}

.txt {
 width: 200px;
 height: 25px;
 line-height: 24px;
 border-radius: 5px;
}

</style>

对于初学vue的同学,可能对于watch可能不太熟悉,那就麻烦大家移步到 vue API 或参考下小颖之前写的文章:vue——实例方法 / 数据

2.在与App.vue同级目录下,新建store.js文件:

const STORAGE_KEY = 'todos-vuejs'

export default {

 fetch: function() {

  return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')

 },

 save: function(items) {

  window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))

 }

}

3.在项目中打开cmd窗口,运行:npm run dev,就完成啦嘻嘻。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
移动端js图片查看器
Nov 17 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
JS实现简易计算器
Feb 14 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 #Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 #Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 #Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 #Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 #Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php获取图片信息的方法详解
2015/12/10 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
酒店大堂副理的职责范文
2014/02/13 职场文书
大学生就业策划书范文
2014/04/04 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
导游词之日月潭
2019/11/05 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers