
前端知识总结
文章平均质量分 66
对之前学习的前端知识进行总结,加深理解。
~小猿
前端学习者,一起努力吧!
展开
-
手写分页器组件(vue2)
效果图如下:1.首先要确认参数currentPage:当前页码;pageSize:每页有多少条数据;pageGroup:连续页码数量;total:数据总数;totalPage:总页数2.计算总页数,使用 数据总数 / 每页有多少条数据 向上取整即可。(放在computed中自动计算)computed:{ // 共有多少页 otalPage(){ return Math.ceil(this.total / this.pageSize); }.原创 2022-04-16 16:58:13 · 1363 阅读 · 0 评论 -
vue路由跳转,动态高亮显示问题 -- 亲测可用
在项目中遇到一个问题,就是在跳转指定路由后,动态设置高亮显示。如图然后封装了一个utils函数用来解决此问题。直接上代码:// 改变路由跳转后的高亮显示// 参数1:index下标 // 参数2:element 元素类名 // 参数3:activeName 高亮类名export default function (index, element, activeName) { // 获取所有节点,注意querySelectorAll是按顺序获取节点的. let allE原创 2022-04-12 21:28:34 · 1988 阅读 · 0 评论 -
JavaScript -- 对象与原型链 [[Prototype]]
一、第三章:对象1.属性描述符(数据描述符)可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对象中属性a的属性描述符。举个例子var obj = { a:1}console.log(Object.getOwnPropertyDescriptor(obj,'a'));使用 Object.defineProperty( myObject, "a", { value: 2, writable:原创 2022-04-04 18:35:53 · 2092 阅读 · 0 评论 -
JavaScript -- this详解
一、第一章:关于this1.两个误解●this指向函数自身●this指向函数的作用域2.this究竟是什么?this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。二、第二章:this全面解析1.调用位置最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。我们关心的 调用位置就在当前正在执行的函数的前一个调用中。2.绑定规则(1)默认绑定(2)原创 2022-04-01 10:57:27 · 3296 阅读 · 0 评论 -
JavaScript作用域与闭包
一、作用域二、闭包原创 2022-03-28 20:26:15 · 3277 阅读 · 0 评论 -
编译型语言与解释型语言
计算机只能识别二进制指令,不能直接识别由JavaScript等高级编程语言所编写的代码(源代码),所以需要将高级语言转为二进制指令。由于不同语言转换为二进制指令的时机不同,可分为编译型语言和解释性语言。一、编译型语言● 编译型语言编译型语言要求使用编译器一次性将所有源代码编译为一个可执行程序,一次编译可重复执行。代表语言有C、C++、Golang、汇编等。● 编译型语言一般不能跨平台1.编译出来的可执行程序不能跨平台:因为不同操作系统对可执行文件有着不同的要求,彼此之间不能兼容。原创 2022-03-28 20:17:23 · 13668 阅读 · 0 评论 -
JS模块化
JS模块化主要有 CommenJS(node)、JS module(es6)。一、Commen JSCommen JS主要是node环境中用于模块化开发,每一个js文件都是一个模块,有自己的作用域,其中的变量和函数都是私有的,对外部js文件不可见。使用module.exports或exports关键字进行对外暴露,可以在普通的js文件中使用1.text.js中的模块 module.exports写法(以下三中写法完全一样)function a(){ console.log('a')原创 2022-03-16 20:55:41 · 2234 阅读 · 0 评论 -
form基础表单总结
1.原创 2022-03-07 18:34:01 · 17777 阅读 · 0 评论 -
CSS预处理器--SCSS
1.原创 2022-03-01 20:01:30 · 1645 阅读 · 2 评论 -
高度塌陷与垂直方向外边距重叠
一、高度塌陷1.介绍:当父元素没有设置高度时,如果子元素全部浮动,那么父元素将没有元素撑开,那么就会导致父元素高度塌陷。案例如下:<style> .wrapper{ width: 300px; border: 2px solid red; } .box1{ float: left; width: 50px; heig原创 2022-02-28 19:42:33 · 217 阅读 · 0 评论 -
CSS--filter属性
filter属性将模糊颜色等图像效果应用于元素,主要用来调整图像,背景图片等。常用属性如下: filter: blur(15px); 设置模糊度,0表示无变化,数值越大越模糊; filter: brightness(1.3); 设置亮度,1表示无变化,小于1变暗 filter: contrast(1.3); 设置对比度,与brightness()效果差不多 filter: drop-shadow(0 0 10px b原创 2022-02-24 14:02:31 · 533 阅读 · 0 评论 -
div标签中文、英文、数字、字母溢出问题
1.默认情况下,div处理文字溢出(文字超过div宽度)如下:中文/英文 默认换行 数字/字母 默认不换行 2.所以需要css进行控制white-space:nowrap; 使中文/英文不换行,对数字/字母不起作用 word-break:break-all; 使数字/字母换行,对中文/英文不起作用 word-wrap: break-word; 使数字/字母换行,使中文/英文换行(默认也换行) ...原创 2022-02-22 14:54:32 · 1241 阅读 · 0 评论 -
canvas基础
一、canvas介绍1.canvas是HTML5新增的一个双闭合标签,它目前能够提供2D图形的绘制,为数据可视化提供基础。它就相当于一块画布,js是画笔。2.canvas注意点--canvas标签浏览器默认是一张300*150像素的图片。--canvas标签内部书写的文字或其他标签等都不会显示。--canvas标签可以设置width|height属性,来确定画布的宽高,宽高不要在css中书写,因为当在canvas标签中设置width|height属性时,css中设置的宽高会无效。3.原创 2022-02-05 16:54:07 · 3148 阅读 · 0 评论 -
SVG基础
一、介绍SVG是一种基于XML的图像文件格式,是一种缩放不会失真的矢量图。使用<svg></svg>标签来绘制形状,形状的绘制都要放在此标签中,svg默认宽度是300px,高度150px,设置宽高的时候要在css中去设置(与canvas不同)。二、基本用法1.绘制线段:line标签<!-- 绘制线段 --><line x1="100" y1="100" x2="200" y2="200" stroke="red"></line&g原创 2022-02-08 14:31:41 · 1945 阅读 · 0 评论 -
ECharts基础
一、介绍ECharts是一个基于 JavaScript 的开源可视化图表库,能够比较方便的构建柱状图、饼图、折线图等,用于数据可视化的展示。二、基本认识1.引入echarts的js文件,然后就可以获取一个名为echarts的对象,如<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>2.准备一个设置宽高的容器。<div style="wi原创 2022-02-14 16:56:42 · 2364 阅读 · 0 评论 -
Git相关整理
一、学习Git之前,先要了解一个概念:版本控制1.版本控制(revision control)是一种在开发过程中用于管理我们对文件、目录或工程的修改历史,方便查看更改历史记录,备份以便恢复以前的版本的软件工程技术。简单来说就是用于管理多人协同开发的技术。2.版本控制的分类(1)本地版本控制:指在我们自己的电脑中保存着个人对版本的修改,并不与其他电脑产生联系。(2)集中版本控制:指所有的版本都保存在公司服务器上,协同开发者需要从服务器上同步更新或上传自己的修改。如果不联网,协同开发者就看不原创 2022-02-18 12:28:32 · 364 阅读 · 0 评论