- 博客(47)
- 收藏
- 关注
RSS订阅原创 解决 Cannot read properties of undefined类型的报错
vue报错 “TypeError: Cannot read properties of undefined (reading...)
2022-10-21 09:00:50
193664
1
原创 牧原前端面试
一、一面是HR面首先是自我介绍，介绍自己的在学校的学习情况，做过的项目和参加的比赛，以及在学校参加的组织自己对公司的了解，对前端岗位的了解，前端能应用在公司的领域有哪些，在团队中自己扮演一个什么角色，什么情况下放弃一家公司，什么情况下你会坚定选择一家公司自己的前端生涯的规划然后问了两个基础的前端知识点聊得很愉快，hr很友好二、部门HR+技术面部门HR什么时候接触到的前端问了自己的学习前端方式问了在学校的成绩和专业课学的怎么样自己的职业规划和目标技术面没问js框架挺意外的技
2022-05-21 12:14:48
1662
2
原创 Vuex是干嘛的？每个属性有什么用？
1. Vue的概念Vuex是集中管理项目的公共数据的2. vuex的属性：state：保存数据状态的仓库getters：对state数据进行计算，类似于计算属性（依赖数据发生变化才会重新计算）action：发异步请求获取数据，提交mutation（类似于mutation，不同的是，action用于提交mutation，而不是直接变更状态）1. 写在action获取的数据适用于全局公用的2. 写在页面的mounted是用于当前页面的mutation：唯一可以改变state状态的方法，不
2022-05-19 17:00:55
1839
原创 什么是跨域？怎么解决跨域问题
1.概念：首先浏览器是同源策略，端口号相同，协议相同，域名相同，这种策略会对浏览器有安全作用，而跨域是打破了这种同源策略，任意一个地方不同都会导致跨域2.解决办法：cros：后端设置 1. res.setHeader('Access-Control-Allow-Origin',‘*’) 2. res.setheader('Access-Contaol-Allow-Methods','GET,PUT,OPTIONS,POST')jsonp:利用script标签可以跨域请求资源
2022-05-19 16:48:03
133
原创 js中的Map和Set对象
一、Map对象Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。map.set(key,value) 设置值map.get(key) 获取值map.size()获取集合的大小map.delete(key)删除map的某一项map.has(key) 查看map集合是含有该键元素map.clear()清除所有的键值对const map = new Map()// 1. map.set(key,value)是设置值map.set('
2022-05-19 16:10:02
2257
原创 js数组方法总结
数组方法join(分隔符) 将数组转为字符串 var arr=[1,2,3,4] console.log(arr.join()); // 1,2,3,4 console.log(arr.join(':')); // 1:2:3:4实现重复字符串 function repetStr(str,n){ return new Array(n+1).join(str) } console.log(repetStr('嗨',5));
2022-05-19 16:07:17
217
原创 js字符串方法总结
一、字符串方法concat(str2,[str3…]) 用于把两个或多个字符串组合起来，返回一个新的字符串使用str1.concat(str2,str3…)concat 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。concat 方法并不 影响原字符串。如果参数不是字符串类型，它们在连接之前将会被转换成字符串。 var str1='hello' var str2='world' var str3='Vue' var str4='Re
2022-05-19 16:06:01
442
原创 js实现数组扁平化
实现数组扁平化概念： 把多层嵌套的数组中的内容取出,变成一维的数组。一、使用递归实现遍历数组，判断每一项是否是数组，如果是就继续调用自己的函数方法 // 判断子项是否为数组 如果为数组继续调用 var arr=[[1,2,3],[[4],[5]],6] function flatten(arr){ let res=[] arr.forEach(v=>{ if(Array.isArray(v)) {
2022-05-19 15:57:05
193
原创 Git的基本使用
学好git一、目标git介绍 分布式版本控制工具vs集中式版本控制工具 ·git安装 基于官网发布的最新2.31.1 安装 讲解git命令 基于云开发案例 详细讲解git的常用命令git分支 分支特性 分支创建 分支转换 分支合并 代码合并冲突解决idea集成git二、github代码推送 Push代码拉取 Pull代码克隆 CloneSSH免密登录idea继承github三、gitee码云码云创建远程库idea继承gitee码云连接github 进行代码的复制和迁
2022-05-19 15:46:51
269
原创 Canvas自主学习
Canvas学习一、初识canvas1.1什么是canvsaHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。1.2canvas的基本使用页面上使用canvas标签设置宽高属性 <canvas width="500px" height="500px"> 你的浏览器版本太低，请使用高版本浏览器 </canvas>
2022-05-06 12:05:18
935
原创 亚信科技前端实习面试题
一、Vue的生命周期分为四个阶段：1. 实例创建2. DOM渲染3. 数据更新4. 销毁实例共有八个生命周期函数：1.beforeCreate —创建前触发行为：vue挂载的$el和data都为undefined，还未初始化在此阶段可以做的事情：加loading事件2.created —创建后触发行为：vue的数据对象data已经有数据了，$el还没有初始化在此阶段可以做的事情：解决loading，请求ajax数据为mounted做准备3.beforeMount --渲
2022-04-25 09:55:03
3955
1
原创 Vue的性能优化
Vue的性能优化编码阶段尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件在更多的情况下，使用v-if替代v-showkey保证唯一使用路由懒加载、异步组件使用防抖、节流第三方模块按需导入长列表滚动到可视区域动态加载图片懒加载SEO优化预渲染服务端渲染SSR打包优化压缩代码使
2022-04-18 21:02:54
201
原创 如何在npm官网发表自己的封装的包
以下就是我在npm发布的包，可以搜索安装自己封装的组件插件，npm下载使用不香嘛发布流程如下：一、首先你要有自己的npm账号使用用户名，密码，邮箱注册二、在Vue-cli搭建的项目的src文件下新建文件夹可以在文件夹下新建一些自己插件需要使用的组件，在入口主文件新建自定义指令，构成基本结构以我的插件为例目录结构如下：三、业务如下还是以我的插件为例，主要功能是提交表单内容，如果为空，自定义加入样式提示效果，其中在index.js自定义了输入框默认选中指令，我的业务比较简单
2022-04-15 15:51:24
803
1
原创 Vue父组件和子组件声明周期函数执行顺序
vue的父组件和子组件生命周期钩子函数执行顺序如下可归为四部分：加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组件更新父beforeUpdate->父up
2022-04-12 21:08:55
192
原创 Vue路由传参
1. router-link传参父组件：使用<router-link to="/跳转的路径/传递的参数"></router-link>例如：<router-link to="/a/123"></router-link>子组件接收：this.$route.params.num来接收传递过来的参数mounted(){this.num=this.$route.params.num}路由配置：{path：‘/a/num’,name:A,componen
2022-04-12 21:06:46
112
原创 flex属性
父元素属性display:flex;(定义了一个flex容器)flex-direction(决定主轴的方向)row（横向 默认值，从左到右）row-reverse（横向 反转 从右到左）column（竖直 从上到下）column-reverse（竖直 从下到上）flex-wrap（是否换行）nowrap（默认值 不换行）wrap（换行）wrap-reverse（倒叙换行 第一排在下面）flex-flow（是flex-direction和flex-wrap的合并简写 row
2022-04-12 21:01:33
576
原创 重绘(repaint)和回流(reflow)
概念一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点的几何属性形成rander树(渲染树)，当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对用这些节点在和这个过程中，回流与DOM树有关，重绘与渲染树有关，怎么理解比如我们删除DOM节点，修改一个元素的高度，页面布局发生改变，DOM结构发生变化，那么就肯定重构DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完成，渲染树也随之被再次渲染，这个过程叫回流当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DO
2022-04-12 20:59:20
223
原创 在浏览器输入URl，按下回车会经历什么流程
DNS域名解析(通过域名解析出IP)建立TCP连接(根据域名和默认端口80和服务器建立连接)浏览器读取文件(URL中域名后面部分对应文件)的HTTP请求，该请求消息作为TCP三次握手的第三个报文数据发给服务器(SYN敲门 SYN+ACK回应 ACK同意进门)浏览器做出响应，并把对应的html文本发送给浏览器释放TCP连接浏览器解析html...
2022-04-12 20:51:08
1048
原创 http和https的区别
http是明文传输协议，https是由http+ssl构建的，可进行加密身份认证的网络协议，比http更安全https比http安全，对搜索引擎更友好，利于SEOhttp端口80，https端口为443https需要ssl付费证书。http不需要...
2022-04-12 20:49:03
2463
原创 什么是Promise，它有什么用
promise是异步编程的一种解决方案，从语法上来说，它是一个对象，可以获取异步操作的信promise的状态三种状态：pending(进行中)，fullfiled(成功)，rejected(失败)。除了异步操作的结果，任何其他操作都无法改变这三种状态。promise对象只有：从pending变为fullfiiled和rejected的状态改变。只要处于fulldiled和rejected，状态就不会再变了即resolved(已定型)状态缺点无法取消promise，一旦创建就立即执行，.
2022-04-12 20:28:40
139
原创 Vue的生命周期钩子函数
Vue的生命周期钩子函数一、Vue的生命周期共分为四个阶段1.创建实例2.DOM渲染3.数据更新4.销毁实例二、共有八个基本钩子函数1.beforeCreate —创建前触发的行为：Vue实例的挂载元素$el和对象data都为undefined，还未初始化此阶段可以做的事情：加loading事件2.created —创建后触发的行为：Vue实例的data已经有数据了，但是$el还没有此阶段可以做的事情：解决loading，发请求拿数据为mounted渲染做准备3.be
2022-04-09 20:49:54
3002
原创 http常见状态码有哪些？
http常见状态码有哪些？一、2开头的状态码2xx(成功)表示成功处理了请求的状态码200(成功)服务器已成功处理了请求。二、3开头的状态码3xx(重定向)表示要完成请求，需要进一步操作。通常这些状态代码用来重定向。304(未修改)自从上次请求后，请求网页未修改过。服务器返回此响应时，不会返回网页内容三、4开头的状态码4xx(请求错误)这些状态码表示请求可能出错，妨碍了服务器的处理400(错误请求)服务器不理解请求的语法403(禁止)服务器拒绝请求404(未找到)服务器找不到
2022-04-09 20:11:33
41082
2
原创 Typora的使用
Typora的使用一、标题1.1Typora支持6级标题# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题注意点, 从一级标题到 五级标题是字体从大到小显示, 五级标题和六级标题字体是一样大的,只是文字颜色变浅1.2快捷键创建标题的快捷键是：Ctrl + 1 一级标题Ctrl + 2 二级标题Ctrl + 3 三级标题Ctrl + 4 四级标题Ctrl + 5 五级标题Ctrl + 6
2022-04-09 10:48:30
1373
原创 Vue的响应式原理
Vue的响应式原理vue2.x的响应式原理是Object.defineProperty代码简单实现：基本原理 <script> const data={} let name='Vue' // 拦截对data对象的name属性的访问 Object.defineProperty(data,'name',{ //拦截属性的访问 访问属性的时候 会执行get get: function(){ console.log('get')
2022-04-08 19:00:46
377
原创 浅谈对象的深拷贝和浅拷贝
浅谈对象的深拷贝和浅拷贝一、为什么使用对象的拷贝？1.在普通数据类型赋值 let a=10 let b=a a=20 console.log(a)//a=20 console.log(a)//b=10因为普通数据类型的变量和数值存放在栈内存中可以直接改变a与b没有任何关联2.在引用数据类型赋值 let obj1={ name:'小彭', age:20 } let obj2=obj1 obj1.name=
2022-04-05 16:32:48
915
原创 px和em以及rem的区别
px和em以及rem的区别一、px(像素)相对长度单位，相对于分辨率而言的，1920*1024意思为宽为1920像素，高为1024像素二、em它并不是固定的，em会继承父元素的大小没有父级继承时，默认继承浏览器字体大小16px 1em=16pxdiv{ font-size: 20px; } div>span{ font-size: 1em; } <div> <span>哈哈哈哈</span
2022-04-05 11:48:40
333
原创 清除浮动有哪几种方式
清除浮动有哪几种方式一、额外标签法闭合思想(用最后一个盒子作为隔板) ul{ width: 100%; margin: 0; padding: 0; list-style: none; border: 1px solid #000; } li{ width: 100px; height: 100px; background-color: red; margin: 5px;
2022-04-05 11:34:49
120
原创 Css盒子模型
Css盒子模型一、当box-sizing:content-box(标准盒模型)width=content+padding(左右)+border(左右)div{ box-sizing: content-box; width: 100px; height: 100px; border: 10px solid red; padding: 20px; margin: 20px; } let div= document.qu
2022-04-05 11:25:51
232
原创 src和href的区别
src和href的区别区别：src用于代替这个元素，而href用于建立这个标签与外部资源的关系<link rel="stylesheet" href=""> 浏览器加载到这里的时候，html的渲染和及解析不会暂停，css文件的加载是同时进行的<script src=""></script> 当浏览器进行解析到这个代码块的时候，页面加载和解析都会暂停，直至浏览器拿到并执行完这个文件...
2022-04-04 23:37:18
320
原创 cookie，localStorage，sessionStorage三者的区别？
浏览器存储Cookie，localStroage，sessionStorage的区别内容CookielocalStroagesessionStorage生命周期可以自行设置 默认是到浏览器关闭除非自行清除否则就是永久存在浏览器关闭大小4KB5MB5MB与服务器通信需要与服务器通信拿到数据无需通信在浏览器拿数据无需通信在浏览器拿数据...
2022-04-04 23:27:13
392
原创 对语义化标签的理解
对语义化标签的理解概念：简单来说就是合适的标签做合适的事语义化标签headernavarticlefooterasidesection优点在没有CSS的情况下，页面也能呈现出很好的内容结构良好的html结构语义化使代码更具可读性，便于团队开发和维护有利于不同设备的解析有利于SEO(和搜索引擎建立良好的沟通，有助于爬虫爬更多的有效信息)...
2022-04-04 23:07:22
375
原创 浅谈js的运行机制
js的运行机制一、js的同步程序和异步程序1.同步程序指主线程上排队指向的任务，只有前一个任务执行完毕，才能执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务。2.异步程序异步程序是值不进入主程序，而进入任务队列，只有任务队列通知主线程，某个异步任务可以指向了，该任务才能进入主线程，当我们打开网站，像图片的加载，音频的加载，就是一个异步任务。异步任务一般是ajax,计时器,读取文件同步任务执行完毕后才会执行异步任务二、js是单线程以一个例子进行验
2022-04-04 21:31:07
4172
原创 js中的this指向问题
js中的this指向问题一、在全局环境下全局环境下this指向window console.log(this); //Window对象二、this在方法中方法中的this指向调用这个方法的对象let obj={ name:'王也', fn1:function Fun(){ console.log(this); } } obj.fn1() //结果为 {fn1: ƒ Fun() name: "王也"}三、事件中的this事件
2022-04-04 20:37:30
165
原创 call，apply，bind的区别以及应用
call，apply，bind的区别以及应用一、call和apply,bind可以修改this的指向但是bind比较特殊 详解在下面第二条let obj1 = { name: "彭于晏", sayHello: function () { console.log('Hello '+this.name); }}let obj2 = { name:'胡歌'}obj1.sayHello()// 结果为 Hello 彭于晏// 使用call改变this指向obj1.sa
2022-04-04 20:12:31
361
原创 让一个不定宽高的盒子水平垂直居中
让一个不定宽高的盒子水平垂直居中一、使用定位的方式 .father{ position: relative; width: 500px; height: 300px; background-color: skyblue; } .son{ width: 40px; height: 40px; background-color: orange; position: absolute;
2022-04-03 21:15:18
924
2
原创 防抖与节流
防抖与节流一、防抖1）使用原生js实现简单防抖 <input type="text"> <script> var inp=document.querySelector('input') var t=null inp.oninput=function(){ if(t!==null) { clearTimeout(t) } t=setTimeout(()=>{ con
2022-04-03 15:31:53
96
原创 使用CSS实现三角形和扇形
使用CSS实现三角形和扇形一、实现三角形//原理就是使用边框实现，边框分为四份每一份是一个45度角的三角形，//通过设置边框宽度和颜色，不显示的颜色设置为transparent，展示三角形 div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color:red red transparent transparent; } <
2022-04-03 14:27:20
414
原创 三栏布局中间自适应
三栏布局中间自适应一、使用flex布局//原理使用flex布局，左右给固定宽度，中间使用felx:1分得剩余宽度 .outer{ display: flex; width: 100%; } .outer>div{ height: 200px; } .left{ width: 200px; background-color: red; } .center{ flex: 1;
2022-04-03 14:02:52
1145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人