<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Mrbignose的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Mrbignose</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Mrbignose]]></copyright><item><title><![CDATA[vue3 | 在createVNode 或者 h函数中 设置ref]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/127341767</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/127341767</guid><author>Mrbignose</author><pubDate>Sat, 15 Oct 2022 22:32:22 +0800</pubDate><description><![CDATA[在vue3中使用createVNode或者h函数设置ref属性，开发环境下可以正常使用，生产环境中报错]]></description><category></category></item><item><title><![CDATA[vue3新特性 | ＜style＞ 中使用js变量]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/127323577</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/127323577</guid><author>Mrbignose</author><pubDate>Fri, 14 Oct 2022 16:50:00 +0800</pubDate><description><![CDATA[使用vue3的新特性，可以直接在中使用js变量，提高效率]]></description><category></category></item><item><title><![CDATA[搞定阿里云oss图片请求跨域]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107445163</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107445163</guid><author>Mrbignose</author><pubDate>Sun, 19 Jul 2020 14:48:31 +0800</pubDate><description><![CDATA[阿里云oss图片请求跨域解决方案
在一次实现图片下载的方案中使用了axios来实现图片下载(vue实现图片下载)，实现过程中引用了百度图片的地址和阿里云oss上图片的地址，发现在请求阿里云oss上的图片会出现跨域报错，于是上网百度了一下，具体原因是：当 OSS 收到一个跨域请求（或者 OPTIONS 请求）时，会读取存储空间对应的 CORS 规则，然后进行相应的权限检查。OSS 会依次检查每一条规则，使用第一条匹配的规则来允许请求并返回对应的 header。如果所有规则都匹配失败，则不附加任何 CORS 相]]></description><category></category></item><item><title><![CDATA[vue实现图片下载功能so easy]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107444333</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107444333</guid><author>Mrbignose</author><pubDate>Sun, 19 Jul 2020 14:22:46 +0800</pubDate><description><![CDATA[vue实现图片下载功能so easy

1.在前端实现图片下载分为同源图片下载和非同源图片下载
2.解决方案可以根据同源和非同源来制定

同源图片下载方案

html中可以这样写

&lt;a href="./img/logo.png" download="logo.png"&gt;&lt;/a&gt;


javascript中可以这样写

function imgDownload(url,name){
	//创建一个a标签
	const a_b = document.createElement('a')]]></description><category></category></item><item><title><![CDATA[用vue3.0写一个简单的todo功能]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107435223</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107435223</guid><author>Mrbignose</author><pubDate>Sat, 18 Jul 2020 21:29:41 +0800</pubDate><description><![CDATA[用vue3.0写一个简单的todo功能
 vue3.0bate版文档
创建项目

1.创建一个index.html文件，并引入&lt;script src=“https://unpkg.com/vue@next”&gt;

touch index.html

开始写入代码

1.写好基本的结构

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta nam]]></description><category></category></item><item><title><![CDATA[Vue3.0输出hello world]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107427517</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107427517</guid><author>Mrbignose</author><pubDate>Sat, 18 Jul 2020 13:19:20 +0800</pubDate><description><![CDATA[Vue3.0输出hello world
vue3.0官方文档

html部分

&lt;div id="app"&gt;
        &lt;h1&gt;{{message}}&lt;/h1&gt;
&lt;/div&gt;


javascript部分

 const App = {
            data(){
                return{
                    message:"hello Vue3.0"
                }
     ]]></description><category></category></item><item><title><![CDATA[最强markdown编辑神器typory配置图床]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107349101</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107349101</guid><author>Mrbignose</author><pubDate>Tue, 14 Jul 2020 22:28:37 +0800</pubDate><description><![CDATA[typory配置图床
最强markdown编辑器typora图床教程- smms版
最强markdown编辑器typora图床教程- 阿里云版
最强markdown编辑器typora图床教程- 七牛云版
总结
 其他的存储资源可以根据配置文件来修改

]]></description><category></category></item><item><title><![CDATA[手写一个javascript深拷贝不香吗]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107325165</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107325165</guid><author>Mrbignose</author><pubDate>Mon, 13 Jul 2020 21:42:10 +0800</pubDate><description><![CDATA[标题
 手写一个javascript深拷贝不香吗?!
背景
学过js的小伙伴都知道浅拷贝和深拷贝,
像简单的复制,Object.assin()(只有一层数据的时候),concat()等之类的都是浅拷贝，
深拷贝像JSON.parse(JSON.stringify())等之类的
但是在实际项目中,深拷贝的用到的次数非常多的，而JSON.stringify()有比较消耗性能(特别是在数据多的情况下)，这个时候我们手写一个递归的深拷贝方法是有必要的

深拷贝–JSON.parse(JSON.stringify()]]></description><category></category></item><item><title><![CDATA[搞定vue项目开发环境下的跨域代理]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107251125</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107251125</guid><author>Mrbignose</author><pubDate>Fri, 10 Jul 2020 14:58:21 +0800</pubDate><description><![CDATA[跨域知识
同源政策
1.三同
协议相同 (比如：http://)
域名相同 (比如：www.baidu.com)
端口相同 (比如：80，默认情况下是可以省略的)

2.目的

保证用户信息的安全，防止恶意的网站窃取数据

3.限制范围
1.Cookie、LocalStorage 和 IndexDB 无法读取

2.DOM 无法获得

3.AJAX 请求不能发送

跨域产生
产生跨域的原因就是不同源的请求违反了浏览器里的同源政策

vue跨域代理详解
解决跨域的方法是非常多的，像jsonp,cors,nod]]></description><category></category></item><item><title><![CDATA[搞定postman带token请求]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107237581</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107237581</guid><author>Mrbignose</author><pubDate>Thu, 09 Jul 2020 21:04:58 +0800</pubDate><description><![CDATA[搞定postman带token请求
当我们拿到接口文档的时候，总是想先测试一下接口是否正常使用，如果不用带认证的接口请求还好，直接复制一下接口地址到输入框中，设置一下请求方式就可以测试了。但是遇到一些需要带token的，或者form-data格式的，则需要进行一些设置才能正常使用
1.新建一个测试环境


1.1打开postman,在工作台的右上方找到一个设置的图标，并打开它。如下图所示



1.2点击add按钮新建环境



1.3输入环境名字，我在这里写的是blog,名字可以根据你自己的意愿而定；并添]]></description><category></category></item><item><title><![CDATA[一个新鲜的vue+element-ui的简单实战项目出炉了]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107231107</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107231107</guid><author>Mrbignose</author><pubDate>Thu, 09 Jul 2020 16:10:19 +0800</pubDate><description><![CDATA[欢迎来喷！！(手动狗头)
ssypp-blog

一个简单的pc和移动端的案例

移动端显示效果













pc端效果展示











	
背景


1.以往的项目同时适配pc端和移动端是分开来单独开发的


2.单端类型项目多，要么pc端适配，要么移动端适配


3.想要在个人的项目中写一套适配pc和移动端


技术选择

vue全家桶系列(vue+(axios+qs)+vue-router+vuex)
es6的一些写法
ui框架-element(主要以栅格系统为主)
webpa]]></description><category></category></item><item><title><![CDATA[axios+qs简单实现post请求form-data格式]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107130962</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107130962</guid><author>Mrbignose</author><pubDate>Sat, 04 Jul 2020 22:05:03 +0800</pubDate><description><![CDATA[axios+qs简单实现post请求form-data格式

有的时候后台接口以form-data的格式来接收参数，那么默认的写法后台是拿不到参数的，这个时候前端必须得以form-data的格式来传递


核心知识


1.引入qs

npm install -save qs
#or
&lt;script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"&gt;&lt;/script&gt;

qs官网地址

2.引入axios

npm ]]></description><category></category></item><item><title><![CDATA[pdf,word,ppt在线预览]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107110815</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107110815</guid><author>Mrbignose</author><pubDate>Fri, 03 Jul 2020 17:58:43 +0800</pubDate><description><![CDATA[pdf,word,ppt在线预览

先展示下效果

pdf跟ppt的预览效果：

word的预览效果


实现过程-只需一个iframe标签即可

详细介绍请看这里
&lt;iframe 
src="http://view.xdocin.com/xdoc?_xdoc=http://image.cache.timepack.cn/nodejs.pdf"
style="width:100%,height:100vh;border:0"&gt;
&lt;/iframe&gt;


...]]></description><category></category></item><item><title><![CDATA[vue+element-ui实现表格中的删除按钮加载动画]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107091414</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107091414</guid><author>Mrbignose</author><pubDate>Thu, 02 Jul 2020 19:39:21 +0800</pubDate><description><![CDATA[vue+element-ui实现表格中的删除按钮加载动画
背景：
在同事的项目中有这样的一个要求：
就在在表格中的操作栏有一个删除按钮，点击的时候加载loading的动画，加载完毕后loading动画停止。
同事开始的时候是全局定义一个isLoading的变量来控制，
结果发现每点击一个删除按钮，就会导致所有的按钮加载loading动画。
真棒！bug又出现了，琢磨了代码一番，于是有了一下的方案！

思路
导致bug的原因是因为共用这个全局的变量，既然全局不行，那么我们就可以从每一行来控制
1.放弃data]]></description><category></category></item><item><title><![CDATA[forEach、for in、for of的区别对比]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107072592</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107072592</guid><author>Mrbignose</author><pubDate>Wed, 01 Jul 2020 23:12:21 +0800</pubDate><description><![CDATA[其实这三个方法我们在项目中经常用到，但是如果要你说出这三者的区别和各自的特点是什么？我想肯定会有人会卡住在这了。反正我是被卡住了(此处手动狗头)，下面就来记录下这三者的区别和用法吧
一、forEach介绍
forEach详细的介绍查看这里

1.forEach() 方法对数组的每个元素执行一次给定的函数。

const arr = [1,2,3];
arr.forEach(callback) //callback表示指定的函数
callback(currentValue,index,[])


2.forE]]></description><category></category></item><item><title><![CDATA[vue实现省市县三级联动，超简单]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/107042903</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/107042903</guid><author>Mrbignose</author><pubDate>Tue, 30 Jun 2020 15:09:16 +0800</pubDate><description><![CDATA[vue实现省市县三级联动，超简单
最近在朋友的项目中碰到用vue实现省市县三级联动的需求，按照我以往的套路来说，基本都是找ui框架里的联级选择器一把梭哈，但是朋友说需要自己实现。好吧，既然朋友都说了要自己实现，那就安排吧！！
一、vue实现省市县三级联动(不用插件版)
必备条件：
1.全国省市县数据(json格式)
2.vue基础
实现步骤：
html部分
&lt;div id="app"&gt;
    &lt;select  v-model="sheng" &gt;
        &lt;option]]></description><category></category></item><item><title><![CDATA[js获取excel中的时间转换]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/104711891</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/104711891</guid><author>Mrbignose</author><pubDate>Sat, 07 Mar 2020 11:35:24 +0800</pubDate><description><![CDATA[背景
通过js的xlsx第三方插件来读取excel中的数据，发现时间这一栏的数据只是一个整数，而这个整数既不是时间戳也不是时间。

解决

这个整数值是日期距离1900年1月1日的天数，所以我们需要转换

//timeValue是指excel中的时间整数值
function formatDate(timeValue) {
    let time = new Date((timeValue- 1)...]]></description><category></category></item><item><title><![CDATA[详解 input accept属性]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/104710107</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/104710107</guid><author>Mrbignose</author><pubDate>Sat, 07 Mar 2020 10:12:48 +0800</pubDate><description><![CDATA[input accept属性是用来限制上传的文件格式
 &lt;input type="file" id="file" style="display:none;"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /&gt;
&lt;a href="javascrip...]]></description><category></category></item><item><title><![CDATA[jQuery中常用选择器(下)]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/104653016</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/104653016</guid><author>Mrbignose</author><pubDate>Wed, 04 Mar 2020 14:23:24 +0800</pubDate><description><![CDATA[内容选择过滤器
//1.查找含有指定内容的元素:contains(text)
 console.log($('#app li:contains(列表)')) //jQuery.fn.init(3) [li.item1, li.item2, li.item3, prevObject: jQuery.fn.init(1)]
//2.匹配所有不包含⼦元素或者⽂本的空元素:empty
 console.l...]]></description><category></category></item><item><title><![CDATA[jQuery中的常用选择器(上)]]></title><link>https://blog.youkuaiyun.com/Mrbignose/article/details/104644761</link><guid>https://blog.youkuaiyun.com/Mrbignose/article/details/104644761</guid><author>Mrbignose</author><pubDate>Tue, 03 Mar 2020 23:38:22 +0800</pubDate><description><![CDATA[1.基础选择器
&lt;div id='app'&gt;
	&lt;p class='p1'&gt;类选择器&lt;p&gt;
	&lt;h3&gt;标签选择器&lt;/h3&gt;
	&lt;ul&gt;
		&lt;li class="item1"&gt;列表1&lt;/li&gt;
		&lt;li class="item2"&gt;列表2&lt;/li&gt;
		&lt;li class...]]></description><category></category></item></channel></rss>