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创建自己的插件(自定义插件)的方法
Jun 10 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
vue实现整屏滚动切换
Jun 29 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
javascript引用对象的方法
2007/01/11 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
js实现分割上传大文件
2016/03/09 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
详解Python中类的定义与使用
2017/04/11 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Python操作qml对象过程详解
2019/09/26 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python实现坦克大战
2020/04/24 Python
电大自我鉴定范文
2013/10/01 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫