iFulling的博客

箱型图、箱线图，是一种用作显示一组数据分散情况资料的统计图。数图、主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树和右子树。主题河流，是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。路径图，用于带有起点和终点信息的线数据的绘制，主要用于航线、路线可视化。旭日图，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。直角坐标系上的散点图可以用来展示数据的 x、y 之间的关系。雷达图，主要用于表现多变量的数据，例如属性分析。关系图，用于展现节点与节点之间的关系数据。

原生图形元素自建，支持的图形元素包括 image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group。dataZoomInside，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、滚轮、手指滑动在缩放或漫游坐标系。数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。区域选择组件，可以选择图中一部分数据，从而便于向用户展示被选中数据、或他们的一些统计计算结果。

SVG在前端中的常见应用一、svg标签1. svg2. g二、描边属性三、模糊和阴影效果1. 模糊2. 阴影效果四、线性渐变和径向渐变1. 线性渐变2. 径向渐变五、绘制1. 内置形状元素2. 绘制矩形3. 绘制圆形4. 绘制椭圆5. 绘制线条6. 绘制多边形7. 绘制多线条8. 绘制文本9. 绘制路径

文章目录一、repeat1. 语法2. auto-fill和auto-fit3. 专属尺寸① fr② auto③ max-content④ min-content二、grid1. 设置grid布局2. 设置列宽行高3. 设置间距4. 设置分区5. 设置布局排列顺序6. 设置单元格内容对齐方式7. 设置整个网格对齐方式8. 设置隐式网格大小9. 设置网格位置

文章目录一、canvas元素二、前期准备1. 坐标系2. canvas属性① 获取canvas元素② 把canvas实例化为2D③ 设置路径颜色④ 设置路径宽度⑤ 设置路径末端形状⑥ 设置路径相连时的相连部分形状⑦ 透明度⑦ 虚线三、绘制图行1. 绘制线段2. 绘制三角形① 空心三角形② 实心三角形3. 绘制矩形① 空心矩形② 实心矩形4. 绘制圆和圆弧① 圆② 圆弧③ 半圆③ 圆弧和点连接5. 椭圆6. 贝塞尔曲线① 一次贝塞尔② 二次贝塞尔③

文章目录一、attr二、calc三、cubic-bezire四、conic-gradient五、counter六、hsl七、linear-gradient八、radial-gradient九、max/min十、var

安装 yarn安装 vuepress新建一个 markdown 文件运行：在 中添加一些 scripts运行效果在 markdown 文件中添加运行效果新建文件夹 ，再在文件夹下新建文件 ，在配置文件中添加导航栏Logo。新建文件夹 ，将导航栏Logo复制进去。在配置文件 中添加导航栏链接。运行效果：在 中添加配置项：title、description、head。运行效果：...

Vue 学习笔记13：Vue3其他组合API一、其他 Composition API1. shallowReactive 与 shallowRef2. readonly 与 shallowReadonly3. toRaw 与 markRaw4. customRef5. provide 与 inject6. 响应式数据的判断二、Composition API 的优势三、新的组件1. Fragment2. Teleport3. Suspense四、其他1. 全局 API 的转移2. 其它改变一、其他 Comp

Vue 学习笔记11：Vue3组合API一、创建 Vue3 工程1. 使用 vue-cli 创建2. 使用 vite 创建3. 安装 vue3 插件二、常用 composition API1. setup 函数2. ref 函数3. reactive 函数4. Vue3 的响应式5. reactive 对比 ref6. setup 的两个注意点7. 计算属性与监视（1）computed 函数（2）watch 函数（3）watchEffect 函数一、创建 Vue3 工程1. 使用 vue-cli 创建

Vue 学习笔记11：Echarts-vue项目综合练习一、基础1. 基本使用2. 使用场景二、进阶1. 显示相关2. 动画的使用3. 交互 API一、基础1. 基本使用步骤：引入 echarts.js 文件<script src="echarts.min.js"></script>准备一个呈现图标的盒子<div style="width: 600px;height: 400px;"></div>初始化 echarts 实例对象

Vue 学习笔记09：Vue-router一、路由概念二、基本使用一、路由概念vue-router 是 vue 中的一个插件库，专门用来实现 SPA 应用。对 SPA 应用的理解单页 Web 应用（single page web application，SPA）整个应用只有【一个完整的页面】点击页面中的导航链接不会刷新页面，只会做页面的【局部更新】数据需要通过 ajax 请求获取什么是路由？一个路由就是一组映射关系（key - value）key 为路径，value 可能是

VScode中使用git进行版本控制一、安装与配置二、初始化和提交本地仓库三、提交到远程仓库四、克隆和拉取五、修改后的提交六、免密提交七、其他命令1. 撤销2. Git 分支命令3. 暂时保存更改一、安装与配置安装命令sudo apt-get install git查看版本git --version配置提交人姓名：git config --global user.name 提交人姓名配置提交人邮箱：git config --global user.email 提交人邮

文章目录一、Vuex 是什么二、安装 Vuex一、Vuex 是什么概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信什么时候使用 Vuex：（1）多个组件依赖于同一状态（数据）（2）来自不同组件的行为需要变更同一状态（数据）二、安装 VuexVue2 只能用 Vuex3，Vue3 只能用 Vuex4，默认安装的是最新版，所以安装时要指定版本为 Vuex3

Vue中的Ajax一、配置代理（解决跨域）1. 方法一2. 方法二二、Vue 中的 Ajax 库1. axios2. vue-resource三、slot 插槽一、配置代理（解决跨域）1. 方法一在 vue.config.js 中添加如下配置：devServer: { proxy: 'http://localhost:5000/'}有点配置简单，请求资源时直接发给前端（8080）即可。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。工作方式：若按照上述配置代理，当请求了前

Todo-list 案例一、组件化编码流程二、props 扩展三、webStorage四、自定义事件五、全局事件总线六、消息订阅与发布七、nextTick八、案例代码1. Header2. List3. Item4. Footer5. App.vue6. main.js一、组件化编码流程拆分静态组件：组件要按照功能点拆分，命名不要与 html 元素冲突。实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件再用：（1）一个组件在用：放在组件自身即可。（2）一些组件再用：放在他们共同

Vue 学习笔记06：Vue脚手架一、Vue 脚手架1. 安装2. 替换文件3. 运行报错一、Vue 脚手架1. 安装配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org全局安装 @vue/cli：npm install -g @vue/cli重新打开 cmd，输入 vue 验证安装是否完成。切换到要创建项目的目录，然后使用命令创建项目：vue create xxxx。我在 vue 学习目录下创建，进入当前

Vue 学习笔记05：Vue组件化编程一、模块与组件概念一、模块与组件概念模块理解：向外提供特定功能的 js 程序，一般就是一个 js 文件作用：复用 js，简化 js 的编写，提高 js 运行效率组件理解：用来实现局部（特定）功能效果的代码集合（html、css、js、images…）作用：复用编码，简化项目编码，提高运行效率模块化理解：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用。组件化理解：当应用中的功能都是多组件的方式来编写的

Vue 学习笔记02：Vue 核心 - 3一、收集表单数据二、过滤器一、收集表单数据<input type="text"/> ，v-model 收集的是 value 值，用户输入的也是 value 值。<input type="radio"/> ，v-model 收集的是 value 值，需要给标签配置 value 值。<input type="checkbox"/>：（1）没有配置 input 的 value 属性，那么收集的就是 checked（

Vue 学习笔记02：Vue 核心 - 2一、计算属性与监视1. 计算属性的基本使用2. 计算属性的简写方式4. 天气案例5. 监视属性6. 深度监视7. 监视属性简写8. 计算属性 vs 属性监视二、绑定样式1. class 样式2. style 样式三、条件渲染1. v-if2. v-show3. template四、列表渲染1. 基本列表2. key 的原理3.一、计算属性与监视1. 计算属性的基本使用定义：要用的属性不存在，需要通过已有属性计算得来。原理：底层借助了 Object.defi

Vue 学习笔记02：Vue 核心 - 1一、模板语法1. 插值语法2. 指令语法二、数据绑定三、el 和 data 的两种写法1. el 的两种写法2. data 的两种写法四、MVVM 模型五、数据代理1. Object.defineProperty()2. 何为数据代理3. Vue中的数据代理六、事件处理1. 事件的基本使用2. 事件修饰符3. 键盘事件一、模板语法1. 插值语法功能：解析标签体内容。{{XXX}} 被称为插值语法，当中的 XXX 要写 Js 表达式，且 XXX 可以自动读取

文章目录一、下载 Vue二、上手 Vue1. 下载 Vue-devtools2. 阻止生产提示3. 引入网页 logo一、下载 Vue进入 Vue 官网，点击教程点击安装，会显示两个版本。开发版本用于学习，生产版本用于项目开发。因为是第一次上手，所以使用开发版本。下载好后，和平常一样再文档中引入 Vue.js<script src="./js/vue.js"></script>二、上手 Vue新建一个文档，然后引入 Vue，打开后会有 2 个提示，一个错误。

ES11 新特性一、私有属性二、Promise 扩展三、字符串扩展四、可选链操作符五、动态 import 加载六、BigInt1. 定义大整型2. 大数值运算七、globalthis一、私有属性ES10 在类属性前面加 # 表示私有属性，并且需要提前声明，私有属性只有在内部才能调用。class Person { #age; #weight; constructor(name, age, weight) { this.name = name; th

文章目录一、对象方法扩展二、字符串扩展方法三、数组扩展方法四、Symbol 扩展一、对象方法扩展Object.fromEntries() 方法用来创建对象，但是方法参数接收二维数组或 Map// 传入二维数组const result = Object.fromEntries([ ['brand', 'mi'], ['price', 1999]])console.log(result);// 传入 Mapconst m = new Map();m.set('brand',

HTML 部分HTML 常用的标签HTML 表格标签HTML 列表标签HTML 表单标签CSS 部分CSS 选择器CSS 字体属性JavaScript 部分JavaScript——ES6新特性（1）JavaScript——ES6新特性（2）JavaScript——ES8新特性JavaScript——ES9新特性额外补充VSCode 常用的11个快捷键...

文章目录一、对象展开1. rest 参数2. 扩展运算符二、正则扩展1. 命名捕获分组2. 反向断言3. dotAll 模式一、对象展开1. rest 参数ES6 引入 rest 参数，用于获取函数的实参，用来替代 arguments。ES9 中将 rest 参数引入对象。function connect({ host, port, ...user }) { console.log(host); console.log(port); console.log(user);}

ES8新特性一、async 和 await1. async 函数2. await 表达式3. 实例二、对象方法扩展一、async 和 awaitasync 和 await 两种语法结合可以让异步代码像同步代码一样。1. async 函数async 函数的返回结果是一个 promise 对象；promise 对象的结果由 async 函数执行的返回值决定。async function fn() { // return; // 返回非 promise 对象就是成功 // thr

ES6 新特性（2）十、Symbol 数据类型1. 创建 Symbol2. 不能与其他数据进行运算3. 给对象添加方法4. Symbol 内置值十一、迭代器1. 自定义遍历数据十二、生成器1. 声明和调用方法2. yield十、Symbol 数据类型ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 Javascript 的第七种数据类型，是一种类似于字符串的数据类型。特点：Symbol 的值是唯一的，用来解决命名冲突的问题。Symbol 的值不能与其他数据进行运算。S

ES6 新特性（1）一、let1. let 不能重复声明2. 块级作用域，只能在代码块里有效3. 不存在变量提升4. 不影响作用域链5. let 实践案例二、const1. 必须赋初始值2. 常量值不能修改3. 块级作用域4. 可以对数组和对象的元素修改三、解构赋值1. 数组的解构2. 对象的解构四、模板字符串1. 声明格式2. 内容中可以直接出现换行符3. 拼接字符串五、简化对象写法六、箭头函数1. 声明格式2. this 是静态的3. 不能作为构造函数4. 不能使用 arguments 变量5. 箭头

font-family：字体属性。例如 ‘Microsoft Yahei’font-size：字体大小。单位为 pxfont-weight：字体粗细font-weight 属性值：normal，默认字体，相当于 number 的 400bold，粗体，相当于 700number，数字，不加 px 单位font-weight: normal;font-weight: 400;font-style：字体风格font-style 属性值：normal，默认值italic，斜.

CSS 选择器1. 标签选择器2. 类选择器3. id选择器4. 通配符选择器1. 标签选择器用 HTML 标签名作为选择器语法：标签名 { 属性1: 属性值1; 属性2: 属性值2; ......}2. 类选择器用 class 属性调用 class 类语法：.类名 { 属性1: 属性值1; 属性2: 属性值2; ......}3. id选择器用 id 属性调用 id 选择器语法：#id名 { 属性1: 属性值1; 属性2: 属性值2; ....

表单标签1. 表单域2. 表单控件（表单元素）（1） 输入控件 input（2） label 标签（3）select 下拉列表（4） textarea 文本域一个完整的表单通常由表单域、表单控件（也成为表单元素）和提示信息组成1. 表单域表单域：是一个包含表单元素的区域。<form> 用于定义表单域<form> 会把它范围内的表单元素信息提交给服务器标签结构：<form action="url地址" method="提交方式" name="表单域名称"&g

列表标签1. 无序列表 ul2. 有序列表 ol3. 自定义列表 dl列表标签，分为三大类：无序列表、有序列表、自定义列表清除项目前的小圆点：list-style: none;1. 无序列表 ul无序列表 <ul> </ul>，列表项使用 <li> </li>标签结构：<ul> <li>列表项 1</li> <li>列表项 2</li> ...</u

文章目录1. 简单的表格2. 表头单元格：th 标签3. 表格结构标签4. 合并单元格方式表格标签，用来展示数据<table> 标签定义 HTML 表格。1. 简单的表格tr 元素定义表格行，td 元素定义表格单元。html中表格之间默认有空隙，cellspacing 可以清除空隙示例代码：<!-- cellspacing：html中表格之间默认有空隙，cellspacing可以清除空隙 --> <table cellspacing="0">

HTML 最常用的标签一、HTML 基本结构二、标题：h1 ~ h6 标签三、段落：p 标签四、换行：br 标签五、文本格式化六、盒子标签1. div 标签2. span 标签七、图像：img 标签八、超链接：a 标签九、常用的特殊字符一、HTML 基本结构<html> </html> ：页面中最大的标签，也称根标签<head> </head> ：文档的头部，在 head 标签中必须设置 title (标题)<title> </ti

Visual Studio Code 快捷键Alt + Shift + ↓ 将光标所在行 向下复制一行Alt + ↑ 将光标所在行 向上移动一行Alt + ↓ 将光标所在行 向下移动一行Alt + Shift + 鼠标左键 多行编辑Ctrl + / 注释当前行Alt + Shift + ↓ 向下复制一行Alt + Shift + ↓ 向下复制一行...