前端杂记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和新的内容。这种刷新，使用的网络流量是最大的，也是最耗时的