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 相关文章推荐
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery选择器全集详解
Nov 24 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
深入学习JavaScript中的bom
May 27 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在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
医院护士的求职信
2014/01/03 职场文书
公积金转移接收函
2014/01/11 职场文书
参观邀请函范文
2015/02/02 职场文书
盗窃案辩护词
2015/05/21 职场文书
安全温馨提示语大全
2015/07/14 职场文书
大学班干部竞选稿
2015/11/20 职场文书