- 博客(62)
- 资源 (3)
- 收藏
- 关注
原创 哇去,有了这篇文章,项目中引入了再多的字体包,我都不怕了!!!
font-weight实现按需自动引入不同自重字体包,unicode-range实现按需自动引入不同语言字体包
2024-03-01 11:39:41 1150
原创 日常项目中常用函数的记录总结(二)
判断是否ie浏览器/是否mobile端/是否ios设置/是否微信内置浏览器/SHA1加密算法/CryptoJS加密解密算法/判断外链
2024-02-07 14:42:55 435
原创 vue&vue-cli 3.0项目中遇到的有趣问题(五)
1、自定义字体在ios系统上不生效的问题2、word-wrap3、常用方法总结4、template5、mixin混入文件6、设置网页标题7、pc端和mob端的双端切换8、css和scss自定义全局变量9、自定义全局指令10、自定义全局插件...
2021-10-07 11:22:53 657
原创 vue&vue-cli 3.0项目中遇到的有趣问题(四)
1、vue中页面跳转的方式2、逐行展示,多余省略的样式3、取消div滚动的滑轮4、div居中方法汇总
2021-04-12 22:48:47 516 1
原创 在Vue项目中自定义全局指令
1、编写监控屏幕大小改变的指令// 监听屏幕宽度改变export const resize = { // 初始化绑定指令 inserted (el, binding) { // 指令的绑定值,是一个function函数 const callback = binding.value; // 获取屏幕宽高 const param = { e: null, width: window.innerWidth, height: window.innerHeight };
2021-03-28 15:49:39 800
原创 在Vue项目中自定义全局插件——全局Loading插件
import loadingTempalte from ‘./loading.vue’;import { getEnv } from ‘tools’;const env = getEnv();function loading () {return loading;}loading.install = Vue => {const Loading = Vue.extend(loadingTempalte);const KaTeX parse error: Expected '}', got
2021-03-21 17:46:42 1172
原创 前端css设置div垂直水平居中的方法总结
前端css设置div垂直水平居中的方法总结1、定位+偏移2、间距3、flex布局4、grid布局5、定位+外边距1、定位+偏移需要用到position: relative; position: absolute; transform: translate();.about{ width: 100%; height: 600px; margin: 20px auto 0; position: relative; background: aquamarine;
2021-02-19 11:05:12 843 1
原创 webpack从入门到精通学习笔记-第三节课——配置文件与资源打包
一、前言这一部分需要用到webpack的配置文件了webpack.config.js,首先在项目外围创建webpack.config.js文件,如下包括五大核心。module.exports={ //指定入口文件 entry:'', //指定输出目录 output: { }, //配置打包环境 mode:'', //指定webpack打包时要使用的模块,进行loader配置 module: { //指定加载的规则 rules: [
2021-02-16 20:17:58 611
原创 webpack从入门到精通学习笔记-第二节课——五个核心概念&运行指令
一、核心概念1、入口(entry)入口(entry)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的,默认值是 ./src/index.js。但你可以通过在 webpack configuration 中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:module.exports={ entry: { main: "./js/ind
2021-02-15 13:01:02 157
原创 webpack从入门到精通学习笔记-第一节课——简介
一、webpack是什么?webpack是一种前端资源构建工具,一个静态资源打包器(module bundler)。在webpack看来,前端的所有资源(json,js,css,img,less等等)都可以作为模块处理。它将根据模块之间的引用关系进行静态分析,打包生成对应的静态文件。二、为什么使用webpack?如今,很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法a:模块化,让我们可以把复杂的程序
2021-02-15 12:32:28 168
原创 TypeScript快速上手学习笔记-第十二篇——实战项目“贪吃蛇”
一、项目前准备项目主要用到的工具包括typecript,webpack,css拓展语言(less或者scss)博主这边使用的是scss。1-使用命令npm install @babel/core @babel/preset-env babel-loader clean-webpack-plugin core-js css-loader html-webpack-plugin node-sass postcss postcss-loader postcss-preset-env sass-loader s
2021-02-13 22:45:40 311 1
原创 TypeScript快速上手学习笔记-第十一篇——泛型
一、什么是泛型软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。在定义函数或者类时,如果遇到类型不明确的情况可以使用泛型。二、函数中泛型的使用这是是输入某个值,并将此制输出的过程,因为不清楚输入值的类型,所以可以使用泛型。泛型在调
2021-02-08 19:33:51 288
原创 TypeScript快速上手学习笔记-第十篇——属性
一、 publicpublic修饰属性可以是属性在任意位置访问(修改)默认值class Person { // public修饰属性可以是属性在任意位置访问(修改)默认值 public _name:string; constructor(name:string){ this._name=name; }}let per=new Person("ts");console.log(per);console.log(per._name);per._name="js";c
2021-02-08 19:33:32 301
原创 TypeScript快速上手学习笔记-第九篇——抽象类&接口
一、抽象类abstract抽象类:以abstract开头的类称为抽象类,其与普通类差别不大,但无法创建实例对象,所以抽象类是一种专门被用来继承的类。抽象类可以定义抽象方法,即以abstract开头的方法称为抽象方法,是没有方法体的,且只能定义在抽象类中。如果子类继承了抽象类,如果其中包含抽象方法,那么子类必须对抽象方法进行重写。//以abstract开头的类称为抽象类,其与普通类差别不大,//但无法创建实例对象,所以抽象类是一种专门被用来继承的类。abstract class Fruit {
2021-02-08 10:14:47 310 1
原创 TypeScript快速上手学习笔记-第八篇——继承
一、什么是继承?继承是类与类之间的关系,是通过扩展其他类而形成新类来实现的,原来的类称为父类(super class)或基类,新类称为原来类的子类或派生类。在子类中,不仅包含父类的属性和方法,还可以增加新的属性和方法,使得父类的基本特征可被所有子类的对象共享。二、继承的简单样例Cat extends Animal, 此时Cat为子类,Animal为父类,使用继承之后子类会自动继承父类中的所有属性和方法。 class Animal{ } class Cat extends Animal{
2021-02-07 20:12:55 193
原创 TypeScript快速上手学习笔记-第七篇——类
一、面向对象二、类的简单使用使用class关键字来定义类,类中包含两个部分:属性+方法class Person { //定义类属性 name='ts'; //方法 sayhello(){ console.log('Hello,TS',"实例方法"); }};其中不论属性还是方法,分为直接定义实例的和使用static开头的静态的(类的)其中实例的需要通过对象的实例才能访问,而类的可以通过类直接访问。class Person { //定义类属性 //
2021-02-07 20:12:28 215
原创 TypeScript快速上手学习笔记-第六篇——联合webpack打包ts文件
1、在项目中安装npm使用代码:npm install在项目中安装npm,安装成功会生成node-modules文件夹和package.json文件2、在项目中安装webpack,webpack-cli,typescript,ts-loader依赖使用代码:npm install webpack webpack-cli typescript ts-loader --save-dev安装所需的依赖,安装成功,会在package.json文件中生成依赖3、配置webpack打包配置文件webpack
2021-02-06 18:25:40 603
原创 TypeScript快速上手学习笔记-第五篇——TypeScript编译配置选项
前言之前,我们了解到我们可以采用tsc xxx.ts对ts文件进行编译,但是需要我们在修改文件之后自己手动输入,而不是自动编译的,这十分麻烦,那有没有什么方法可以自动编译呢有,输入代码:tsc xxx.ts -w进入自动检测编译模式。每次文件更新之后。尽管,我们实现了自动编写,但是还只是对单一的文件,如果工程巨大,需要编译的文件众多,那这又是十分不可取的,之前我们讲过TS有丰富的配置选项,接下来我们就来编写TS配置文件。我们在项目外围新建TS配置文件 tsconfig.json博主这边默认是
2021-02-06 11:24:23 1996
原创 TypeScript快速上手学习笔记-第四篇——TypeScript类型
类型概览TS中有如下数据类型:number——数字类型let num:number;num=10;let num:number=10;num=20;let num=10;num=20;function fun_num(a:number,b:number):number{ return a+b;}string——字符串类型let str:string;str='ts';let str:string='js';str='ts';let str='js';str='
2021-02-05 16:29:33 311
原创 TypeScript快速上手学习笔记-第三篇——类型声明
前言我们知道JS的变量等的类型是动态,这在一定程度上使我们的开发过程变得十分不方便。而TS一个主要的作用就是解决JS动态类型的问题,让js数据类型变得固定,这就是TS的类型声明,主要应用在变量和函数部分。一、变量的类型首先我们写下如下的代码://声明一个变量a,同时指定它的类型为numberlet a:number;//以为a的类型为number,那么给a赋值只能为数字a=10;a=30;//此时赋值为字符串会报错,但是因为符合js要求则暂时会编译成功a='1';//报错通过tsc
2021-02-04 22:26:28 258
原创 TypeScript快速上手学习笔记-第二篇——环境搭建与“Hello,TypeScript”
0、在保证了电脑上安装好node.js并可以运行npm,再进行以下操作1、安装全局TS再命令行cmd中输入代码:npm i -g typescript,安装完成输入代码:tsc -v检查是否安装成功。2、创建一个ts文件创建一个ts文件:xxx.ts 并编写一个ts代码:console.log("Hello,TypeScript");在这里TS和JS是没有区别的。3、编译ts文件为js文件因为ts不能被js解析器直接运行,所以无法直接执行ts文件,需要先编译成js才可以执行,在cm
2021-02-04 18:17:29 162
原创 TypeScript快速上手学习笔记-第一篇——简介
什么是TypeScript?TypeScript是一种由微软开发的以javascript为基础的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。2012年十月份,微软发布了首个公开版本的TypeScript,2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScript 0.9,向未来的TypeScript 1.0版迈进了很大一步。TypeScript扩展了JavaScript的语法,所以任何现有的Java
2021-02-04 17:52:23 388 1
原创 vue&vue-cli 3.0项目中遇到的有趣问题(三)
vue&vue-cli 3.0项目中遇到的有趣问题(三)一、vue阻止事件冒泡一、vue阻止事件冒泡编写如下代码,会发现父级li有一个点击事件,子级a有一个点击事件,我们在点击a标签事件时会连带父级的点击事件一起执行,这不是我们所需要的。因此,在执行子级事件时防止父级相关的事件生效就是我们所说的阻止事件冒泡。<li v-for="(item,index) in musicList" @click="playMusic(item.id,index)"> <a href="
2021-01-26 11:23:46 847 1
原创 数据可视化清新版【chart.js】学习笔记14.0—数据更新
数据可视化展示除了静态数据的展示,还有动态数据的实时更新。博主通过阅读chart.js的api,总结了以下两种方法:方法1、直接更新图表的数据集this.mydata_1=[7,22,18,24,10,30];//获取新数据this.myChart.data.datasets[0].data = this.mydata_1;//数据集数据更新this.myChart.update();//图表更新方法2、清除原图表,生成新图表this.myChart.destroy();//原图表清除thi
2021-01-13 12:13:10 979
原创 数据可视化清新版【chart.js】学习笔记13.0—图表配置
1、动画(animations)options: { animation: { duration:1000,//动画所需时间,毫秒数 easing:'easeOutQuart',//动画趋势,比如线性 numSteps:10000,//动画帧数 animateRotate:true,//图表将使用旋转动画进行动画处理,环形图,饼图,极地图专属 animateScale:false,//使图表从中心向外缩放。环形图,饼图,极地图专属 onProgress(animation) {/
2021-01-12 16:29:02 881
原创 数据可视化清新版【chart.js】学习笔记12.0—面积图表
面积图是相对于fill配置形成的,而折线图和雷达图都支持数据集对象上的fill选项,该选项可用于创建两个数据集之间的区域或数据集与边界之间的区域,fill存在以下设置情况:|模式类型值绝对数据集索引Number1, 2, 3, …相对数据集索引String‘-1’, ‘-2’, ‘+1’, …边界String‘start’, ‘end’, ‘origin’配置状态Booleanfalse,true官方文档:https://www.chart.
2021-01-11 11:24:49 561
原创 数据可视化清新版【chart.js】学习笔记11.0—混合图表
混合图表类型使用Chart.js,可以创建混合图表,这些图表是两个或多个不同图表类型的组合。常见的是一个柱形图和一个折线图进行联动混合,创建混合图表始于基本图表的初始化。样例代码let ctx = document.getElementById(“myChart9”);let myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orang
2021-01-11 09:23:48 756
原创 数据可视化清新版【chart.js】学习笔记10.0—离散图(Scatter Chart)
Scatter Chart——(离散图)散点图基于基本折线图,x 轴更改为线性轴。要使用散点图,数据必须作为包含 X 和 Y 属性的对象传递。下面的例子创建了一个 3 点的散点图。官方文档:https://www.chartjs.org/docs/latest/charts/scatter.html用法示例var myBubbleChart = new Chart(ctx, {type: ‘scatter’,data: data,options: options});图表属性(博主这
2021-01-08 16:55:45 1103
原创 数据可视化清新版【chart.js】学习笔记9.0—气泡图(Bubble Chart)
Bubble Chart——(气泡图)气泡图用于同时显示三维数据。气泡的位置由前两个维度以及相应的水平和垂直轴线确定。第三个维度由单个气泡的大小来表示。官方文档:https://www.chartjs.org/docs/latest/charts/bar.html用法示例var myBubbleChart = new Chart(ctx, {type: ‘bubble’,data: data,options: options});图表属性(博主这边只列举看出了比较常用和设置影响明显的
2021-01-08 15:17:23 2385
原创 数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area——(极地图)极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异。当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表。官方文档:https://www.chartjs.org/docs/latest/charts/polar.html示例用法new Chart(ctx, {data: data,type: “polarArea”,options: options});图表属性(博主这边只列举看出了比较常用和
2021-01-08 12:11:57 1813
原创 数据可视化清新版【chart.js】学习笔记7.0—环形图(Doughnut )
Doughnut ——(环形图)饼图和环形图表可能是最常用的图表。它们被分成不同的部分,每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类,但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0,环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名,其他是完全一样的。这里主要讲的是饼图。官方文档:https://www.chartjs.org
2021-01-08 11:02:40 1793
原创 数据可视化清新版【chart.js】学习笔记6.0—饼图(Pie)
Pie——(饼图)饼图和环形图表可能是最常用的图表。它们被分成不同的部分,每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类,但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0,环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名,其他是完全一样的。这里主要讲的是饼图。官方文档:https://www.chartjs.org/docs/l
2021-01-08 10:56:17 2044 1
原创 数据可视化清新版【chart.js】学习笔记5.0—雷达图(Radar)
Radar——(雷达图)雷达图是显示多个数据点和它们之间的差异的一种方式,通常用于比较两个或更多不同数据集的点。官方文档:https://www.chartjs.org/docs/latest/charts/radar.html用法示例var myRadarChart = new Chart(ctx, {type: ‘radar’,data: data,options: options});数据集属性(博主这边只列举看出了比较常用和设置影响明显的属性)属性描述类型默认
2021-01-07 17:13:00 2102
原创 数据可视化清新版【chart.js】学习笔记4.0—柱状图(Bar)
Bar——(柱状图/条形图)柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势,并排比较多个数据集。官方文档:https://www.chartjs.org/docs/latest/charts/bar.html#barthickness用法示例var myBarChart = new Chart(ctx, {type: ‘bar’,data: data,options: options});数据集属性(博主这边只列举看出了比较常用和设置影响明显的属性)属性
2021-01-07 15:12:18 4085
原创 数据可视化清新版【chart.js】学习笔记3.0—折线图(Line)
line——(折线图/曲线图)折线图是在一条线上绘制数据点的方法。通常,它用于显示趋势数据或两个数据集的比较。官方文档https://www.chartjs.org/docs/latest/charts/line.html用法示例var myLineChart = new Chart(ctx, {type: ‘line’,data: data,options: options});数据集属性(博主这边只列举看出了比较常用和设置影响明显的属性)属性描述类型默认值
2021-01-07 11:03:14 1781
原创 数据可视化清新版【chart.js】学习笔记2.0—项目引入
博主是在vue-cli3.0项目中配合使用chart.js的,接下来就项目概括一下在项目里安装,也可以参考官网文档:项目中安装获取Chart.js方式步骤步骤1、在项目cmd命令行中运行代码:npm install chart.js --save-dev步骤2、在项目main.js文件中引入进行使用,相关代码:import Vue from 'vue'import App from './App.vue'import router from './router'import store fro
2021-01-07 10:05:52 771
原创 数据可视化清新版【chart.js】学习笔记1.0—介绍
前言:我们平时在写项目的时候,尤其是在做数据展示的时候,设计一个清晰可观的数据展示页是十分重要的。博主接触使用过一些数据可视化插件,比如echart.js , chart.js , Antv-G2。而这里主要是博主在进行chart.js学习啥时候的笔记。chart.js一款适用于设计人员和开发人员的简单而灵活的JavaScript图表,官网:https://www.chartjs.org/gitHub项目地址:https://github.com/chartjs/Chart.js官方文档:htt
2021-01-07 10:03:07 614
原创 【休憩时的练手】—— 制作简易的网易云音乐播放器
1、需求分析1-在输入框中输入相应关键词搜索,可以搜索到相应歌曲列表。2-点击歌曲,获取指定歌曲详细信息(包括:歌曲链接+歌曲图片+歌曲评论)并开始播放。3-点击播放mv,获取相应歌曲的mv,并在mv层播放。2、使用的API博主使用的是网易云音乐的接口api:1-歌曲列表搜索api:https://autumnfish.cn/search?keywords=雪2-获取歌曲链接api:https://autumnfish.cn/song/url?id=10012323-获取歌曲图片api:ht
2021-01-04 09:30:34 989 2
当java遇上爬虫,我的数据库再也不缺数据了项目详细源代码
2020-12-18
前端学习(html+css+jquery.chm)资源参考
2020-12-10
ES6常用知识点学习总结
2020-12-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人