- 博客(41)
- 收藏
- 关注
RSS订阅原创 前端面试题总结
一、JavaScript1、js的数据类型八种：number string boolean null undefined object symbol bigInt其中Object引用数据类型有：array date function2、变量提升（1）分变量提升和函数提升（2）变量提升只能是提升到当前作用域的顶部，不会超出作用域（3）函数声明会提升，但是函数表达式不会提升（4）具名函数表达式同样不会提升3、闭包（1）闭包的作用域链包括：自己的，包含他的函数的，以及全局的
2022-05-17 01:31:29
462
原创 实际项目中如何优雅封装使用axios？
前言:真实项目中模块众多，接口数量庞大，并且需要根据实际场景去做一些请求拦截，相应拦截，所以如何组织封装请求呢？以下是一个真实项目的封装方式的逻辑~~（精简版）1、首先在src下新建一个api文件夹api文件夹下，建各个模块的接口文件夹（如下的login模块，student模块），一个配置文件config.js，以及一个index.js用于统一导出各模块。2、配置文件的写法主要做了三个事：（1）使用axios.interceptors做请求拦截（2）写request函数：..
2022-04-29 18:28:13
365
原创 如何在粘性定位触发时修改样式
要实现的功能：实现选择栏置顶之后 选择栏本身背景颜色等属性这块圈红的这个ul ，现在没有背景色，li 的背景色是白色现在想要实现以下效果，即黏在顶部时，ul 背景改为白色，li 背景改为会一点的颜色实现方法：1、监听scroll滚轮事件2、获取目标元素位置3、到达指定位置触发回调 mounted () { this.stckyChange() }, methods: { stckyChange () { this.callback.
2022-03-10 14:43:55
867
原创 Vue插槽的用法
1、组件上的数据，插槽位置是访问不到的，插槽位置处于父组件中，只能访问父组件的数据 <div class="takeOutFood"> <Shop price="1"> // 这个price访问不到 {{price}} </Shop> </div>2、具名插槽// Shop.vue<template> <div class="shop"> <slot na
2022-03-09 15:50:37
79
原创 实现一个可拖拽表格
一、如何使用sortable.js二、如果搭建mock.js服务器三、如何根据需求封装axios四、如何使用svg-icon五、vue过滤器
2022-03-06 18:30:09
1163
原创 实现一个todoList组件
图片展示：功能：添加，删除，按类展示，全选要点：1、已勾选的文字画横线效果是根据数据源的done（完成与否）属性，动态绑定class实现的2、列表展示的是原todos过滤之后的数据，实现删除后就动态显示还存在的数据3、底部的 All Active Complete 按钮去切换过滤文件的key选择要显示的过滤好的数据，默认就是所有4、点击文字出现input框通过 v-show控制，绑定鼠标事件把value传出来更改原数据5、全选实现方式就是把原数据的所有done属性改成tru.
2022-03-05 00:53:30
589
原创 CSS布局--多列布局
1、三列布局HTML<div class="main"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. .
2022-03-02 17:53:39
325
原创 CSS--浮动布局
1、两个浮动元素宽度都设为50%， 如果加了border就会撑开盒子，装不下，就会换行，解决:box-sizing: border-box。注意：这个属性，只会padding有效果，就是说padding撑开它可以维持原盒子大小（实际上是压缩content吧），但是margin撑开设置border-box也没用2、浮动流盒子后面的正常流如果是文字不会被遮住，如果是块，浮动元素会盖住，3、清除浮动：clear:both 这种情况有个问题，浮动后面的正常流块设置margin无效，解决办法： <div
2022-03-02 16:20:01
128
原创 CSS布局--grid布局
1、栅格布局：grid-template-columns：用于指定多少列 ，如果是实际值比如100px， 那栅格每列宽度就是100px,元素就算设置了宽度，不会去自适应栅格，元素小了就有空隙，元素大了就相互重叠，但是，如果值不是具体值，比如 1fr 那就是按比例占宽度，如果元素总宽小于盒子，那栅格宽度就均分盒子，如果元素总宽大于盒子，每个栅格宽度为盒子宽度，fr就是用于，不设栅格元素宽度时，去分配，所以设定了宽度，又设定比例，按照宽度优先。有多少行好像完全是根据，总元素数和列数确定，重点就是盒子不自适应
2022-03-02 14:32:01
1869
原创 Vue过渡 动画
过渡就是在进场或退场时也就是触发过渡时 去设定transition属性v-enter-from v-enter-to其实就是为了设定过渡的出没状态原生触发过渡比如:hover 里面就需要写末时期的元素状态如果组件一渲染就要运用过渡 就加 appear属性动画就是很多时间帧都在动画里写好了 就不需要初末状态所以当然不要from to 了只需要在active里面规定是哪个动画就行了type属性就是当动画 过渡 时间不一致的时候 谁等谁的问题type设置为transitio
2022-02-28 10:40:58
2980
原创 JavaScript 数组和对象的一些方法
Array的方法 contact: 返回一个新数组，不会扁平化，仅仅是个浅拷贝，但是我发现改变原数组元素，新数组不会改变啊，不是浅拷贝吗，不是意思就是拷贝一个引用吗，那为啥原数组改变了，返回的新数组不改变呢? copyWithIn: 第一个参数就是目标拷贝位置，第二个参数就是从哪开始拷贝，第三个是拷贝结束位置（不包含），一定不会改变数组长度 entries: 返回可迭代对象，对象里包含 done和value，values是个键值对数组 [ ‘index’, ‘value’ ] every..
2022-01-10 10:18:04
290
原创 JavaScript事件循环
我理解的事件循环，就是js是单线程，因为要操作dom，多线程就会冲突，但是如果是异步请求就没必要阻塞去等待，所以设计了消息队列，主线程里面的同步函数会压入调用栈，执行完毕之后出栈，但是如果主线程遇到异步任务，那就把异步任务交给webAPI去做，并且把异步任务执行结束后的回调放入消息队列，紧着这就做下面的同步任务，等同步任务做完了，CPU空闲了，就去执行消息队列中的任务，那么宏任务微任务是啥呢，就是浏览器重新渲染页面的时候，异步有结果了去执行回调那么就涉及到页面的更新，如果一执行回调就更新未免太频繁了，所以设
2022-01-10 10:15:51
354
原创 JavaScript 中的this
this关键字 1、我对this的理解：this就是指代词，代表某个对象，他是当前执行上下文的一个属性，他是函数里才能拿到的，而且是运行时绑定，可以通过bind去改变this的值。 2、class中的this, class本质上就是一个函数，所以this就是指当前上下文，谁调的这个函数，this就指谁咯，如果是class里面的静态方法，不会成为this的属性，只是这个类自身的属性 3、插入一下，class和构造函数的对比，本质上是一样的，写构造函数的时候，不能够在这个构造函数里写方法（目的是..
2022-01-10 10:13:25
574
原创 模拟vue响应式
1、vue2: (1)实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持） 数组类型：通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹） Object.defineProperty(data, 'count', { set(){}, get(){} ...
2022-01-03 21:56:37
461
原创 关于axios
就是对原生ajax进行了一个promise封装1、基本使用//执行GET请求import axios from 'axios'axios.default.baseURL = 'http://localhost:3000/api/products'axios.get('/user?ID=12345') //返回的是一个Promise .then(res=>console.log(res)) .catch(err=>console.log(err));//可配置
2022-01-03 21:37:33
237
原创 pubsub.js publish参数
publish('发布函数名'，data)如果多个数据 要包装成一个obj 或者 arr 才行 不允许 多个参数
2021-12-08 14:57:03
799
原创 Vue 局部混合 全局混合 踩坑
坑： 局部注册的混入 页面只能用一次data中的属性？？？？解决：换成全局注册就好了App.vue<template> <div> <student></student> <school></school> </div></template>mixin.js:export const mixin1 = { methods: {..
2021-12-06 17:39:31
451
原创 vscode node 代码提示
执行 typings install dt~node --global--save 时报错报错1：Unable to connect to "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/a4a912a0cd1849fa7df0e5d909c8625fba04e49d/node/index.d.ts"解决：连个vpn报错二：Attempted to compile "node" as an extern
2021-11-08 18:54:03
352
原创 深入vue响应式原理
先来说一般情况，再说特殊情况一般情况，对于基本数据类型来说，他是怎么相应的呢?Vue会遍历你存入data里的选项，并把他们的property通过Object.defineProperty把这些这些property转成getter/setter（es5做不到，所以IE8及一下没戏），每个组件实例都一个对应的Watcher，当数据的setter被触发时，就会通知watcher，从而重新渲染组件，以下是原理图特殊情况有两种，一种是对象，一种是数组（1）对象，对于已经创建好实例，Vue不允许动.
2021-09-16 19:13:54
81
原创 原型链问题
原型链问题就是根据 构造函数的prototype属性 与 其实例的__proto__属性 指向同一个obj空对象，来建立起原型链的，但是难点在于理清楚 构造与实例的关系。下图是原型链图。（图片待换1、Foo(),Object(),Function()这三个构造函数，是通过构造函数Function()构造而来，所以Foo(),Object(),Function() 是 Function()的实例对象，因此Foo(),Object(),Function()的__proto__属性，都指向Funct.
2021-09-14 13:10:35
115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人