LIMI_伞梦-CSDN博客

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 773

原创在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 1161

原创前端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 768 1

原创 webpack从入门到精通学习笔记-第三节课——配置文件与资源打包

一、前言这一部分需要用到webpack的配置文件了webpack.config.js，首先在项目外围创建webpack.config.js文件，如下包括五大核心。module.exports={ //指定入口文件 entry:'', //指定输出目录 output: { }, //配置打包环境 mode:'', //指定webpack打包时要使用的模块，进行loader配置 module: { //指定加载的规则 rules: [

2021-02-16 20:17:58 606

原创 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 154

原创 webpack从入门到精通学习笔记-第一节课——简介

一、webpack是什么？webpack是一种前端资源构建工具,一个静态资源打包器（module bundler）。在webpack看来，前端的所有资源（json,js,css,img,less等等）都可以作为模块处理。它将根据模块之间的引用关系进行静态分析，打包生成对应的静态文件。二、为什么使用webpack？如今，很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法a:模块化，让我们可以把复杂的程序

2021-02-15 12:32:28 160

原创 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 305 1

原创 TypeScript快速上手学习笔记-第十一篇——泛型

一、什么是泛型软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。在定义函数或者类时，如果遇到类型不明确的情况可以使用泛型。二、函数中泛型的使用这是是输入某个值，并将此制输出的过程，因为不清楚输入值的类型，所以可以使用泛型。泛型在调

2021-02-08 19:33:51 283

原创 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 283

原创 TypeScript快速上手学习笔记-第九篇——抽象类&接口

一、抽象类abstract抽象类：以abstract开头的类称为抽象类，其与普通类差别不大，但无法创建实例对象，所以抽象类是一种专门被用来继承的类。抽象类可以定义抽象方法，即以abstract开头的方法称为抽象方法，是没有方法体的，且只能定义在抽象类中。如果子类继承了抽象类，如果其中包含抽象方法，那么子类必须对抽象方法进行重写。//以abstract开头的类称为抽象类，其与普通类差别不大，//但无法创建实例对象，所以抽象类是一种专门被用来继承的类。abstract class Fruit {

2021-02-08 10:14:47 290 1

原创 TypeScript快速上手学习笔记-第八篇——继承

一、什么是继承？继承是类与类之间的关系，是通过扩展其他类而形成新类来实现的，原来的类称为父类（super class）或基类，新类称为原来类的子类或派生类。在子类中，不仅包含父类的属性和方法，还可以增加新的属性和方法，使得父类的基本特征可被所有子类的对象共享。二、继承的简单样例Cat extends Animal，此时Cat为子类，Animal为父类，使用继承之后子类会自动继承父类中的所有属性和方法。 class Animal{ } class Cat extends Animal{

2021-02-07 20:12:55 191

原创 TypeScript快速上手学习笔记-第七篇——类

一、面向对象二、类的简单使用使用class关键字来定义类，类中包含两个部分:属性+方法class Person { //定义类属性 name='ts'; //方法 sayhello(){ console.log('Hello,TS',"实例方法"); }};其中不论属性还是方法，分为直接定义实例的和使用static开头的静态的（类的）其中实例的需要通过对象的实例才能访问，而类的可以通过类直接访问。class Person { //定义类属性 //

2021-02-07 20:12:28 199

原创 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 595

原创 TypeScript快速上手学习笔记-第五篇——TypeScript编译配置选项

前言之前，我们了解到我们可以采用tsc xxx.ts对ts文件进行编译，但是需要我们在修改文件之后自己手动输入，而不是自动编译的，这十分麻烦，那有没有什么方法可以自动编译呢有，输入代码：tsc xxx.ts -w进入自动检测编译模式。每次文件更新之后。尽管，我们实现了自动编写，但是还只是对单一的文件，如果工程巨大，需要编译的文件众多，那这又是十分不可取的，之前我们讲过TS有丰富的配置选项，接下来我们就来编写TS配置文件。我们在项目外围新建TS配置文件 tsconfig.json博主这边默认是

2021-02-06 11:24:23 1970

原创 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 309

原创 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 256

原创 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 387 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 743 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 951

原创数据可视化清新版【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 860

原创数据可视化清新版【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 551

原创数据可视化清新版【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 740

原创数据可视化清新版【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 1064

原创数据可视化清新版【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 2363

原创数据可视化清新版【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 1794

原创数据可视化清新版【chart.js】学习笔记7.0—环形图(Doughnut )

Doughnut ——（环形图）饼图和环形图表可能是最常用的图表。它们被分成不同的部分，每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类，但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0，环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名，其他是完全一样的。这里主要讲的是饼图。官方文档：https://www.chartjs.org

2021-01-08 11:02:40 1757

原创数据可视化清新版【chart.js】学习笔记6.0—饼图(Pie)

Pie——（饼图）饼图和环形图表可能是最常用的图表。它们被分成不同的部分，每个部分的圆弧表示每个数据的比例值。该图表在展示数据之间的关系比例方面非常出色。饼图和环形图在 Chart.js 中实际上是同一个类，但有一个不同的默认值 - cutoutPercentage。意味着内部的百分比被减少。饼图默认为 0，环形图默认为 50。该图表在Chart核心中注册了两个别名。除了不同的默认值和不同的别名，其他是完全一样的。这里主要讲的是饼图。官方文档：https://www.chartjs.org/docs/l

2021-01-08 10:56:17 2005 1

当java遇上爬虫，我的数据库再也不缺数据了项目详细源代码

前端学习（html+css+jquery.chm）资源参考

ES6常用知识点学习总结

空空如也