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 相关文章推荐
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
国际贸易专业推荐信
2013/11/15 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
领导失职检讨书
2014/02/24 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
大学新闻系求职信
2014/06/03 职场文书
会计电算化专业求职信
2014/06/10 职场文书
校本培训个人总结
2015/02/28 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis