m0_47883103的博客

原创 CSS技巧：理发店门口的柱子效果

核心难点在于动画的首尾如何衔接上，需要自己尝试计算。<div class="bar"></div><div class="bar overflow"></div>scsshtml,body { width: 100%; height: 100%; display: flex;}.bar { position: relative; width: 400px; height: 30px;

原创 CSS技巧：背景图转换动画

主要借助了 mask-image，一张图片上应用 mask-image: linear-gradient(0, rgba(0, 0, 0,40%, transparent 60%);，透明的部分则会凸显出另外一张图。再利用动画，让 mask-image: linear-gradient 的角度旋转起来。<div class="a"></div><div class="b"></div>scss$img2: '图片地址';$img1.

原创 CSS技巧：单标签实现抖音LOGO。

关键点主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影drop-shadow 只能是单层阴影，所以另一层阴影需要多尝试contrast(150%) brightness(110%) 则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果<div></div>body { background: #000; overflow: hidden;}div { position: relative;

原创 Vue笨蛋学原理：渲染模型

这不是Vue的源码这不是Vue的源码这不是Vue的源码只是为了帮助咱们去理解Vue的思想创建一个属于自己的Vue，在这个函数里去执行挂载方法 function myVue( options ) { this._data = options.data; // vue 是字符串, 这里是 DOM this._template = document.querySelector( options.el ); this.mount(); // 挂载 } 带有缓存功能的.

原创 CSS技巧：阴影实现四角的原型缺口

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

原创 CSS技巧：字体霓虹灯特效

关键点多重阴影的过渡效果与白色字体的叠加<div> <p class="pink">PINK</p></div><div> <p class="orange">Box-Shadow</p></div><div> <p class="yellow">YELLOW</p></div>body { backgroun

原创 CSS技巧：纯 CSS 单标签实现叉子图形

关键点使用多重阴影的特性，完成叉子的头部部分。<div></div>scssdiv { position: relative; width: 140px; height: 140px; margin: auto; border-radius: 50%; background: #fff; &::before { content: ""; position: abs

原创 Vue笨蛋学原理：真实DOM转换为虚拟DOM

为什么要使用虚拟DOM？在js中操作DOM是一件很消耗性能的事可能会造成回流和重绘数据改变的时候虚拟DOM只对页面进行一次操作使用虚拟DOM是为了提高性能什么是虚拟DOM?可以把虚拟DOM理解为一个用字符串表达的HTML标签当然了，这个字符串是存放在对象数据类型里的<div/> => {tag:'div'}<div>我是内容</div> => {tag:'div',value:'我是内容'}<div title="1"

原创 CSS技巧： box-shadow 实现半透明遮罩

<p>背景文字背景文字背景文字背景文字</p><div>Hover Me</div>div { position: absolute; width: 200px; height: 60px; line-height: 60px; text-align: center; border: 1px solid #666; cursor: pointer; top: 50%; left: .

原创 Vue笨蛋学原理：如何获取data里的对象类型里的数据

在上一篇我们只考虑了单属性，比如：( {{ name }} ),而Vue中大量的使用层级，比如：( {{ child.name. firstName}} )直接上代码如何访问name.firstName呢？let data = { name:{ firstName:'刘'，, lastName:'亦菲' }}我们是使用xxx.yyy.zzz来访问对象里的数据，也就是点运算符也可以说一个字符串路径来访问对象成员function getValueByData(obj,pa.

原创 Vue笨蛋学原理：数据(data)是如何出现在页面上的？

谁都能看懂的Vue源码分析

原创 CSS技巧：实现背景动画

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

原创 CSS技巧：阴影实现圆环进度条

效果图<div class="container"> <div class="shadow">Hover Me</div></div>scss$color: #e91e63;body { background: #000;}.container { position: relative; overflow: hidden; width: 124px; height: 124px; o

原创 笔记：前端性能的优化（总结）

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

原创 笔记：axios的简单使用

概念Axios是-个基于promise的HTTP库，可以用在浏览器和node.js中。类似jq的ajaxaxios是一个已经封装好的ajax的一个库不支持jsonp优点从浏览器中创建XML HttpRequests从node.js 创建http请求支持Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF (跨站请求伪造)挂载到Vue实例可以把axios直接挂载Vue上，这样每个页面不用导入就可以直接用了Vue.pr

原创 笔记：Mock简单使用

作用拦截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 拦截的请求方式

原创 Vue：路由原理（hash）

没想到路由的原理这么简单

原创 Vue笔记：路由之间的传参（手摸手教程）

看了这篇文章，我才知道，原来Vue路由这么简单

原创 你不知道的parseInt

今天在控制台输入了以下代码咦？！为什么会返回1呢？这难道不是吧13这个数转换为2进制返回么？这引起了我的兴趣，接着我又输入了以下代码这特么为啥？！翻阅资料之后我得知parseInt接受到参数之后，会对第一个参数进行解析比如说第一个参数是345，那么就把这个数拆成3和4和5拿上3和4和5去跟参数2做对比参数2是一个进制数，去看参数1的每一位数是否在参数2的最大值之内比如说2进制最大值为1，3进制最大值为2，依此类推。参数2最大值为36如果发现任意一位数不在参数2的限制之内，则不在

原创 Vue2.6+ 插槽新语法

Vue里面插槽老的写法已经走在废弃的路上了，还不抓紧时间学一下最新的语法？

原创 Vue笔记：插槽的使用

先创建父子关系<div id='father'> <h1>{{ name }}</h1> <son></son></div><template id='son'> <div> <h1>{{ name }}</h1> </div><template>const son = { template:'#son', data()

原创 Vue笔记：动画效果

动画效果利用 v-bind 给元素添加不同的类名，这些类名是提前写好的动画，以此来达到动画效果利用transition标签包裹住需要产生动画效果的标签transition中的子元素需要有v-show或者v-if来控制是否显示transition标签里的name属性决定使用那一个动画效果例子先定义动画效果 .fade-enter-active { transition: all ease 2s; } .fade-enter { opacity: 0; }

原创 Vue2.x 父子组件之间的相互访问

儿子对爹说：“爹！你的车今天我开了”

原创 Vue 2.x 父子组件之间的通信

在Vue的世界里，爹和儿子之间的沟通是不是也想现实世界里一样呢？

原创 vue2.x带你手写响应式代码（响应式原理）

vuex响应式原理？其实很简单啦！！一步一步带你写

原创 v-if和v-show的区别（一语道破）

v-if来看看官方文档对于v-if的定义v-show来看看官方文档对于v-show的定义区别v-if在渲染的时候相当于就没有创建这个dom节点，这个元素

原创 为什么组件中的data必须是一个函数？

先看一下官方文档是怎么说的官方文档其实想表达的意思是，让每一个组件都有自己的数据每次调用的时候都会return一个新的数据让各个组件之间的数据不会相互影响理解一下上代码，// 创建一个对象 const obj = { name: '超人', age: 20 }// 通过这个函数分发 function giveData() { return obj }// 通过函数创建出来三个 const obj1 = giveData() const o

原创 Vue笔记：组件化

组件化思想人面对复杂问题的处理方式:1: 任何一个人处理信息的逻辑能力都是有限的2: 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。3:但是,我们人有一种天生的能力 ,就是将问题进行拆解。4:如果将一个复杂的问题 ,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃组件化也是类似的思想1:如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。2:但如果,我们讲一个页面拆分成一个个小

原创 Vue笔记：自定义指令

自定义指令作用操作底层dom例子使用注意传参时的格式创建当组件被创建直接自动传入了一个el参数，el就是使用这个指令的dom谁用这个指令，谁的背景变成红色传过来的参数在bind.value里局部自定义指令局部自定义指令不用Vue.,而是接收了一个directives使用创建指令生命周期指令和组件是两套东西bind() { //... }当指令绑定到 HTML 元素上时触发只调用一次inserted(){ //... }只执行一次被绑定元

原创 Vue笔记：指令（3）

v-modelv-model主要用来绑定表单，通过v-model实现双向绑定v-model实现表单元素和数据的双向绑定双向绑定可以简单理解为，你可以更改我，我也可以更改你input里有一个内部事件叫做input用于动态监听有没有输入东西v-model的原理：相当于 v-bind:value=’’ 和 v-on:input 两个指令的结合v-model绑定radio如果绑定了v-model，name属性可以不写，因为已经是互斥的了可以直接赋给sex一个初始值(男or女)，来实现默认

原创 Vue笔记：指令（2）

v-bind语法糖动态改变标签的属性值两个class不会重复，内部会合并v-bind绑定style样式50px(value)需要加上引号，不然vue会认为他是变量，会报错精进版本v-on可以直接写操作，复杂的时候也可以调用methods里的方法语法参数问题如果该方法不需要额外参数，那么方法后面的()可以不添加@事件=函数名。 加不加小括号主要看需不需要传参数如果方法中本身有一个参数，那么会默认将原生事件event参数传递进去如果需要同时传递某个参数，同时需要e

原创 Vue笔记：指令（1）

原创 Vue笔记：watch（侦听属性）

watch（侦听属性）例子cosnt app = new Vue({//... watch:{ 要监听的属性:{ handler(新值，旧值){ //... }， 功能属性 } }})handler给 监听的属性 绑定了一个handler方法，之前写的 watch 方法其实默认写的就是这个handler，Vue会去处理这个逻辑，最终编译出来其实就是这个handler默认watch最初绑定的时候不会执行，要等到 监听的属性 改变之后才会执行功能属性imm

原创 Vue笔记：filters（过滤器）

filters（过滤器）使用方法<img :src='data | 方法名'>就是把数据data 放到 方法 函数里过滤一下创建const app = new Vue({ //。。。 filters:{ 方法名(参数) { return 过滤方法 } }})第一种<img :src='filtration(data)'>methods:{ filtration(data) { return data.过滤 }}第二种&lt

原创 跨域技术之jsonp

随着前端的飞速发展，近些年 jsonp技术应用的越来越少，但是我们还是需要详细的去了解jsonp，这对于我们如何去和后台配合有极大的意义jsonp在

原创 笔记：Git版本管理系统

Git是一个版本管理系统（VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录回复过来版本管理版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件的内容使用步骤先下载git（https://npm.taobao.org/mirrors/git-for-windows/）一路下一步，安装完成之后，会在鼠标右键菜单出现，最常用的 Git bash here命令查看版本git --version查看分支git branch

原创 笔记：Less的简单使用方法（css前置处理器）

Less包含一套自定义的语法和一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件变量格式@变量名：值不能包特殊字符，不能以数字开头，大小写敏感嵌套格式父级元素{ css样式； 子集元素{ css样式 }}交集|伪类|伪元素选择器内层选择器前如果没有 & 符号，会被解析为父系的子代如果有 & 符合，会被解析成父元素自身或者父元素的伪类父级元素{ css代码； &：hover{ c

原创 笔记：TypeScript泛型

泛型**就是解决 类 接口 方法 的复用性，以及对不特定数据类型的支持**泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。可以支持不特定的数据类型T 表示泛型，具体什么类型是用的时候决定的，可以用任意字母，建议用 T泛型函数function 函数名<T>(参数类型:T):T{ //...}调用函数名<参数数据类型>(值)泛型类class 类名<T>{

原创 笔记：TypeScript接口

在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵循的规范，接口不关心这些类的内部状态数据，也不关心这些类里的方法的实现细节，它只规定这批类里必须提供某些方法，提供某些方法，提供这些方法的类就可以满足实际需要。通过 interface 关键字定义接口属性类接口对 json 的约束interface 父类名{ 子类必须属性a:数据类型; 子类必须属性b:数据类型;}function 子类名(参数类

原创 笔记：TypeScript实现面向对象

面向对象定义一个类class 类名{ 名称:数据类型； constructor(参数:数据类型){ } // 构造函数 方法名():返回值类型{ }}省略了 public 关键字构造函数 实例化的时候触发属性修饰符用来修饰类里面的属性和方法public 公有 类里面，类外面，子类，都可以访问 protected 保护 类里面，子类，可以访问 provite 私有 只有在 类里面 可以访问 继承的方法super 是为了初始化父类的构造函数，这