前端杂记1

1.关于excel

（1）下载excel

<a :href="地址" download="" style="margin-left:10px;margin-top:10px;">(下载导入模板)</a>

（2）后台返回excel数据流前端下载excel文件

/*
*封装函数 downLoadFile.js
*params:  
*data:二进制文件
*/
exports.install = function (Vue, options){
  Vue.prototype.downloadFile =function(data){
    if (!data) {
      return
    }
    let url = window.URL.createObjectURL(new Blob([data]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', 'excel1111.xlsx')
    document.body.appendChild(link)
    link.click()
   };
}
设置请求头：responseType: 'blob', // 代表返回服务器返回的数据类型, 没有会乱码

 

 

2.v-if 合v-show

v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。

通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。

 

 

3.浏览器刷新

（1）详述-地址栏按回车刷新

     没有过时

     HTTP返回状态显示200 OK，可是请求并无真正提交到HTTP服务器，而是浏览器发现缓存中还有未过时的文件，直接把请求拦截了，firebug里面显示所谓的“请求头消息”、“响应头消息”都是浏览器“伪造”的。这种刷新，使用的网络流量  是 最小的，能够说彻底没有，时间消耗也是最少的

     过时

     再问一下服务器，请求的URI在某个时间以后有没有被修改过，而这个时间是由上次HTTP响应的Last-Modified决定的，服务器鉴定以后，若是没有修改则返回304 Not Modified，浏览器收到后，从缓存里读出内容；若是有修改则返回200 OK，并返回新的内容

（2） 按F5刷新

     我无论浏览器缓存中的文件过时没有，都去服务器询问一下，至关于上次HTTP响应的Expires暂时失效。服务器的响应处理流程同上。

（3）按Ctrl+F5刷新

     我不要缓存中的文件了，强制刷新，直接到服务器上从新下载，因而服务器的响应处理与首次请求这个URI同样，返回 200 OK和新的内容。这种刷新，使用的网络流量是最大的，也是最耗时的