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

环境搭建:

参考:vue API

vue2.0+element+node+webpack搭建的一个简单的后台管理界面

详情:

npm install --global vue-cli

 vue init webpack vue-project

然后:

cd vue-project

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

npm run dev

我们就在浏览器看到:

 但我们最终要实现:

如何实现如图的效果呢?

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,就完成啦嘻嘻。

使用localstorage来存储页面信息的更多相关文章

  1. Html.java 存储页面信息类

    Html.java 存储页面信息类 package com.iteye.injavawetrust.miner; /** * 存储页面信息类 * @author InJavaWeTrust * */ ...

  2. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  3. 简单登录案例(SharedPreferences存储账户信息)&联网请求图片并下载到SD卡(文件外部存储)

    新人刚学习Android两周,写一个随笔算是对两周学习成果的巩固,不足之处欢迎各位建议和完善. 这次写的是一个简单登录案例,大概功能如下: 注册的账户信息用SharedPreferences存储: 登 ...

  4. 浅谈localStorage本地存储

    在年会的抽奖程序中用到了localStorage现在拿出来总结下,localStorage的相关用法. 在年会抽奖的程序中,需要把获奖名单存储下来,年会现场没有网络,能最简单实现数据存储的方式就是,将 ...

  5. Javascript动态生成的页面信息爬取和openpyxl包FAQ小记

    最近,笔者在使用Requests模拟浏览器发送Post请求时,发现程序返回的html与浏览器F12观察到的略有不同,经过观察返回的response.text,cookies确认有效,因为我们可以看到返 ...

  6. localStorage存储数组,对象,localStorage,sessionStorage存储数组对象

    localStorage存储数组,对象,localStorage,sessionStorage存储数组对象   前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...

  7. 网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp)

    转自原文 网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp) 最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决 ...

  8. localstorage本地存储的简单使用

    我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储. 1.localStorage.name="老王";      //第一种设置存储本地数据的方法loc ...

  9. localStorage本地存储技术

    localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...

随机推荐

  1. Socket类 以及 ServerSocket类 讲解

    Socket类 套接字是网络连接的端点,套接字使应用可以从网络中读取数据,可以向网络中写入数据.不同计算机上的两个应用程序可以通过连接发送或接收字节流,以此达到相互通信的目的. 为了从一个应用程序向另 ...

  2. 开发中mysql和oracle的区别

    首先就不描述mysql与oracle在整个数据库系统上的区别了,仅从程序员开发的角度来说: 1.主键: mysql一般会用到一个自增的属性,例如设置一个id字段,类型设置为auto increment ...

  3. 框架应用:Spring framework (三) - JDBC支持

    Spring框架是一个一站式的框架,也就是对很多技术和框架做了封装,使其应用更加简便. JDBC的代码过程 /STEP 1. Import required packages import java. ...

  4. OC Block网上转载

    1.block是一个特殊的OC对象, 它建立在栈上, 而不是堆上, 这么做一个是为性能考虑,还有就是方便访问局部变量. 2.默认情况下block使用到的局部变量都会被复制,而不是保留.所以它无法改变局 ...

  5. MVC轻量web应用

    前言:为了能够清晰的理解mvc架构,以一个简单的mvc架构web应用为例.例子为一个beer项目,用户可通过页面选择啤酒的种类,服务端根据用户的选择,给出相应的推荐. 涉及到的代码: view层:fo ...

  6. 动易CMS - 添加自定义字段

    SELECT TOP 10 * FROM PE_CommonModel C INNER JOIN PE_U_xsjg U ON C.ItemID=U.ID WHERE C.Status=99 ORDE ...

  7. JS设计模式(一) 单例模式

    命名空间 单例模式是JavaScript中最常见的一种模式,通过这种模式可以为我们提供一个命名空间,例如jQuery库的命名空间为jQuery或$.命名空间的使用是为了让代码更加整洁,在多人协作开发的 ...

  8. Zabbix(二) : Zabbix Server端配置文件说明

    Zabbix Server端配置文件说明 # This is a configuration file for Zabbix Server process # To get more informat ...

  9. mui框架移动开发初体验

      前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...

  10. 云计算---OpenStack Neutron详解

    简介: neutron是openstack核心项目之一,提供云计算环境下的虚拟网络功能 OpenStack网络(neutron)管理OpenStack环境中所有虚拟网络基础设施(VNI),物理网络基础 ...