keep-alive | 易学教程

Vue keep-alive 实现后退缓存，前进刷新

阅读更多关于 Vue keep-alive 实现后退缓存，前进刷新

为了实现前进页面展示初始状态，后退保留上次的数据。不过以下实现方式，一个页面只保留一次缓存。这个功能搞了一天，做个记录。先把router-view 放入keep-alive里 <keep-alive> <router-view ></router-view> </keep-alive> 在router.js里添加一个标识用于判断页面是否需要缓存 { path : '/home/vikeSearch' , component : resolve => require ( [ '../../search.vue' ] , resolve ) , meta : { keepAlive : true , // 此组件需要被缓存 } } 添加后退监听。 //判断是否是ie9,9以下无法没找到方法实现 if ( IEVersion ( ) == 9 ) { window . onhashchange = function ( ) { if ( ieBackFlag ) { Vue . isBack = true ; } else { Vue . ieBackFlag = true ; } } } else { window . onpopstate = function ( ) { Vue . isBack = true ; } } ie9 只能用onhashchange

keep-alive使用

阅读更多关于 keep-alive使用

<keep-alive> 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> <transition> <keep-alive> prop: include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。在2.1.0版本Vue中常见用法： // 组件 export default { name: 'test-keep-alive', data () { return { includedComponents: "test-keep-alive" } } } <keep-alive include="test-keep-alive">  <component></component> </keep-alive> <keep-alive include="a,b">  <component :is="view"></component> </keep-alive>  <keep-alive :include="/a|b/"> <component :is="view"><

跨域

阅读更多关于跨域

本文主要涉及三种跨域方法：JSONP、CORS、postMessage。 Q：为什么会出现跨域问题？ A：出于浏览器的同源策略限制，浏览器会拒绝跨域请求。 *注：严格的说，浏览器并不是拒绝所有的跨域请求，实际上拒绝的是跨域的读操作。浏览器的同源限制策略是这样执行的：通常浏览器允许进行跨域写操作（Cross-origin writes），如链接，重定向；通常浏览器允许跨域资源嵌入（Cross-origin embedding），如 img、script 标签；通常浏览器不允许跨域读操作（Cross-origin reads）。* Q：什么情况才算作跨域？ A：非同源请求，均为跨域。名词解释：同源 —— 如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（origin）。 img01 Q：为什么有跨域需求? A：场景 —— 工程服务化后，不同职责的服务分散在不同的工程中，往往这些工程的域名是不同的，但一个需求可能需要对应到多个服务，这时便需要调用不同服务的接口，因此会出现跨域。如何实现跨域通常，最常用的跨域方式有以下三种：JSONP、CORS、postMessage。 JSONP 单纯地为了实现跨域请求而创造的一个 trick。【实现原理】虽然因为同源策略的影响

CORS讲解

阅读更多关于 CORS讲解

跨域资源共享( CORS 不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 Fetch Web 字体 (CSS 中通过因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。 WebGL 贴图 drawImage CSSOM ）和 HTTP 认证相关数据）。 CORS 预检请求。本文称这样的请求为“简单请求”。若请求满足所有下述条件，则该请求可视为“简单请求”：使用下列方法之一： Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合之外的其他首部字段。该集合为： Accept Accept-Language Content-Language DPR Downlink Save-Data Viewport-Width Width text/plain multipart/form-data application/x-www-form-urlencoded 请求中的任意 XMLHttpRequestUpload XMLHttpRequestUpload 注意: var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain(

vue动态子组件的实现方式

阅读更多关于 vue动态子组件的实现方式

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件。 <div id = "example" > <button @ click = "change" > 切换页面 </button> <component : is = "currentView" ></component> </div> <script> var home = { template : '<div>我是主页</div>' }; var post = { template : '<div>我是提交页</div>' }; var archive = { template : '<div>我是存档页</div>' }; new Vue ({ el : '#example' , components : { home , post , archive , }, data :{ index : 0 , arr :[ 'home' , 'post' , 'archive' ], }, computed :{ currentView (){ return this . arr [ this . index ]; } }, methods :{ change (){ this . index = (++ this . index

vue-manage-system 后台管理系统开发总结

阅读更多关于 vue-manage-system 后台管理系统开发总结

vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板，从2016年年底第一个commit，到现在差不多两年了，GitHub上也有了 5k star，也是这些让我有了持续更新的动力，其中也踩了很多坑，在这总结一下。 github地址： vue-manage-system 线上地址： blog.gdfengshuo.com/example/work/ element-ui 自带的字体图标比较少，而且许多比较常见的都没有，因此需要自己引入自己想要的字体图标。最受欢迎的图标库 Font Awesome，足足有 675 个图标，但也因此导致字体文件比较大，而项目中又不需要用到这么多图标。那么这时候，阿里图标库就是一个非常不错的选择。首先在阿里图标上创建一个项目，设置图标前缀，比如 el-icon-lx，设置Font Family，比如 lx-iconfont，添加需要用到的图标到项目中，我这边选择 Font class 生成在线链接，因为所有页面都需要用到图标，就直接在 index.html 中引入该css链接就行了 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-manage-system</title>  <link

“Connection: Keep-Alive” in server response

阅读更多关于 “Connection: Keep-Alive” in server response

I'm trying to establish a HTTP persistent connection from a Silverlight application to a PHP page (ie without creating a new TCP connection for each HTTP request) hosted by an Apache server. To this end, I need the webserver to send its HTTP responses with the "Connection" header set to "Keep-alive". Client-side, there doesn't seem to be any issue as the network API provided by Silverlight is basically a wrapper of the browser network capabilies, from what I've read : so if the browser supports HTTP 1.1 and Connection: Keep-Alive by default for its requests, it's fine. Content-Length is also

Vue--使用2

阅读更多关于 Vue--使用2

三十六-四十：组件生命周期钩子函数和图解 <body> <div id="main"> <App /> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var Test = { data(){ return{ msg:'哈哈哈', } }, template:`<div id="test"> <h3>{{msg}}</h3> <button type="button" @click="clickHandler">修改msg</button> </div> `, methods:{ clickHandler(){ this.msg += 'alex' } }, //组件创建之前用的不多 beforeCreate() { //一般不用 console.log('组件创建前：'+this.msg); //undefined }, //组件创建之后 created() { //可以操作数据，发送ajax请求，并且可以实现 //vue对页面的影响应用：发送ajax请求 console.log('组件创建后：'+this.msg); //哈哈哈 }, //装载数据到DOM之前用的不多

keep-alive缓存

阅读更多关于 keep-alive缓存

在vue官方文档介绍中，<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。我们可以看到在2.1.0版本新增了include和exclude属性，2.5版本新增了max属性，属性的特征如下： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 keep-alive是个抽象组件（或称为功能型组件），实际上不会被渲染在DOM树中。它的作用是在内存中缓存组件（不让组件销毁），等到下次再渲染的时候，还会保持其中的所有状态，并且会触发activated钩子函数。因为缓存的需要通常出现在页面切换时，所以常与router-view一起出现：如此一来，每一个在router-view中渲染的组件，都会被缓存起来。如果只想渲染某一些页面/组件，可以使用keep-alive组件的include/exclude属性。include属性表示要缓存的组件名（即组件定义时的name属性），接收的类型为string、RegExp或string数组；exclude属性有着相反的作用，匹配到的组件不会被缓存

ngIdle - How to clear and reset interrupts in Angular

阅读更多关于 ngIdle - How to clear and reset interrupts in Angular

I have integrated ngidle library in my app and i am showing dialog with timeout value . I would like to stop the timer value only on interactions on the dialog . not on the screen so on nginit i have set the default interrrupts and on timeout warning i am clearing the interrupts but i am not able to reset the interrupts . The sample code is below , Please check and let me know if anything goes wrong . ngOnInit() { // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); } this.idle.onTimeoutWarning

订阅 keep-alive