初级前端
文章平均质量分 67
浮游本尊
这个作者很懒,什么都没留下…
展开
-
js基础知识必背
1.如果有多个条件我们可以在数组中存储多个值,并且可以使用数组 include 方法。//Longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}//Shorthandif (['abc', 'def', 'ghi', 'jkl'].includes(x)) { //logic}2.如果为真…否则简写这对于我们有 if-else 条件,里面不包含更大的逻辑时,是一个较大的捷径。原创 2022-03-14 17:58:16 · 429 阅读 · 0 评论 -
Animate动画实现代码(css3常用动画)
-webkit-animation-name: fadeIn; /动画名称/-webkit-animation-duration: 2s; /动画持续时间/-webkit-animation-iteration-count: 1; /动画次数/-webkit-animation-delay: 0s; /延迟时间/使用下面动画的时候,记得加上持续时间吖,不然就是默认为零,看不到效果哒~/* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swi原创 2022-01-12 10:19:33 · 1751 阅读 · 0 评论 -
用a-time-picker写一个时间范围选择器
起因使用过ant-design组件库的人基本都知道,它的time-picker组件并不像date-picker组件那样,支持时间范围选择。所以,这个时候就只能自己手动来写一个了。效果当都为空时可校验选择时如果先填写开始时间,则结束时间框前面置灰选择时如果先填写结束时间,则开始时间框后面置灰实现思路其中最关键的是如果限制时间范围不冲突,也就是开始时间一定要早于结束时间,其中包含时,分,秒这里可以利用原生组件的几个方法:这里因为只需要选择时和分,所以先只有时、分的选项进行验证。<原创 2021-11-01 15:09:32 · 3454 阅读 · 2 评论 -
输入URL到页面加载显示完成的过程及三次握手四次挥手
目录一个页面从输入URL到页面加载显示完成,这个过程中发生了什么1.浏览器补全URL地址2.向DNS查询IP地址3.得到IP地址后,建立连接,进行三次握手4.向该IP地址发送请求5.服务器在80端口接收请求,传送相应内容至浏览器6.浏览器解析内容,并继续搜索页面内是否有请求,有的话继续通过IP地址发送至服务器7.接受完从服务器发送至浏览器的内容之后,浏览器渲染网页,把网页内容呈献给用户8.客户端与服务端断开连接,进行四次挥手,每次断开连接前,客户端和服务端都要先进行四次对话才正式断开连接。什么是 TCP 连原创 2021-09-17 17:02:48 · 218 阅读 · 0 评论 -
vue控制台报错Duplicate keys detected: ‘xxxx‘. This may cause an update error.解决方案
vue项目中报了一个这样的错:vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘47637’. This may cause an update error.虽然不影响使用,但是报错还是得解决的只要一进入该页面,就会出这个红色的错误,网上查了资料,说是v-for循环里,key值可能重复了,所以会报这个错。查看了下,页面果然有v-for循环<div class="b-border-item font12" v-f原创 2021-08-25 11:52:20 · 3993 阅读 · 0 评论 -
前端页面window.print()实现局部打印
近期在做一个需要局部打印页面考试成绩的功能,总体来说有两个思路:dom替换新窗口打印dom替换会导致事件失效,如果重新加载的话又会影响到体验;而新窗口缺因为样式问题也不好解决,都不满足项目的需求,于是把自己的方法贴上来:<template> <div id="printcontent"> //给需要打印的区域一个id <div @click="report">打印考试结果</div> </div></t原创 2021-08-01 12:09:42 · 1108 阅读 · 1 评论 -
vue的 this.$refs 打印为undefined解决办法
当前已收集的Linux安装包版本:段落引用Centos_x86_64(5、6、7、8)原创 2021-07-15 10:07:43 · 10344 阅读 · 2 评论 -
vue实现在页面上导出excel功能
最近需要做一个在页面上导出excel功能,之前以为是前端实现,后来发现有分页,所以让后端来导出会比较方便,下面来详细讲讲,前端导出和后端导出,前端这边该如何实现。一、在不调用后台接口的情况下,将json数据导出到excel表格,代码可直接使用。实现思路:通过将json遍历进行字符串拼接,将字符串输出到csv文件,代码如下:<template> <a-button type="primary" @click="tableToExcel">导出excel</a-butto原创 2021-07-13 15:42:39 · 1196 阅读 · 0 评论 -
nuxt踩坑之stylus和stylus-loader版本不兼容
上一篇,我们把nuxt配置好了,npm run dev运行时发现,好家伙,报错了,报错不要慌,肯定都是能解决的。定睛一看,发现问题不大,缺少@nuxtjs/router这个模块而已,直接npm i @nuxtjs/router安装这个模块。信心满满的再次npm run dev,以为可以运行了,结果又报错了,有没有一种屋漏偏逢连夜雨的感觉…经过排查之后,发现是因为没有安装stylus,安装命令是npm install stylus stylus-loader --save-dev到这里之后,发原创 2021-07-11 19:15:11 · 728 阅读 · 1 评论 -
nuxt如何配置
目录nuxt项目目录结构Nuxt.config.js配置模式如何选择-SPA/Universalplugins 属性配置区分发布环境,部署cdnnuxt项目目录结构|-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript|-- components原创 2021-06-29 12:13:54 · 3949 阅读 · 1 评论 -
nuxt如何搭建项目
Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。为了快速入门,Nuxt.js 团队创建了脚手架工具 create-nuxt-app。现在以[email protected]版本为例,说明如何Nuxt创建项目的。确保安装了 npx(npx 在 NPM 版本 5.2原创 2021-06-24 17:27:22 · 1339 阅读 · 1 评论 -
前端高度还原设计稿
以前前端都是拿到psd设计图,需要自己用ps切图,需要自己在psd上面一个个去量设计的大小和间距,而现在一般都是要求设计师把设计稿直接上传到蓝湖上面,通过蓝湖的标注来写出前端代码。要做到还原设计稿,主要要解决下面这三个问题:元素大小元素与元素之间的间距元素在页面的位置字体元素大小先关注设计图是PC还是移动端,移动端看设计稿是以375px为标准还是以750px宽为标准的设计稿,pc端基本上尺寸1440px,再来说下元素大小的问题,对于图片类的来说我们就要获取图片在蓝湖中的正确大小,这一般来说百原创 2021-06-10 15:07:30 · 4520 阅读 · 1 评论 -
谷歌开发者工具详解(看这一篇就够了)
目录如何打开Element面板1 元素选择2 设备选择模式3 主菜单4 元素面板5 样式调整的CSS预处理器Console面板Sources面板Network面板简单介绍一下chrome的控制台,它的作用在于,帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript、jQuery)之类的,还可以使用工具查看网页加载过程,获取网页请求(这个过程也叫做抓包)。如何打开按F12或右键点击‘检查’可打开此工具。Element面板该标签使用来查看页面的HTML标原创 2021-05-26 15:19:39 · 7817 阅读 · 3 评论 -
详细解读js的原型和原型链(新手看了也秒懂)
对原型的理解在 JavaScript 中,每当定义一个对象(函数也是对象)时候,对象中都会包含一些预定义的属性,Javascript规定,每一个函数都有一个prototype对象属性,指向函数的原型对象(原型链上面的),使用原型对象的好处是所有对象实例共享它所包含的属性和方法。prototype(对象属性)的所有属性和方法,都会被构造函数的实例继承。这意味着,我们可以把那些不变(公用)的属性和方法,直接定义在prototype对象属性上。prototype就是调用构造函数所创建的那个实例对象的原型(pr原创 2021-05-20 10:33:20 · 1527 阅读 · 0 评论 -
项目css优化-atom.css思想
什么是atom.css将很多可重复使用的样式提取出来,放在一个公共的css文件中,一方面自己书写很方便,另一方面可以大量减少vue文件里的css代码,进而减少vue文件的size。atom.css的优势atom.css定义为提供基础类的CSS库,一个class对应一个单独的CSS属性,与Bootstrap、Ant Design等UI框架提供的块状CSS不同的是,atom.css单一属性class将各种CSS块状属性解耦,开发者在书写模板时拥有了极大的自由,在布局时基本上不要去写单独的CSS,而这为后续原创 2021-05-19 15:05:05 · 576 阅读 · 6 评论 -
vue实例生命周期详解
什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。生命周期钩子生命周期钩子:就是生命周期事件的别名。生命周期钩子又叫生命周期函数 也叫生命周期事件。原创 2021-04-28 16:20:25 · 329 阅读 · 0 评论 -
自定义滚动指令加载下一页数据
因为项目在页面请求数据时,是先加载15条,然后往下滚动再加载15条的<div class="db-main-box" v-scrollfix="getScrollMore"> //自定义一个滚动指令 <div class="db-subnav" @click="setFilter"> <i class="cs-zuixin"></i> <span>最新文章</span> </div></div&原创 2021-03-04 10:45:24 · 204 阅读 · 1 评论 -
前端进阶之路——域名(domain)
以前不曾特意去了解域名,今天查看了相关博客,带大家了解一下域名,若想用户能够通过搜索引擎访问你的网站,就必须具备两个条件:拥有一个域名,拥有一台主机/空间。域名是网站的基础,也是到达网站的具体指路牌,如果没有域名,用户则无法轻松访问到网站内容,一个好的域名对于网站而言非常重要。下面,我们就来说一下什么是域名(domain)。维基百科对域名的解释是:互联网上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。网域名称系统(Domain Name System)有时也原创 2021-02-18 14:46:15 · 4505 阅读 · 0 评论