09 2022 档案
摘要：功能不同 1、get是从服务器上获取数据。 2、post是向服务器传送数据。 过程不同 1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。 2、post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEAD
阅读全文
摘要：三栏布局就是在网页上以平铺方式展现左中右三列布局，其特点在于，左右两列固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化，简单来说就是两端固定，中间自适应。常用的主要有6种布局方式：浮动，绝对定位，flex，grid，圣杯布局和双飞翼布局浮动:
阅读全文
摘要：闭包:在一个外函数中定义了一个内函数,内函数里使用了外函数的临时变量,并且外函数的返回值是内函数的引用。这样就构成一个闭包。一般情况下,在我们认知当中,如果一个函数结束,函数的内部所有东西都会释放掉,还给内存,局部变量都会消失。但是闭包是一种特殊情况,如果外函数在结束的时候发现有自己的临时变量将来会
阅读全文
摘要：使用构造函数创建一个实例 <script> function Person(age, name) { this.age = age this.name = name this.sing = function () { console.log("我会唱歌") } } const student = n
阅读全文
摘要：一、1开头的状态码(信息类)100，接受的请求正在处理，信息类状态码 二、2开头的状态码(成功类)2xx(成功)表示成功处理了请求的状态码200(成功)服务器已成功处理了请求。 三、3开头的状态码(重定向)3xx(重定向)表示要完成请求，需要进一步操作。通常这些状态代码用来重定向。301，永久性重定
阅读全文
摘要：浏览器的缓存机制提供了可以将用户数据存储在客户端的方式,可以利用cookie,session等跟服务器端进行数据交互 cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期
阅读全文
摘要：token是服务器端生成的一个字符串,当作客服端请求的一个令牌,在第一次登陆成功之后,服务器端会生成一个token,客户端必须要携带token才能请求数据 token的具体逻辑如下： 客户端使用用户名，密码进行认证。 服务端验证用户名，密码正确后生成Token返回给客户端。 客户端保存Token,访
阅读全文
摘要：回流:当元素的尺寸,结构属性改变,浏览器需要重新渲染部分或全部文档流的过程 浏览器首次加载 元素尺寸位置改变 元素内容改变 字体大小改变 添加删除dom元素 重绘:元素样式改变并不会影响其位置的变化,浏览器将新样式赋予它并重新绘制 color background-color 区别: 回流一定重绘,
阅读全文
摘要：props/$emit 父组件向子组件传值 子组件向父组件传值通过事件形式,实际上就是子组件把数据发送到父组件 vuex Vuex实现了单向数据流,在全局使用State存放数据,当组件需要修改数据时,需要通过Mutation进行操作,mutation同时提供了订阅者模式供外部插件获取State数据的
阅读全文
摘要：vuex用于管理组件的全局状态(数据),方便组件之间的数据共享 创建store对象 const store = new Vuex.Store({...}); store中存储的状态是响应式的,当组件从store中读取状态时,如果store中的状态改变,那么相应的组件也会改变 不能直接改变store中
阅读全文
摘要：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记 录的消息去局部更新Dom。 特点: 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 步骤: 用 JavaScript 对象结构表示 DOM 树的结构；然后
阅读全文
摘要：挂载阶段 父beforecreated->父created->父beforemounted->子beforecreated->子created->子beforemounted->子mounted->父mounted 更新阶段 父beforeUpdate -> 子beforeUpdate -> 子up
阅读全文
摘要：keep-alive是vue.js的一个内置组件,它将不活动的组件保存在内存中,而非只讲将其销毁,提供了include(缓存),exclude(不缓存)两个属性,可以有选择的保存组件 语法: <keep-alive> <component></component> </keep-alive> 生命钩
阅读全文
摘要：虚拟dom本质上是js对象,是对真实dom的抽象,在状态变化时,记录新树和旧树的差异,最后把差异更新到真实dom中 虚拟dom将dom的对比放在了js层,通过对比不同之处来选择新的渲染节点,从而提高渲染效率 优缺点: 虚拟dom能保证下限,通过diff算法找出最小差异,然后批量patch,这样虽比不
阅读全文
摘要：现代我们在开发SPA(单页面应用时)往往会用到路由(vue-router) 有两种模式 Hash模式 一种把前端路由的路径用#拼接在真实url后面的模式,当#后的地址变化时,浏览器不会重新发起请求,而是触发onhashchange事件 网页url组成 示例 http://127.0.0.1:8001
阅读全文
摘要：v-for的优先级比v-if高,这意味着v-if将运用于每个v-for中,造成资源浪费 解决: 可以将v-if放到v-for的外层,先进行一次判断 利用computed计算属性先把v-for需要的属性过滤一遍
阅读全文
摘要：功能上:computed是计算属性;watch是监听一个值的变化,然后执行相应的回调 computed中函数所依赖的数据没有发生变化,就会从缓存中调取;watch每当监听的数据变化时就会执行回调 computed必须要有return返回值;watch可以没有 computed默认第一次加载的时候就监
阅读全文
摘要：区别: mvvm通过数据驱动视图层的显示而不是节点操作 mvc中的view和model是可以直接访问的,造成耦合度较高 mvvm真正将页面和数据逻辑分离,将数据绑定放到js实现,解决了mvc中大量的dom操作使得页面渲染速度将降低,加载速度慢 mvc(Model-View-Controller)是单
阅读全文
摘要：vue双向数据绑定的核心思想是MVVM(Model-View-ViewModel),View和Model是没有直接联系,通过ViewModel进行交互 当用户操作View,ViewModel会感知到,然后通知Model发生相应的变化;当Model变化时,ViewModel会使View发生相应的更新
阅读全文
摘要：基本类型的数据赋值后,更改赋值后的变量,两者互不影响 let a = 100; let b = a; a = 200; console.log(a); // 200 console.log(b); // 100 引用类型的数据赋值后,将存放在栈内存中的地址赋值给新变量,更改赋值后的变量会影响到原数据
阅读全文
摘要：position属性规定用于元素定位的方法类型 元素其实是使用top,bottom,right,left来定位的;除非首先设置了position,否则这些属性不起作用 static html默认情况下的定位方式static(静态),不受上述属性的影响,根据页面的正常流进行定位 relative 相对
阅读全文
摘要：BFC块级格式化上下文 其容器内排列规则如下 纵向一个挨着一个排列 两个盒子的纵向间距由margin属性决定,相邻盒子的margin会有重叠现象,此时间距值取较大的margin BFC可以看作一个独立的布局环境,容器内的元素和容器外的元素布局互不影响 BFC可以包含浮动元素 清除浮动效果;BFC会排
阅读全文
摘要：文档流中父元素高度是由子元素撑起的,当我们为子元素添加浮动后,子元素脱离文档流,无法撑起父元素,导致父元素高度塌陷 <body> <div class="box1"> <div class="box2"></div> </div> </body> <style> .box1 { width: 200
阅读全文
摘要：采用flex布局的元素,称为flex容器,其内部的子元素为flex项目 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开 始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross sta
阅读全文
摘要：px是固定像素,一旦设置就无法因适应页面大小改变 em,rem都是相对长度单位,适用于响应式布局 em是相对于父元素设置字体大小,一般都是以body中的font-size为基准 (浏览器中默认字体尺寸为16px，换句话说1em=16px;那么0.75em=12px,0.625em=10px。为了简化
阅读全文
摘要：选择器的特殊性值分为四个等级 行内样式:X 0 0 0 id选择器:0 X 0 0 类选择器/伪类选择器/属性选择器:0 0 X 0 元素选择器/伪元素选择器:0 0 0 X 在判断优先级时先看是否有权重(!important),如果有那么它的优先级最高;前提是它之后不再出现相同权重的声明。如果权重
阅读全文
摘要：简单选择器(根据标签名称,id,类选取元素) * 通用选择器,页面类所有元素 .class 类选择器,具有类名class的元素 #id id选择器,id名为id的元素 E 标签选择器,标签名为E的元素 组合器选择器(根据特定关系选取元素) 后代选择器(空格) 子选择器(>) 相邻兄弟选择器(+) 通
阅读全文
摘要：通过vertical-align: middle 注意:vertical-align: middle生效的元素必须是 display: inline-block;且必须有一个兄弟元素做参照(其原理是寻找兄弟元素中最高的元素做参照让自身的中点高度和参照的中点高度对齐) <style> .box1 {
阅读全文
摘要：伪元素:用于创建一些不存在文档树的元素,并为其添加样式;比如我们可以通过:before在一个元素前增加一些文本并为其添加样式;用户可以看到这些样式,但其并不存在于文档树中 伪类:用于当某个元素处于某个状态时为其添加样式,这个状态是根据用户状态变化的;比如当鼠标悬停时我们通过:hover来描述这个元素
阅读全文
摘要：html每个标签都有自己的含义,语义化是指使用语义恰当的标签,是页面结构更清晰,页面元素有含义,让人容易理解 常见的有: header:定义页面的展示区域,通常包含logo,导航,搜索框等 nav:定义页面的导航链接区域 main:定义页面的主要内容区域,一个页面用一次 acticle:定义页面的独
阅读全文
摘要：块元素:排斥与其他元素同处一行;一般都是其它块元素或行内元素的容器 行内元素(内联元素):可以和其它行内元素同处一行;一般那只能容纳文本和其他行内元素;其高度由容纳的文本的大小决定,宽度由内容的长短决定 在加入了css控制后,这两个元素也可互相转换 区别: 块元素占据一整行;多个行内元素可以共处一行
阅读全文
摘要：盒模型本质就是一个盒子,封装了周围的html元素,包括边距,边框和实际内容;允许我们在其他元素和周围元素边框之间放置元素 盒模型有标准盒模型和怪异盒模型(IE盒模型)在编辑html时最顶上会有DOCTYPE标签,即使用标准盒模型,如果没有该标签则由浏览器自己决定 在css3中增加了属性box-siz
阅读全文
摘要：浏览器根据数据的存储方式分为栈垃圾回收和堆垃圾回收 栈垃圾回收: 当一个函数执行完毕后,其ESP(记录当前函数状态的指针)会下移指向下一个函数,这个下移操作即视为对上一个执行完毕的函数销毁其执行上下文 堆垃圾回收: 处理完栈空间的回收,堆空间的数据依然存在,这就需要垃圾回收器回收,根据数据生命周期的
阅读全文
摘要：防抖和节流都是为了解决事件被频繁触发的问题 防抖(debounce) 原理:当持续触发事件时,在设定的时间内没有再次触发事件,则事件才会处理函数一次;如果在设定时间之前再次触发该事件,则重新开启定时器,执行最后一次触发事件 应用场景: scroll事件滚动 浏览器窗口的缩放resize事件 搜索框输
阅读全文
摘要：执行js代码时,遇到同步任务,直接推入调用栈执行,遇到异步任务,将该任务挂起,等到有返回结果后放到任务队列中; 当调用栈中的任务全部执行完成后,这时开始事件循环(Eventloop),不断的访问任务队列,将其中的任务推到调用栈中执行. 事件循环的大致过程: 清空调用栈中的同步代码 执行微任务队列中的
阅读全文
摘要：事件冒泡是从当前触发事件的对象逐层向上传递,依次触发,直到document 如果需要阻止事件冒泡可以在需要阻止的事件函数中加上event.stopPropagation() <style> #box1 { width: 300px; height: 300px; background: bluevi
阅读全文
摘要：创建一个空对象 让这个新对象的圆形_proto_指向构造函数的原型prototype 让this指向新对象,然后执行构造函数的代码 如果函数没有return,或者return基本数据类型,则最终返回这个新对象;如果return的时引用数据类型,则返回这个引用类型
阅读全文
摘要：Ajax能够实现和服务器交换数据并让页面局部更新 ajax相比于传统的方式是相当于在服务器和客户端之间多了一层中间层ajax引擎,使用户和服务器操作异步化 传统方式中用户和服务器的交互 当用户发送请求时,客户端相当于暂停状态,如果服务器没有处理完,那客户端就一直处于暂停态 在发送请求时必须等到上一个
阅读全文
摘要：call()第一个参数是this的新指向;第二个参数是要传入函数的参数 let cat = { name: "喵喵" } let dog = { name: "旺财", eat(food) { console.log(this.name, "喜欢吃", food) }, eatMore(food1,
阅读全文
摘要：普通函数的this 作为函数在全局调用,this的指向是window var name = '卡卡'; function cat() { var name = '有鱼'; console.log(this.name);//卡卡 console.log(this);//window } cat();
阅读全文
摘要：双重for()循环 var arr = [1, 2, 3, 4, 5, 6, 4, 3, 8, 1] // 数组去重： // 方法1： 双重for 循环 function newArrFn(arr) { // 创建一个新的空数组 let newArr = [] for (let i = 0; i <
阅读全文
