- 博客(38)
- 收藏
- 关注
RSS订阅原创 修改dataV轮播表背景图
修改第三方UI组件样式都适用！！项目需求：使用dataV轮播表组件库时，需要修改轮播表头的样式但是dataV的参数配置里面只能设置background-color不能设置background-image这时候需要F11检查找到需要修改的元素类名，比如红色框里圈出来的这些：然后在你调用这个组件的vue文件里面的<style>里面设置样式：<style scoped> /deep/ .dv-scroll-board .header{ borde.
2022-04-26 16:02:11
1821
1
原创 按需引入element-ui及打包后对组件进行优化
参考：前端vue电商后台管理项目_哔哩哔哩_bilibiliP14和P203安装其他组件时也可作为参考。步骤一：先npm install xxxxx你需要导入的组件名称步骤二：在你的项目文件src--plugins目录中创建一个叫element-ui.js的文件输入 import Vue from 'vue'步骤三：如果你想按需导入BUTTON组件，你只需要输入：import {Button} from 'element-ui'Vue.use(Button)步骤.
2022-04-22 13:55:52
720
原创 初始化一个前端新项目
做的是基于vue3的新项目一开始使用vue ui命令初始化一个新的vue3项目一、将项目推送到远程coding上（其他代码平台也适用）1.创建SSH密钥SSH密钥的具体作用目前还没搞明白。。前端vue电商后台管理项目_哔哩哔哩_bilibili看这个视频的P6，申请公钥，不管是在gitee还是coding还是什么代码托管平台使用方法都是一样的。2.在你的代码托管平台（我的是coding）创建一个新的仓库，开始与你本地的项目进行关联。注意，在创建新的仓库的时候一定不能选择创建R
2022-04-13 10:30:03
652
原创 前端项目初始化
因为只学过vue，所以就用vue-cli的UI可视化界面进行初始化1.随便打开win+R 打开cmd2.输入vue ui命令打开面板
2022-03-14 15:52:09
1193
原创 异步加载JS的方式
动态脚本加载 在JS执行过程中动态创建一个script标签，加到body上去 defer 有这个属性的script标签会 在html标签结束即整个页面解析完之后执行， async 加载完这个脚本后立即执行 defer 和 async都是并行加载js文件的...
2021-12-27 16:48:37
245
原创 防抖和节流（切合实际案例讲）
比如双十一秒杀，用户在1秒内可能点击了很多次这个购买按钮，这个时候我们就需要使用防抖，在N秒内只执行一次点击操作。节流比如鼠标滑轮进行高频滚动，它在n秒内只执行第一次
2021-12-27 16:46:48
593
原创 浏览器的事件循环
参考视频：2分钟了解 JavaScript Event Loop | 面试必备_哔哩哔哩_bilibili前端面试必问的JS事件循环，看完Offer拿到手软【干货收藏】_哔哩哔哩_bilibili我们都知道JS是单线程的，所以遇到异步任务比如定时器、Promise时，浏览器会启动另一个线程来执行这个任务。宏任务：定时器等等微任务：Promise.then()等等同步任务：new Promise 不要以为它是微任务哦输出顺序是同步代码1、同步代码2、同步代码3、promise.
2021-12-27 16:37:25
183
原创 从浏览器地址栏输入URL到显示页面的步骤（重点）
浏览器解析IP地址（DNS解析）-->TCP三次握手后客户端和服务端会建立通讯关系-->服务端发送HTML\CSS\JS\图片资源-->浏览器拿到资源后开始解析载入HTML，DOM从而达到页面的渲染
2021-12-27 15:52:20
318
原创 跨域解决方案+JSONP的原理
参考视频：使用 JSONP 实现跨域【JS面试题】_哔哩哔哩_bilibili跨域解决方案：1.服务器配置CORS2.node.js反向代理，把跨域改造成同域3.将JSON升级成JSONP，利用 script标签可以跨域的特性JSONP的原理：<script src="需要跨域的服务器地址"></script>再在请求端定义window.callback函数：window.callback = function(data){ conso
2021-12-27 15:45:06
291
原创 cookies\sessionStorage\localStorage区别
参考视频：浏览器缓存_哔哩哔哩_bilibilicookie:cookie是当你浏览某个网站时，由web服务器存储在你机器硬盘上的一个小的文本文件。它其中记录了你的用户名、密码、浏览的网页、停留的时间等等信息。当你再次来到这个网站时，web回会先看看有没有它上次留下来的cookie。如果有的话，会读取cookie中的内容，来判断使用者，并送出相应的网页内容，比如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。调用：document.cookie大小：cookie很小差不..
2021-12-27 15:14:00
243
原创 Promise有关知识汇总
参考视频：异步编程: 一次性搞懂 Promise, async, await (#js #javascript)_哔哩哔哩_bilibiliasync、await 与 Promise【JS面试题】_哔哩哔哩_bilibili如果还不会，就花7小时仔细自学：Promise从入门到自定义(promise前端进阶必学)_哔哩哔哩_bilibili会慢慢更新的哈~1.JS在设计之初就是单线程的编程语言2.Promise为何产生：解决回调地狱的问题比如在一个定时器函数里面再写一个定时器函数，.
2021-12-22 20:40:56
630
原创 垃圾回收机制和内存泄漏
垃圾回收机制垃圾回收机制它的作用是负责在代码执行时管理内存，基本思路是：首先确定哪个变量不会再使用（标记清理和引用计数），然后释放它占用的内存。这个过程是周期性的，意思就是垃圾回收程序每隔一段时间就会自动运行。内存泄漏：全局变量 不用 var 声明的变量，相当于挂载到 window 对象上。 被遗忘的定时器和回调函数 闭包 没有清理的 DOM 元素引用...
2021-12-21 21:13:40
114
原创 js继承的几个方式
参考：js继承的6种方式 - ranyonsue - 博客园一、原型链继承：如图所示：父类是Person（继承谁，继承谁的属性）function Person(name){ //这个构造函数里面定义了一个name 和一个 sum() this.name = name this.sum = function(){ alert(this.name) }}再定义一个构造函数Son：function Son(){ this.name = 'ker'}再使得Son的原型指..
2021-12-21 21:03:43
108
原创 JS的作用域链是什么及其作用
一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。 JS中的作用域链主要用于解析变量的值。 如果没有这个，在不同的作用域内定义了许多变量，JS很难为变量选择某个值...
2021-12-21 16:37:22
494
原创 模块化编程（面试简洁版）
高度概括就是：低耦合高聚合低耦合：写一套方法就可以复用在整个页面，避免了代码的冗余。高聚合：高聚合就是复用性很强，写一套代码下次需要的话就直接再调用它，整个项目都可以调用。...
2021-11-29 17:56:47
112
原创 console.log(0.1+0.2)精度缺失
结果是0.3000000000000000004在JS里面小数是由十进制转换为二进制计算的，那么二进制也有限制是52位，所以会造成精度缺失
2021-11-29 17:25:54
487
原创 用link和@import导入CSS的区别
link导入CSS：<link rel="stylesheet" type="text/css" href="css/zzsc.css">@import导入CSS：<style type="text/css"> @import url("css/zzsc.css");</style>区别：1.link标签和HTML页面是并行加载的，而@import是加载完页面才被加载的2.JS能控制DOM用link导入的样式，控制不了用@import导入的
2021-11-29 17:09:51
125
原创 xhtml和html的区别（面试简洁版）
有功能和语法两个角度：功能上区别：XHTML兼容性强语法上区别：XHTML书写更加严谨，列出其中三条：1.所有标签必须小写2.标签必须成对3.所有属性必须使用双引号
2021-11-29 16:50:39
116
原创 实现0.5px边框
就先写一种方法首先写一个长宽为200px的红色div:接着给它一个1px粗的蓝色下边框border-bottom: 1px solid blue;再给它加一个透明属性border-bottom: 1px solid blue transparent;再设置这个下边框的背景图片属性：border-image: linear-gradient(to bottom,transparent 50%,black 50%) 0 0 100% 0 ;line...
2021-11-25 17:54:37
218
原创 如何进行SEO优化
我理解的SEO优化就是让你写的这个网页在各大搜索引擎（如百度谷歌等）中排名尽量靠前有百度快照的说明做过SEO了优化方法：1.对HTML的 title,keywords,description尽量简化精炼2.尽量语义化HTML代码，正确的标签做正确的事，比如列表就用li标签，需要强调的文本就用strong,em等等3.重要内容HTML代码放在最前4.重要内容尽量不要用JS输出，爬虫不会执行JS获取内容5.非装饰性图片必须加alt属性6.提高网站加载速度...
2021-11-25 17:14:48
503
原创 什么是浏览器内核及分类（面试简洁版）
浏览器内核其实就是一个代码翻译器把服务器传过来的HTML CSS JS 代码转换为可视化的文字图片颜色等信息常见的浏览器内核：safari: webkitChrome:blinkOpera:Presto火狐：GeckoIE,360,搜狗,腾讯:Trident...
2021-11-25 16:39:14
493
原创 伪类和伪元素的区别（面试简洁版）
伪类：有:active,:hover,:visited这类伪元素：::before,::after这类区别：一个单冒号，一个双冒号
2021-11-25 16:27:47
125
原创 前端性能优化方案
1.减少DOM操作尽量减少重排重绘的操作2.优化JS代码减少作用域链上的查找次数，避免全局查找把不重要的JS代码放在页面底部，页面加载之后再加载这些代码3.减少HTTP请求4.开发前，压缩图片和代码5.开发后，通过webpack里面的external节点来加载外部的CDN资源，凡是声明在externals里面的第三方依赖包，都不会被打包6.图片懒加载7.路由懒加载...
2021-11-25 10:36:47
634
原创 清除浮动方法
参考文章：清除浮动的最常用的四种方法，以及优缺点_h_qingyi的博客-CSDN博客_清除浮动第一种：子元素后添加元素，属性 clear:both（clear属性的用法） 第二种：父元素，overflow:hidden 第三种：父元素的伪元素方式一，以下这几个属性都要加#parent::after{ content:""; height:0; visibility:hidden; display:block; clear:both;}这里面#parent是父元素.
2021-11-25 09:47:09
84
原创 SPA单页面应用（面试简洁版）
只加载单个HTML页面，如果页面加载完成，就不会再进行页面的加载或者跳转，通过JS动态控制 div的显示与隐藏来实现用户与UI的交互。优点：前后端分离缺点：第一次加载耗时比较长
2021-11-25 08:54:39
192
原创 px,em,rem,vw/vh的定义与区别
px:像素值不多赘述em/remem是相对于当前像素的font-size如果font-size是10px, 0.5em就是5pxrem是相对于html根元素的font-sizevw/vh全称viewport width/viewport height1vw/1vh 就是当前设备宽度的1%em/rem 和 vm/vh 精度vm/vh 精度更高，因为它针对的是视窗大小，但可以忽略不计...
2021-11-25 08:45:24
187
原创 flex布局基础
参考：一篇文章弄懂flex布局 - 听风是风 - 博客园详细把能想到的点写一下：1.兼容性兼容到IE10以上2.属性display: flexjustify-content:center 左右居中对齐align-items:center 上下居中3.flex:0 1 auto --->放大、缩小、默认宽度这条属性写在子元素上auto(1 1 auto)none(0 0 auto)...
2021-11-19 20:32:26
190
原创 什么是BFC
参考B站大佬视频：带你用最简单的方式理解最全面的BFC_哔哩哔哩_bilibiliBFC的定义：1.BFC属于普通流（即实行行内元素水平排开，块级元素自占一行的规则）2.BFC可以看作元素的一种属性，这个元素内部的子元素的布局不会影响到外面的元素如何触发BFC：以上7点其中任意一个属性都可以触发BFCBFC的优点：1.避免外边距重叠比如相邻的两个块元素A,B margin 都是10px,那么一般来说它们的间距是10px（取两个margin的最大值），如果把AB分别放在有.
2021-11-19 20:07:56
226
原创 vuex中getters的两种调用方法
getters和state用法相似，有点像vue中里面的data 和computed两个之间的关系使用：state: { count:0, }, getters:{ countAdd(state){ return state.count + 1 } },方法一：this.$store.getters.xxxxxx是getters里面的名称方法二：import { mapGetters } from 'vuex'.....computed:.
2021-11-19 19:32:52
2705
原创 vuex中actions的作用及两个用法
作用：只能在actions里面进行异步任务比如想要启用定时器函数，就必须在action里面进行，同时要记得只有mutations能修改state数据，actions不能直接修改。用法一：1.首先用法一和用法二都是一样的，现在actions上面进行定义： actions: { timeSub(context,mSeconds){//第一个参数是context固定不变，第二个是自定义参数 setTimeout(() => { context.commit('sub',3
2021-11-19 17:43:06
3581
1
原创 vuex中调用mutations的两种方法
1.现在我们的vuex里面定义了state和mutations state: { count:0, }, mutations: { add(state){ state.count++ }, },2.想要在组件里面修改count的值，不可以直接进行修改，要调用mutations来修改组件A中的代码：按钮button绑定了addButtion事件，在事件中调用了mutations，格式是this.$store.commit('xxx') xxx是在m
2021-11-19 16:12:49
19359
原创 vuex中调用state数据的两种方法
方法一：比如现在state中有这样一个数据count,值为0： state: { count:0, },那么在组件中可以调用this.$store.state.xxxx来访问即this.$store.state.count例如，组件A：<template> <div class="add"> 我是加法：{{$store.state.count}} </div></template>展示出来就是：方.
2021-11-17 17:42:07
4430
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人