localstorage | 易学教程

这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

阅读更多关于这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用核心就是用localStorage存、取数据，这样当刷新浏览器，或者关闭在打开的时候能达到预期想要的效果在router/index.js中 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ {path:'/', redirect:'/home'}, {path:'/login',name:'登录',component:resolve =>{require(['@/components/login'],resolve)}}, {path:'/home',name:'首页',component:resolve =>{require(['@/components/home'],resolve)}} ] }) 其中redirect（默认跳转）可以直接写在home页面，刚进入页面直接跳转首页然后我们在home.vue的周期函数created里面做判断 Login的值状态（Login是在login.vue中localStorage存入的变量，现在我们先读取）

Vue框架基础

阅读更多关于 Vue框架基础

目录 Vue框架基础 vue导入 vue挂载点 vue变量 vue事件 vue文本指令 vue过滤器 vue事件指令 vue属性指令作业 vue表单指令 vue条件指令 vue循环指令 vue分隔符成员 vue计算属性成员 vue属性的监听 vue组件子组件的实际应用 vue组件传参-父传子 localStorage存数组 vue组件传参-子传父 Vue框架基础 vue导入 <script src="js/vue.js"></script> vue挂载点 <div id='app'></div> <script> new Vue (){ el:'#app', } </script> // el 为挂载点，采用css3选择器与页面标签进行绑定，决定该vue对象控制的页面范围 // 挂载点只检索也i按中第一个匹配到的结果，所以挂载点一般都采用id选择器 // html与body标签不可以作为挂载点 vue变量类似于Django中的模板语法 <div id="app"> <p>{{ msg }}</p> <p>{{ info }}</p> <h3>{{ msg }}</h3> </div> <script> new Vue (){ el:'#app', data:{ msg:'此处不留爷', info:'自有留爷处' } } console.log(app.$el);

localStorage和sessionStorage

阅读更多关于 localStorage和sessionStorage

两者都是浏览器端存储数据的接口。除了存储时长，两者完全一致。不同点： SessionStorage存储的数据只能用于一次会话(session)，当会话结束(浏览器关闭)，数据清空；而LocalStorage长期存在。 1. 特点 1. 以键值对存储；且以文本形式（字符串形式）存储。 2. 读取时存在跨域问题；只能被同域下网页读取。 3. 不同浏览器中，存储量在2.5-10M之间。 2. 实例属性只有一个length属性查看存储的个数 localStorage.length sessionStorage.length 3. 实例方法 1. setItem(key, value) 其中key, value都是字符串 localStorage.setItem('a', 'b'); sessionStorage.setItem('key', 'value'); // 也可以直接赋值 localStorage.b = 'c'; sessionStorage['c'] = 'd'; 2. getItem(key) 获取key对应的值 window.sessionStorage.getItem('key') window.localStorage.getItem('key') 3. removeItem(key) 删除key对应的值 sessionStorage.removeItem(

子组件以及父子组件之间的传参

阅读更多关于子组件以及父子组件之间的传参

子组件栗子：需要注意的点都在代码中注释标出来了 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 260px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { width: 100%; /*height: 200px;*/ border-radius: 50%; } .box p { text-align: center; } </style> </head> <body> <div id="app"> <div class="wrap"> <tag></tag>  <tag></tag> <tag></tag> <tag></tag> </div> </div> </body> <script src=

day vue框架

阅读更多关于 day vue框架

1、可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会相互独立 <style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 260px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { width: 100%; /*height: 200px;*/ border-radius: 50%; } .box p { text-align: center; } </style></head><body> <div id="app"> <div class="wrap"> <tag></tag> <tag></tag> <tag></tag> <tag></tag> </div> </div></body><script src="js/vue.js"></script><script> let titleTag = { template: ` <p> <b> 这是一种纯二哈 </b> </p

VUE基础

阅读更多关于 VUE基础

VUE基础 VUE 核心概念，不让用户操作DOM元素，让程序员可以更多的关注业务逻辑！（能帮我们减少不必要的DOM操作，提高渲染效率，双向数据绑定） MVVM M是界面的数据 V就是前端界面 VM是一个调度者，调度M和V之间的数据交换 <!DOCTYPE html> <html> <head> <title>VUE入门</title> <script src="vue.js"></script> </head> <body> <div id="zx125"></div> <script type="text/javascript"> new Vue({ el:"#zx125", template:'<p>{{zx}}</p>', data:{ zx:"HELLO VUE" } }) </script> </body> </html> 渐进式 Vue可以根据开发者的实际需求来不断渐进，而不是一口气全部用上挂载点 1.挂载点只检索页面中第一个匹配到的结果，所以挂载点一般都才有id选择器 2.html与body标签不可以作为挂载点创建vue实例（new Vue）传进去的字典(对象)的key，称之为vue实例成员(变量) 访问实例成员，用 vue实例.$成员名, eg：app.$el 默认.取值，取得就是data里面的值 console.log(zx.$data.zx);

【HTML5】Web存储 -- Storage

阅读更多关于【HTML5】Web存储 -- Storage

Web存储 -- Storage 2019-11-13 10:46:18 by冲冲 1、概念早期的本地/浏览器的存储使用cookie。当前的本地/浏览器的存储使用Storage。 2、浏览器支持 InternetExplorer7及更早IE版本不支持Storage。 IE8+, Firefox, Opera, Chrome, Safari已经支持Storage。使用storage之前，应该检查浏览器是否支持Storage。 1 if(typeof(Storage)!=="undefined") 2 { 3 // 支持localStorage和sessionStorage对象 4 // 业务代码..... 5 } else { 6 // 不支持web存储 7 } 3、Storage分类客户端/浏览器存储数据的两个Storage对象 ① localStorage - 用于长期保存整个网站的数据，数据的存储时间没有限制，直到手动去除。 ② sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 4、API localStorage和sessionStorage使用的API相同，常用的有（以localStorage为例） ① 保存数据：localStorage.setItem(key,value); ② 读取数据

JavaScript权威指南----一个JavaScript贷款计算器

阅读更多关于 JavaScript权威指南----一个JavaScript贷款计算器

废话不多说上例子代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>JavaScript Loan Calculator</title> 7 <style> 8 .output{font-weight: bold;} 9 #payment{text-decoration: underline;} 10 #graph{border: 1px solid black;} 11 th, td{vertical-align: top;} 12 13 </style> 14 </head> 15 16 <body> 17 <table> 18 <tr> 19 <th>Enter Loan Data:</th> 20 <td></td> 21 <th>Loan Balance,Cumulative Equity,and Interest Payments</th> 22 </tr> 23 <tr> 24 <td>Amount of the loan($):</td> 25 <td><input id="amount" οnchange="calculate();"/></td> 26  27 <td rowspan="8"><canvas id="graph" width=

09.26 腾讯校招前端一面经历

阅读更多关于 09.26 腾讯校招前端一面经历

1. 自我介绍 2. 对前端的理解 3. 为什么li中间会出现空隙 li{ display: inline-block; background: red; width: 300px; height: 100px; } <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> 浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个 <li> 放在一行，这导致 <li> 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。解决：方法一：为 <li> 设置 float: left 。不足：有些容器是不能设置浮动，如左右切换的焦点图等。方法二：将所有 <li> 写在同一行。不足：代码不美观。方法三：将 <ul> 内的字符尺寸直接设为0，即 font-size: 0 。不足： <ul> 中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。方法四：消除 <ul> 的字符间隔 letter-spacing: -8px ，而这也设置了 <li> 内的字符间隔，因此需要将 <li> 内的字符间隔设为默认 letter-spacing: normal 。 4. 实现图片瀑布流(自适应多列)

本地存储（sessionStrorage，）

阅读更多关于本地存储（sessionStrorage，）

1、本地存储特性　1. 数据存储在用户浏览器中　2. 设置，读取方便，设置页面刷新不丢失数据　　　3. 容量较大，sessionStorage约5M，localStorage约20M 　4. 只能存储字符串，可以将对象JSON.stringify() 编码后存储 2、window.sessionStorage 　1.生命周期为关闭浏览器窗口　2.在同一个窗口（页面）下数据可以共享　3.以键值对的形式存储使用存储数据：　sessionStorage.setItem(key,value);　例：sessionStorage.setItem('uname','andy'); 获取数据： sessionStorage.getItem(key);　例：sessionStorage.getItem('uname'); 删除数据： sessionStorage.removeItem(key);　例：sessionStorage.removeItem('uname'); 删除所有数据：　 sessionStorage.clear(); //尽量避免使用 3、window.localStorage 　1. 生命周期永久生效，除非手动删除，否则关闭页面也会存在　　　2. 可以多窗口（页面）共享（同一浏览器可以共享）　3. 以键值对的形式存储使用存储数据：

订阅 localstorage