<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[m0_47883103的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/m0_47883103</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; m0_47883103]]></copyright><item><title><![CDATA[CSS技巧：理发店门口的柱子效果]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108665671</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108665671</guid><author>m0_47883103</author><pubDate>Sat, 24 Oct 2020 14:05:16 +0800</pubDate><description><![CDATA[核心难点在于动画的首尾如何衔接上，需要自己尝试计算。

&lt;div class="bar"&gt;&lt;/div&gt;
&lt;div class="bar overflow"&gt;&lt;/div&gt;

scss
html,
body {
    width: 100%;
    height: 100%;
    display: flex;
}

.bar {
    position: relative;
    width: 400px;
    height: 30px;
    ]]></description><category></category></item><item><title><![CDATA[CSS技巧：背景图转换动画]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108665125</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108665125</guid><author>m0_47883103</author><pubDate>Fri, 18 Sep 2020 15:19:41 +0800</pubDate><description><![CDATA[主要借助了 mask-image，一张图片上应用 mask-image: linear-gradient(0, rgba(0, 0, 0,

40%, transparent 60%);，透明的部分则会凸显出另外一张图。


再利用动画，让 mask-image: linear-gradient 的角度旋转起来。


&lt;div class="a"&gt;&lt;/div&gt;
&lt;div class="b"&gt;&lt;/div&gt;

scss
$img2: '图片地址';

$img1.]]></description><category></category></item><item><title><![CDATA[CSS技巧：单标签实现抖音LOGO。]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108629235</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108629235</guid><author>m0_47883103</author><pubDate>Fri, 18 Sep 2020 09:57:50 +0800</pubDate><description><![CDATA[关键点

主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影
drop-shadow 只能是单层阴影，所以另一层阴影需要多尝试
contrast(150%) brightness(110%) 则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果


&lt;div&gt;&lt;/div&gt;

body {
    background: #000;
    overflow: hidden;
}

div {
    position: relative;
    ]]></description><category></category></item><item><title><![CDATA[Vue笨蛋学原理：渲染模型]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108650582</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108650582</guid><author>m0_47883103</author><pubDate>Fri, 18 Sep 2020 09:56:26 +0800</pubDate><description><![CDATA[这不是Vue的源码
这不是Vue的源码
这不是Vue的源码
只是为了帮助咱们去理解Vue的思想

创建一个属于自己的Vue，在这个函数里去执行挂载方法
 function myVue( options ) {
   this._data = options.data;
   // vue 是字符串, 这里是 DOM 
   this._template = document.querySelector( options.el ); 

   this.mount(); // 挂载
 } 

带有缓存功能的.]]></description><category></category></item><item><title><![CDATA[CSS技巧：阴影实现四角的原型缺口]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108629126</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108629126</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 20:34:26 +0800</pubDate><description><![CDATA[关键点

阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果
阴影实现缺点，单个标签最多只能是2个内切圆角
径向渐变实现内切圆角可以是4边


&lt;div class="shadow"&gt;使用阴影的扩散半径实现内切圆角&lt;/div&gt;
&lt;div class="shadow2"&gt;阴影实现缺点，单个标签最多是2边&lt;/div&gt;
&lt;div class="linear"&gt;使用径向渐变实现内切圆角&lt;/div&gt;
&l]]></description><category></category></item><item><title><![CDATA[CSS技巧：字体霓虹灯特效]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108628989</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108628989</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 19:32:54 +0800</pubDate><description><![CDATA[关键点

多重阴影的过渡效果与白色字体的叠加


&lt;div&gt;
    &lt;p class="pink"&gt;PINK&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;p class="orange"&gt;Box-Shadow&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;p class="yellow"&gt;YELLOW&lt;/p&gt;
&lt;/div&gt;

body {
    backgroun]]></description><category></category></item><item><title><![CDATA[CSS技巧：纯 CSS 单标签实现叉子图形]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108629192</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108629192</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 13:52:39 +0800</pubDate><description><![CDATA[关键点

使用多重阴影的特性，完成叉子的头部部分。


&lt;div&gt;&lt;/div&gt;

scss
div {
    position: relative;
    width: 140px;
    height: 140px;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    
    &amp;::before {
        content: "";
        position: abs]]></description><category></category></item><item><title><![CDATA[Vue笨蛋学原理：真实DOM转换为虚拟DOM]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108640156</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108640156</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 13:51:26 +0800</pubDate><description><![CDATA[为什么要使用虚拟DOM？

在js中操作DOM是一件很消耗性能的事
可能会造成回流和重绘
数据改变的时候虚拟DOM只对页面进行一次操作
使用虚拟DOM是为了提高性能

什么是虚拟DOM?

可以把虚拟DOM理解为一个用字符串表达的HTML标签
当然了，这个字符串是存放在对象数据类型里的

&lt;div/&gt;  =&gt; {tag:'div'}

&lt;div&gt;我是内容&lt;/div&gt; =&gt; {tag:'div',value:'我是内容'}

&lt;div title="1" ]]></description><category></category></item><item><title><![CDATA[CSS技巧： box-shadow 实现半透明遮罩]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108629064</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108629064</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 12:31:25 +0800</pubDate><description><![CDATA[&lt;p&gt;背景文字背景文字背景文字背景文字&lt;/p&gt;
&lt;div&gt;Hover Me&lt;/div&gt;

div {
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid #666;
    cursor: pointer;
    top: 50%;
    left: .]]></description><category></category></item><item><title><![CDATA[Vue笨蛋学原理：如何获取data里的对象类型里的数据]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108639090</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108639090</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 12:30:17 +0800</pubDate><description><![CDATA[在上一篇我们只考虑了单属性，比如：( {{ name }} ),而Vue中大量的使用层级，比如：( {{ child.name. firstName}} )

直接上代码

如何访问name.firstName呢？

let data = {
	name:{
		firstName:'刘'，,
		lastName:'亦菲'
	}
}


我们是使用xxx.yyy.zzz来访问对象里的数据，也就是点运算符
也可以说一个字符串路径来访问对象成员

function getValueByData(obj,pa.]]></description><category></category></item><item><title><![CDATA[Vue笨蛋学原理：数据(data)是如何出现在页面上的？]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108635271</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108635271</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 10:54:24 +0800</pubDate><description><![CDATA[谁都能看懂的Vue源码分析]]></description><category></category></item><item><title><![CDATA[CSS技巧：实现背景动画]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108628890</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108628890</guid><author>m0_47883103</author><pubDate>Thu, 17 Sep 2020 08:47:27 +0800</pubDate><description><![CDATA[关键点

当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影
box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）
background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的


&lt;div class="shadow"&gt;&lt;/div&gt;
&lt;div class="gradient"&gt;&lt;/div&gt;

.shadow {
    po]]></description><category></category></item><item><title><![CDATA[CSS技巧：阴影实现圆环进度条]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108628773</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108628773</guid><author>m0_47883103</author><pubDate>Wed, 16 Sep 2020 20:29:23 +0800</pubDate><description><![CDATA[效果图

&lt;div class="container"&gt;
    &lt;div class="shadow"&gt;Hover Me&lt;/div&gt;
&lt;/div&gt;

scss
$color: #e91e63;

body {
    background: #000;
}

.container {
    position: relative;
    overflow: hidden;
    width: 124px;
    height: 124px;
    o]]></description><category></category></item><item><title><![CDATA[笔记：前端性能的优化（总结）]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108627262</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108627262</guid><author>m0_47883103</author><pubDate>Wed, 16 Sep 2020 19:08:13 +0800</pubDate><description><![CDATA[优化的三大部分

对于图片的优化
减少http请求
减小http请求的大小

启用Gzip压缩
图片优化

图片懒加载
懒加载的时候先使用默认图占位，加载完成后依次加载真实图片
使用base64格式的图片
使用webp格式的图片
小的背景图片合成（精灵图）
使用svg图片
前台在请求图片的时候直接带上宽高，服务器直接把处理好的图片发过来
对于分辨率比较高的图片，服务器先发送一个分辨率很低的模糊图片，等到用户点击大图，或者网络空闲的时候在把高清大图请求回来替换

减少http请求

路由懒加载
重要的页面使用]]></description><category></category></item><item><title><![CDATA[笔记：axios的简单使用]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108473043</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108473043</guid><author>m0_47883103</author><pubDate>Tue, 08 Sep 2020 22:00:39 +0800</pubDate><description><![CDATA[概念
Axios是-个基于promise的HTTP库，可以用在浏览器和node.js中。类似jq的ajax
axios是一个已经封装好的ajax的一个库
不支持jsonp
优点

从浏览器中创建XML HttpRequests
从node.js 创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF (跨站请求伪造)

挂载到Vue实例

可以把axios直接挂载Vue上，这样每个页面不用导入就可以直接用了

Vue.pr]]></description><category></category></item><item><title><![CDATA[笔记：Mock简单使用]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108473006</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108473006</guid><author>m0_47883103</author><pubDate>Tue, 08 Sep 2020 21:48:18 +0800</pubDate><description><![CDATA[作用
拦截ajax生成随机数据

安装

npm install mockjs -D


导入，建议写在main.js里

import Mock from 'mock' 

 const Mock = require('mock')


配置拦截
需要单独写个文件，在main.js文件里引入

Mock.mock('requestPath','GET',function(){
	return { name:'111'}
})



参数1 拦截的请求接口路径（可以是正则表达式）


参数2 拦截的请求方式]]></description><category></category></item><item><title><![CDATA[Vue：路由原理（hash）]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108400067</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108400067</guid><author>m0_47883103</author><pubDate>Fri, 04 Sep 2020 12:00:25 +0800</pubDate><description><![CDATA[没想到路由的原理这么简单]]></description><category></category></item><item><title><![CDATA[Vue笔记：路由之间的传参（手摸手教程）]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108387038</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108387038</guid><author>m0_47883103</author><pubDate>Thu, 03 Sep 2020 21:44:30 +0800</pubDate><description><![CDATA[看了这篇文章，我才知道，原来Vue路由这么简单]]></description><category></category></item><item><title><![CDATA[你不知道的parseInt]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108352227</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108352227</guid><author>m0_47883103</author><pubDate>Tue, 01 Sep 2020 23:04:09 +0800</pubDate><description><![CDATA[今天在控制台输入了以下代码

咦？！为什么会返回1呢？这难道不是吧13这个数转换为2进制返回么？
这引起了我的兴趣，接着我又输入了以下代码



这特么为啥？！
翻阅资料之后我得知

parseInt接受到参数之后，会对第一个参数进行解析
比如说第一个参数是345，那么就把这个数拆成3和4和5
拿上3和4和5去跟参数2做对比
参数2是一个进制数，去看参数1的每一位数是否在参数2的最大值之内
比如说2进制最大值为1，3进制最大值为2，依此类推。参数2最大值为36
如果发现任意一位数不在参数2的限制之内，则不在]]></description><category></category></item><item><title><![CDATA[Vue2.6+ 插槽新语法]]></title><link>https://blog.youkuaiyun.com/m0_47883103/article/details/108343261</link><guid>https://blog.youkuaiyun.com/m0_47883103/article/details/108343261</guid><author>m0_47883103</author><pubDate>Tue, 01 Sep 2020 17:10:01 +0800</pubDate><description><![CDATA[Vue里面插槽老的写法已经走在废弃的路上了，还不抓紧时间学一下最新的语法？]]></description><category></category></item></channel></rss>