潇潇-潇潇-CSDN博客

原创 git - 使用

1. git是什么? git是一个开源的分布式版本控制系统 2. window安装git(1)官方下载地址：https://git-scm.com/download/win(2)安装步骤：https://blog.csdn.net/m0_37450089/article/details/120939158(3)开始命令中输入git查看是否安装成功（GUI为用户界面模式,Bash为命令行模式）3.介绍bash模式(1)查看版本： git --versiongit是分布式管理工具，需要输.

2022-01-20 11:04:13 251

原创 Vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。双向绑定的具体步骤1.需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，当我们给某个对象赋值时，就会触发setter，监听到数据变化。2.compile解析模板指令，将模板中的变量替换成数据，渲染页面视图。并将每个指令对应的节点绑定更新函数

2022-01-06 16:40:43 524

原创 css - 新特性？

css3的新特性？1.新增各种 CSS 选择器2.弹性盒模型 display: flex;3.媒体查询 @media （max-width: 480px）4.颜色透明度 color: rgba（255, 0, 0, 0.75）5.圆角 border-radius: 5px;6.阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）7.渐变 background:linear-gradient（red, green, blue）；8.旋转 transfo

2021-12-24 17:13:54 223

原创 es - 数组去重汇总

数组去重 (1)：es6 中 new set()去重 let arr = [1, 2, 3, 4, 4, 4] let arrR = [...new Set(arr)] console.log(arrR) // [1, 2, 3, 4](2)： reduce + includes去重 let a3 = [1, 2, 3, 4, 5, 6, 6, 6, 6] let a2 = a3.reduce((prev, cur) => { if (!prev.includes(

2021-12-24 16:46:28 1065

原创 es - 几种常用的循环汇总

// 平平无奇：for循环 var arr = [1, 2, 3, 4] for (var i = 0; i < arr.length; i++) { console.log(arr[i]) } // for in 循环 var arr = [1, 2, 3, 4] for (i in arr) { console.log(arr[i]) } // for of 循环（需要es6支持） var arr = [1, 2, 3, 4] for..

2021-12-24 15:44:41 751

原创 es - 数组方法大全

es3数组常用方法es5数组常用方法es6数组常用方法es7数组常用方法push()：添加 - 数组末尾let a = [1,2,3];a.push(4);console.log(a); [1,2,3,4]pop()：删除 - 数组末尾let a = [1,2,3];a.pop();console.log(a);[1, 2]3.unshift：添加 - 数组开头let a = [1,2,3];a.unshift(4);console.log(a);// [4, 1

2021-12-23 18:00:55 1714

原创 jquery - 插件实现loading

// loading.js(function ($) { $.fn.loading = function (options) { var $this = $(this); var _this = this; return this.each(function () { var loadingPosition = ''; var defaultProp = { direction: 'column',//方向，column纵向 row 横向 animateIn:

2021-12-21 16:54:23 1587

原创 es - promise

promise的作用：promise允许使用链式调用来解决回调地狱的问题，特别是在异步过程中，通过promise 可以保证代码的整洁性与可读性。promise的三个状态：promise对象代表一个异步操作，有三种状态：1.pengding:进行中2.fulfilled(resolved):已成功3.rejected:已失败状态由pending变为resolved，或者由pending变为rejected，都取决于异步操作的结果，任何其他操作都无法改变这个状态。看代码识状态：Promise.

2021-12-16 15:38:42 565

原创 webpack - 常用loader与plugin

1.常用loader：babel-loader：将es6转化为es5cache-loader：缓存大文件vue-loader：编译vue文件sass-loader：预处理器ts-loader：配置tspostcss-loader：补充css样式浏览器内核前缀ur-loaderstyle-loadercss-loadereslint-loader：检查代码是否符合规范2.常用plugin...

2021-09-28 17:09:51 284 1

转载 vue转载 - 路由钩子

1.路由钩子函数：全局钩子：（1）beforeEachto: 即将要进入的目标路由对象from: 当前导航正要离开的路由next: 路由的控制参数，常用的有next(true)和next(false)。（2）afterEach：after 钩子没有 next 方法，不能改变导航某个路由独享的钩子：（3） beforeEnter组件内钩子：（4） beforeRouteEnter（5）beforeRouteUpdate（6）beforeRouteLeave2.路由之间跳转有哪些方式：

2021-09-28 11:19:45 83

原创前端 - 代码性能优化

页面级优化：1.减少http请求2.合理化使用缓存3.资源合并与压缩4.使用雪碧图5.css至于顶部，外部引入的js置于底部6.减少冗余代码7.避免出现404页面代码级优化：1.减少dom的操作2.ui组件按需加载3.不使用eval（）vue优化：1.代码模块化2.for循环设置key值3.Vue路由设置成懒加载4.更加理解Vue的生命周期5.可以使用keep-aliveseo优化？1.对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的2

2021-08-31 15:28:54 265

转载转载 - 箭头函数与普通函数的区别

https://www.cnblogs.com/biubiuxixiya/p/8610594.html

2021-08-31 15:08:19 69

原创 css - 清除缓存的方法

1.clear：both2.overflow：hidden3.overflow：auto4.父元素设置display:table5.:after 伪元素6.使用before和after双伪元素清除浮动

2021-08-31 14:21:14 296

原创 css - 居中对齐

水平居中：text-align:centermargin:0 auto;justity-content:center;display:flex;justify-content:center垂直居中：line-heightvertical-align: middledisplay:flex;align-items:center;水平垂直居中：1…display：table-cell三栏布局实现水平垂直居中：.left{width:200px;height: 300px;backg

2021-08-31 12:16:32 107

转载 js转载 - 原型与原型链

https://www.cnblogs.com/jofun/p/8746511.html

2021-08-30 20:29:37 114

原创 vue - ajax与axios的区别

1.axios是一种基于Promise封装的HTTP客户端，ajax是异步js和xml，是一种异步请求的技术2.axios是通过Promise实现XHR封装，其中Promise是控制手段，XHR是实际发送Http请求的客户端； ajax技术是实现网页的局部数据刷新3.从浏览器中创建 XMLHttpRequest4.axios支持Promise API5.自动转换为JSON数据6.拦截请求和响应7.提供了一些并发请求的接口（axios.all）8.客户端支持防止CSRF：就是让你的每个请求都带一

2021-08-30 20:25:39 669

原创 react - React的生命周期

1.React的生命周期：生命周期分为4部分：（1）Initialization：初始化化阶段constructor()（2）Mounting：挂载阶段Mounting阶段又可以分为3个小阶段：（1）componentWillMount : 在组件即将被挂载到页面的时刻执行（2）render : 页面state或props发生变化时执行（3）componentDidMount : 组件挂载完成时被执行（3）Updation：更新阶段（1）shouldComponentUpdate：函数会

2021-08-30 20:07:35 131

原创 vue - vue中虚拟dom的理解？vue虚拟Diff算法

vue中虚拟dom的理解1.虚拟dom本质上是一个普通的js对象，用于描述视图的界面结构。2.在vue中，每个组件都有一个render函数，每个函数都会返回一个虚拟dom树，这也意味着每个组件都对应一颗虚拟dom树。为什么需要虚拟dom3.在vue中，调用视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在数据依赖的数据更新时，如果在渲染时，直接使用真实Dom，会带来大量的性能消耗，从而极大的降低渲染效率。虚拟dom如何转换为真实dom4.每一个组件实例首次被渲染时，先生成虚拟d

2021-08-30 20:00:14 185

原创 vue转载 - vue路由权限

https://blog.csdn.net/m0_50618406/article/details/110086688

2021-08-30 12:03:20 78

原创 js - 宏任务与微任务

JS分为同步任务和异步任务，宏任务与微任务是解决js中事件轮巡机制执行顺序的问题。宏任务是指：宏任务指执行栈中待执行的任务（包括主代码、快事件回调t，setTimeout，setInterval）微任务微任务指执行栈清空后立即执行的任（包括Promise，process.nextTick,MutationObserve）宏任务与微任务的执行机制:（1）因为微任务不需要执行上下文（这里指的是资源的切换），所以它可以在一次上下文切换间隔中把所有的微任务都做掉（2）而宏任务因为需要切换上下文，所以他会

2021-08-30 00:49:04 116

原创 vue、react - vue与react的区别？

相似之处：1.两者都是用于创建UI的JavaScript库2.都有Virtual DOM（虚拟dom）,组件化开发,props的概念3.都是数据驱动视图4.都有独立但常用的路由器和状态管理库不同点：1.react是函数式，所以推崇纯组件，数据不可变，单向数据流，使用setState重新渲染。而vue是数据可变的，双向绑定。2.react使用jsx，而vue使用html，css，js组合到一起3.react每当应用的状态被改变时，全部子组件都会重新渲染。当然可以通过shouldComponen

2021-08-30 00:07:59 145

原创 vue - vue2.0与vue3.0的区别

1.重构响应式系统，使用proxy代替object.Object.defineProperty2.新增Composition API，更好的逻辑复用和代码组织3.修改了虚拟dom的算法，vue2需要diff所有的虚拟节点，vue3采用分层次，找到不同的层，针对变化的层进行diff，更新速度不会在受模板的影响，而是由可变的内容决定。4.vue使用ts编写5.项目目录结构发生变化：移除了config 和 build、static，新增public 文件夹，index.html移到public中6.vu

2021-08-29 13:22:27 223

原创 vue - 修饰符

vue修饰符：表单修饰符（重点）1.lazy( 2.number（v-model.number=“XXX”）：输入字符串转为数字3.trim（事件修饰符（重点）按键修饰符：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right系统修饰键.ctrl.alt.shift.meta...

2021-08-19 18:01:30 44

原创前端 - 如何引入阿里巴巴矢量图库？

1.进入阿里巴巴矢量图库官网：https://www.iconfont.cn/2.登录账号3.查找所需图标，添加至购物车4.添加至项目5.下载至本地6.引入至main.js7.在组件中调用

2021-03-02 17:49:43 710

原创 ts - typeScript相关介绍

一、什么是 TypeScript（目前已到了4版本）？1.ts是添加了类型系统的js，适用于任何规模的项目2.ts是一门静态类型、弱类型的语言。（弱类型是指隐性的转换数据类型）3.ts完全兼容js，不会修改js运行时的特性4.ts可以和js共存，这意味的js项目可以渐进式的迁移未ts5.ts增强了编辑器的功能，提供了代码补全、接口提示、代码重构等功能6.ts拥有活跃的社区7.ts符合最新的es标准二、动态类型与静态类型的区别：类型系统按照类型检查的时机分为静态类型与动态类

2021-03-01 18:09:14 339

原创 CSS - position 属性

一、position的五种定位类型：static relative fixed absolute stickyposition:static：静态定位/默认定位：静态定位的元素不受 top、bottom、left 和 right 属性的影响。position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。position: relative; 元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 lef.

2021-03-01 15:39:23 99

原创 css - 弹性布局

一、弹性布局的作用：为盒状模型提供最大的灵活性二、任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}注意，设为Flex布局以后，子元素的float、clear和vert

2021-03-01 11:29:58 266

原创 vue -【如何使用vue ui图形化界面创建一个vue项目？（注意：适用于3.0.x版本）】

一、准备工作：1.下载并安装node.js:需6.0版本及以上（https://www.jianshu.com/p/02b12c600c7b）2.查看node版本命令：node -v3.查看npm版本命令：npm -v，node自带npm包管理工具二、安装vue-cli 3.0命令npm install -g @vue/cli或者yarn global add @vue/cli三、进入项目管理器1.输入：vue ui2.进入vue项目管理器3.创建项目

2021-02-26 16:55:57 342

原创 vue - mvvm模式的理解？

1.MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View2.MVVM 中的核心VM。 vm负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。3.在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之.

2021-01-13 18:16:56 537

weixin_42631976的博客