- 博客(53)
- 收藏
- 关注
RSS订阅
原创 前端面试题总结
文章目录vue 双向数据绑定原理vue虚拟DOM,diff算法组件通信vuexvue-router（路由原理，路由守卫，传参）vue生命周期自定义指令，自定义过滤器自定义组件常用的指令，修饰符vue2和vue3的区别多环境变量对axios的封装(url,axios请求拦截 响应拦截，函数封装 )element-ui/vant-ui按需引入sass配置rem,vw/vh设置wedpack配置(设置跨域,路径别名,打包分析,cdn引入,去掉console.log,单独打包第三方模块,ie兼容,eslint规范，
2021-01-06 11:26:42
287
原创 js基础知识
文章目录1. 变量的类型和计算数据类型值类型引用类型topeof运算符深拷贝类型转换if语句2.原型与原型链class类型判断 instanceof原型的关系原型的执行规则原型链手写简易jQuery流程任务类型查询历史记录1. 变量的类型和计算数据类型基本数据类型：numder，undefined，string，Boolean，symbol，应用类型： array，function，object，null，值类型他都是在栈中存储的 因为他占地空间小。常见的值类型：undefined，numde
2020-12-27 20:11:57
1225
原创 git 基础
git 基础git 是什么git 是一个版本管理系统，它可以在任何地点时间，将文档纪录保存起来，也可以在任何时间点，将更新的记录恢复回来，git基本流程git仓库暂存区工作列表用于存放提交记录临时存放被修改文件被git管理的项目目录git提交步骤git init 初始话git仓库git status 查看文件状态git add . 追踪所以文件git commit -m 提交信息 向仓库提交代码git log 查看提交记录撤销用
2020-12-15 19:40:02
107
原创 HTTP与HTTPS的区别
hppt 与 https的区别安全性上，HTTPS是安全超文本协议，在HTTP基础上有更强的安全性。简单来说，HTTPS是使用TLS/SSL加密的HTTP协议申请证书上，HTTPS需要使用ca申请证书传输协议上, HTTP是超文本传输协议，明文传输；HTTPS是具有安全性的 SSL 加密传输协议连接方式与端口上，http的连接简单，是无状态的，端口是 80； https 在http的基础上使用了ssl协议进行加密传输，端口是 443HTTP的工作过程HTTP由请求和响应构成，是一个标准的客户端服
2021-09-27 11:26:18
1097
原创 get与post区别
请求报文、响应报文我们发送的http请求，浏览器都会整理成请求报文，发送到服务器。服务器响应的数据，浏览器会以响应报文的形式接受。HTTP请求报文:个HTTP请求报文由四个部分组成：请求行、请求头部、请求空行、请求数据。HTTP响应报文:同样的，HTTP响应报文也由四部分组成：响应行、响应头、响应空行、响应体get 与 post的区别?Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post提交的数据在HTTP包的请求包体中，对用户来说都是不可见的，相对安全。Get传送的数据
2021-03-12 12:13:54
95
原创 从输入url到页面加载完成发生了什么
1、浏览器的地址栏输入URL并按下回车。2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。3、DNS解析URL对应的IP。4、根据IP建立TCP连接（三次握手）。5、HTTP发起请求。6、服务器处理请求，浏览器接收HTTP响应。7、渲染页面，构建DOM树。8、关闭TCP连接（四次挥手）。名词解释：一、URL我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询
2021-03-12 12:11:09
382
原创 http和https的区别
Http：超文本传输协议（Http，HyperText TransferProtocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。
2021-03-12 12:05:50
80
原创 http常见的状态码
http状态码分类：100-199 提示信息 – 表示请求正在处理200-299 成功 – 表示请求正常处理完毕300-399 重定向 – 要完成请求必须进行更进一步的处理400-499 客户端错误 – 请求有语法错误或请求无法实现500-599 服务器端错误 – 服务器处理请求出错常见的状态码有哪些？① 200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；② 404：(客户端问题)请求的资源没有找到 400: 语义有误，当前请求无法被服务器理解。401: 当前请求需要用
2021-03-12 12:03:26
111
原创 BOM
DOMJavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点整个文档是一个文档节点每个标签是一个元素节点包含在元素中的文本是文本节点元素上的属性是属性节点文档中的注释是注释节点DOM本质 DOM树：DOM树形如一颗倒长的树。它很容易表明家族成员之间的关系，把复杂的关系简明地表示出来DOM 节点操作新增节点查询子节点查询父节点删除节点1. 创建新节点 （document调用）cr
2021-03-02 20:32:48
72
原创 数组方法
poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70#pic_center#pic_center)如何产生闭包（closure）
2021-01-22 15:10:44
141
原创 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]>ar
2021-01-21 17:05:21
74
原创 js数组去重
情境：将数组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使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, n
2021-01-21 17:00:33
90
原创 javascript原型与原型链
1. prototype每个函数都有一个prototype属性，被称为显示原型2._ proto _每个实例对象都会有_ proto _属性,其被称为隐式原型每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原
2021-01-21 16:24:16
54
原创 CSS Hack
什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器例如:1、条件Hack<!--[if IE]> <p>你在非IE中将看不到我的身影</p><![endif]--><!--[if IE]><style> .test{color:red;}<
2021-01-20 17:00:03
126
原创 vue中mixins(混入)的使用
一、来自官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins，在创建一个
2021-01-20 16:12:31
75
原创 vue2与vue3的区别
1. vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以
2021-01-20 16:08:37
565
原创 vue修改数据页面不重新渲染
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染一、直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script&
2021-01-20 16:04:26
1066
原创 vue之prop
Prop1 . prop 大小写Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<!-- 父组件中 kebab-case 的 --><blog-post post-title="hello!"></blog-post>2 .单项数据流
2021-01-20 07:32:55
100
原创 Vue中的$nextTick()
一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM什么意思呢？我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构<div id="app"> {{ message }} </div>const vm = new Vue({ el: '#app',
2021-01-20 07:32:38
176
原创 vue中的slot（插槽）
1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div> `, data () { return
2021-01-19 17:16:55
93
原创 vue脚手架本地开发跨域请求设置
vue脚手架配置在根目录创建vue.config.js在module.exports中配置devserver的内容devServer: { host:'0.0.0.0', port: 8080,//端口号 open: true,//运行项目自启 proxy:{ '/api':{ target:'http://localhost:3000/',//跨域请求资源地址
2021-01-19 17:10:36
101
原创 vue-Router实现原理
一、前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。二、vue-Router两种模式更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash — 默认值，利用 URL 中的hash("#") 、history-- 利用URL中的路径（/home）如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})m
2021-01-19 17:08:05
139
原创 vue路由，路由传参（parmas,query）
一、Vue路由基础用法：1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from
2021-01-19 16:50:21
111
原创 vue组件封装
你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能..
2021-01-19 11:57:41
105
原创 vue中Computed、Methods、Watch区别
1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {
2021-01-19 11:49:37
92
原创 Vue组件通信(父传子、子传父、兄弟通信)
一.父组件传到子组件父组件是通过props属性给子组件通信的1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </template> <sc
2021-01-19 11:39:56
122
原创 v-if与v-show的区别
一、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性，只能是一个函数如果为组件data直接定义为一个对象Vue
2021-01-19 07:32:29
80
原创 js操作DOM
获取通过id：getElementById通过name：getElementByName通过标签名：getElementByTagName通过类名：getElementByClassName通过选择器获取一个元素：querySelector通过选择器获取多个元素：querySelectorAll获取html标签：document.documentElement获取body标签：document.body创建创建一个节点：document.createElement()；创建一个文
2021-01-19 07:32:13
81
原创 src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...
2021-01-18 20:21:23
44
原创 前端常见浏览器兼容性问题解决方案
前端常见浏览器兼容性问题解决方案不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。常见的浏览器内核：1.不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin:0;padding:0;}备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS
2021-01-18 20:11:56
161
原创 link与@import区别
应用场景：<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px;
2021-01-18 19:56:50
55
原创 HTML5和css3新特性
css3新特性选择器背景和边框文本效果2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)1. 选择器常规选择器：:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disabled /* 选择每
2021-01-18 19:52:45
47
原创 清除浮动的4种方式
为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。当我给内部两个盒子加上float属性的时候底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了清除浮动的方法（最常用的4种）一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。优点： 通俗易懂，书写方便。（不推荐使用）
2021-01-18 19:15:33
133
原创 元素居中的三种方式
元素居中的三种方式如何让一个元素在父元素中上下左右居中？共同的dom结构如下： <div id="box"> <div id="x"></div> </div>方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法 #box{ width: 400px; height: 400px;
2021-01-18 19:05:07
220
原创 常见的块级/行内/空元素
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：span a b i img input select strong块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…空元素(没有内容)
2021-01-18 19:00:35
98
原创 Flex:语法篇
一、Flex 布局是什么？**Flex** 是 **Flexible Box** 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀.box{ display: -webkit-flex; /* Safari */ display:
2021-01-18 18:56:51
99
原创 BFC
1. 面试题—双边距（边距重叠）什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？**边距重叠**： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。有两种边距重叠的情况：1. 父子关系的边距重叠父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距给父元素添加 overflow：hidden这样父元素就变为 BFC，不会随子元素产生外边距<style>
2021-01-18 17:21:53
54
原创 盒模型
1.什么是盒子模型？在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2.盒子模型有哪两种**标准模式下:**一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异模式下: 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器
2021-01-18 17:10:59
57
原创 vue常用指令与修饰符
文章目录1. v-text2. v-html3. v-pre4. v-cloak5. v-once6. v-if7. v-elsev-else-if9. v-show10. v-for11. v-bind12. v-model13.v-on事件修饰符1. v-textv-text主要用来更新textContent，可以等同于JS的text属性。<span v-text="msg"></span>这两者等价：<span>{{msg}}</span>
2021-01-14 12:01:29
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人