Ajaloney-CSDN博客

原创 vue中使用elementUI组件的Upload 上传图片

1. 安装elementUI：npm i element-ui -S2. 在main.js中引入elementUIimport Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element, { size: 'small' })3. 访问Element官网【组件–Upload上传】<el-upload action="https://jsonplaceholder.typi

2022-02-15 07:42:17 351

原创是什么diff算法

概念：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。其有两个特点：比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较Diff算法的步骤：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异把第二棵树所记录的差异

2022-02-11 15:32:55 464

原创什么是虚拟DOM

通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的,真实的DOM节点，哪怕一个最简单的div也包含着很.

2022-02-11 15:30:15 433

原创 Vue的双向数据绑定原理（极简版）

理解vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然

2022-02-11 15:27:20 529

原创 Vue生命周期的执行过程（极简版）

简单粗暴的答案直接走起：答：总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data

2022-02-11 15:21:44 104

原创 v-if与v-show的区别

一、相同点都可以动态控制着dom元素的显示隐藏一、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的二、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数据渲染生

2022-02-11 15:18:22 138

原创 vue常用的指令

v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容同上 v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用不能单独使用否则报错模板编译错误 v-bind

2022-02-11 15:14:32 65

原创为何组件的data必须是一个函数

实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }})vue组件可能会有很多个实例，采...

2022-02-11 15:09:07 368

原创 js中的继承

实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已原型链继承父类的实例作为子类的原型function Woman(){ }Woman.prototype= new People();Woman.prototype.name = 'haixia';let womanObj = new Woman();优点简单易于实现，父类的新增的实例与属性子类都能访问缺点1. 可以在子类中增加实例属性，如果要

2022-02-11 15:04:55 87

原创 null和undefined的区别

相同点在JavaScript中，null 和 undefined 几乎相等在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log(n

2022-02-10 20:19:21 80

原创 for···in和for···of的区别

for···in和for···of的区别从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}从遍历字符串的角度来说，同数组一样。从遍历对象的角度来说，for··

2022-02-10 20:15:23 77

原创 js数组排序

1. 冒泡排序将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>a

2022-02-10 20:11:04 108

原创 js数组去重

场景c将数组var arr = [1,1,'true','true',true,true,15,15,false,false,undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉1. ES6中的set方法它类似于数组，但是成员的值都是唯一的，没有重复的值，所以用来做去重是很好的let arr = [12,43,23,43,68,12];let item = [...new Set(arr)

2022-02-10 15:29:37 74

原创 js数组方法

js数组方法join()push() 和 pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）join()就是把数组转换成字符串，默认的是逗号( ，)书写格式：join(" ")，括号里面

2022-01-21 18:44:06 108

原创深拷贝和浅拷贝

深拷贝与浅拷贝的区别浅拷贝：只复制第一层的浅拷贝深拷贝：深复制则递归复制了所有层级为什么要使用深拷贝希望在改变新的数组（对象）的时候，不改变原数组（对象）数组浅拷贝直接遍历var array = [1, 2, 3, 4];function copy (array) { let newArray = [] for(let item of array) { newArray.push(item); } return newArray;}var copyA

2022-01-21 18:36:20 144

原创 js的数据类型、堆栈内存

数据类型基本数据类型（值类型）： Number、String、Boolean、Undefined、Null引用数据类型: Object。包含Object、Array、function、Date、RegExp堆栈内存栈存储栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null，以及对象变量的指针堆内存而堆内存主要负责像对象Object这种变量类型的存储案例// 栈堆内存console.log({}=={})console.

2022-01-21 18:29:41 130

原创 js宏任务和微任务

宏任务和微任务宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await注意：微任务比宏任务的执行时间要早console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);

2022-01-21 18:24:51 195

原创 js数据类型判断

js数据类型有四种，分别是：typeof、instanceof、constructor、Object.prototype.toString.call()typeof可以用来检测数据类型基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function,用typeof检测数据类型,分别返回对应的数据类型小写字符基本数据类型null,引用数据类型中的：Array，Object，Date，RegExp 都返回object其余的数据类型:例如: type

2022-01-19 10:23:01 69

原创垃圾回收和内存泄漏

垃圾回收回收垃圾先要想一个问题什么是垃圾？一般来说没有被引用的对象就是垃圾，有几个例外如果几个对象引用形成一个环，互相引用，但别的数据访问不到，这几个对象也是垃圾，也要被清除常用的垃圾回收策略是标记清除和引用计数，其中标记清除更为常用垃圾回收会定期找出那些不继续使用的变量，然后释放其内存垃圾回收器会按照固定的时间间隔周期性的执行只有函数内的变量才可能被回收function fn1() { var obj = {name: 'hanzichi', age: 10};}functi

2022-01-19 10:18:51 289

原创闭包的理解和this指向的问题

一、什么是闭包？函数嵌套函数,内层函数可以访问外层函数,反之不行。二、闭包的两种形式1.作为参数被传递2.作为返回值被传递注意:函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系也就是从function函数往上找三、this指向使用场景this指向的使用场景一共有5种:普通函数对象方法call apply bindclass箭头函数注意:this取什么值，是在执行时确认的，定义时无法确认1.普通函数中是this普通函数中的this指向windowfunct

2022-01-19 09:38:24 239

原创作用域、作用域链、自由变量

作用域作用域：就是一个变量可以使用的范围作用域分为全局作用域、函数作用域、块级作用域js中有一个最外层的作用域，全局作用域js中可以通过函数来创建一个独立作用域称为函数作用域es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）自由变量自由变量概念: 当前作用域没有定义的变量一个变量在当前作用域没有定义,但是被使用了向上级作用域,一层一层寻找,直至找到为止如果到全局作用域还没找到,就会报错xx is not definedvar a = 1

2022-01-19 09:33:49 62

原创原型与原型链

// 原型对象就是 fn.prototype 1. 每个函数都有prototype属性,它默认指向一个Object空对象(原型对象) 2. 原型对象的 constructor 默认指向函数本身// 指向原型对象 fn.prototype// 实例对象就是 var fn = new Fn()3. 每个实例对象都有一个__proto__属性，指向函数prototype所指向的原型对象1、 prototype每个函数都有一个prototype属性，被称为显示原型2._ proto _每个实

2022-01-19 09:28:35 335

原创 window下安装nginx

安装步骤1、下载Nginx下载地址：Nginx官网下载第二个,稳定版2. 下载之后，解压到指定的目录，就可以看到目录3. 控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号nginx命令介绍（1）start nginx 开启nginx服务（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息（3）nginx.exe -s quit 关

2022-01-19 09:00:53 53

原创 vue打包优化

首先在项目根目录新建一个vue.config.js文件打包前必做:module.exports = { publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏） outputDir: 'dist', // 打包后文件的目录（默认为dist） assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录}1、去除生产环境sourceMap问题: 在vue项目打包之后js,css文件夹中,会自动生成

2022-01-19 08:57:04 277

原创 vue路由守卫

1.路由守卫是什么?简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。2.路由守卫分类(三种)?导航守卫分为：全局的、组件内的、单个路由独享三种全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach1.全局前置守卫你可以使用 router.bef

2022-01-19 08:47:54 66

原创 HTML5和CSS3新特性(完整版)

css3新特性选择器背景和边框文本效果2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)1.选择器:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */（fer斯特）:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disabled /* 选择每个禁用

2022-01-12 21:10:37 993

原创 HTML5和CSS3的新特性(浓缩版)

1.html5的新特性 (有九大模块内容)添加了video，radio标签添加了canvas画布和svg,渲染矢量图片添加了一些列语义化标签header,footer,main,section,aside,nav等input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）添加了地理位置定位功能 Geoloc

2022-01-12 07:48:32 83

原创 CSS Hack

什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器比如说:1. 条件Hack<!--[if IE]><style> .test{color:red;

2022-01-12 07:45:08 167

原创代码中link与@import的区别

<head>  <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px; .

2022-01-12 07:42:56 80

原创 src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...

2022-01-12 07:42:08 124

原创常用的(块级元素、行内元素、空元素)

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：spanabiimginputselectstrong 块级元素有：divph1-h6ultableformulollidldtdd… 空元素(没有内容)<br><hr><im...

2022-01-12 07:41:15 109

原创两/三栏布局（圣杯飞翼）

1、两栏布局：（左边定宽，右边自适应） <div id="left"> 左边定宽</div> <div id="right"> 右边自适应</div>(1)、左边左浮动，右边加overflow:hidden;变成BFC清除左侧浮动元素的影响 #left { float:left; width:200px; background:green; } #right { overflow:hidden; background:red

2022-01-11 07:42:30 66

原创 flex布局

1. 什么是flex布局flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思2. 为什么我们需要 flex?解决元素居中问题自动弹性伸缩，合适适配不同大小的屏幕，和移动端3. flex 常用的属性都有哪些flex-direction 主轴方向最常使用flex-wrap 主轴一行满了换行最常使用justify-content 主轴元素对齐方式最常使用align-items 交叉轴元素对齐方式//单行最常使用flex-flow 等于说是flex-directio

2022-01-10 07:52:56 43

原创水平居中的三种方法

父相子绝后，子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%)最常用方法 #box{ width: 400px; height: 400px; background: red; position: relative; } #x{ width: 200px; height: 200px; backg.

2022-01-09 18:52:24 193

原创 Position知识点总结

position的含义是指定位类型，值分别可以是：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1. position:relative(相对定位)static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） 2. position:relative(相对定位)此处的相对并不是相对于哪个父div或子div，相对只是相对

2022-01-08 07:49:09 137

原创对Vuex的理解

文章目录一、什么是Vuex二、组成Vuex的5个部分三、Vuex基本使用四、Vuex的安装4.1 安装Vuex4.2 引用vuex,创建仓库store, 创建 store.js4.3 在 main.js中注册到根组件中五、安装持久化插件5.1 安装5.2 在store.js里六、高级用法-数据持久化七、高级用法-辅助函数（语法糖）八、Vuex的获取使用的方法一、什么是Vuex通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护分别是：state,actions,mutatio

2022-01-06 20:31:04 621

空空如也

空空如也