〔晴【天】º〕-CSDN博客

原创 select的change方法如何传递多个参数

方法的回调函数只有当前选择的val，如果想再传入自定义参数怎么办？不能够传入自定义的参数，在进行某些操作时，会比较困难，下面是。element-ui中的。

2024-01-30 20:00:00 2932

原创在Vue中使用Echarts

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案等等Highcharts 和 Echarts 就像是 Office 和 WPS 的关系。

2023-11-24 16:00:00 312

原创 JavaScript 运行机制

JS主要用途是与用户互动，以及操作DOM。如果JS是多进程的话，那么它可以同时在某个DOM节点上添加内容，又可以删除这个节点，从而导致浏览器不知该以哪个为准。

2023-11-20 16:00:00 162

原创如何调用本地 json 文件数据

在 public 文件夹下，新建一个存放 json 数据的文件夹 [ testdata ]；在原本需要调用接口的地方，将 url 地址，换为我们需要的 json 文件的地址。使用场景：当无数据接口时，需要调用自己写的 json 文件，请求数据。在新建的文件夹 testdata 下，存放我们的 json 数据；在需要请求数据的地方，正常调用接口，即可。

2023-11-20 10:34:35 464

原创 vue 导入、导出模块的几种方式

CommonJS 模块导出方式：exports、module.exports。ESModel 模块导出方式：export、export default。webpack 支持 ESModel 规范和 CommonJS 规范。CommonJS 模块导入方式：require。ESModel 模块导入方式：import。

2023-10-20 14:35:50 1862

原创 Node介绍(nvm安装和npm常用命令)

本文介绍了Node.js是什么，Node.js 版本管理工具，以及 npm 的常用命令。

2023-10-18 20:00:00 428

原创 el-select如何不显示value，显示value对应的label值

我从后端获取的数据的类型是string类型；但是我自己定义select的value类型是number类型，导致了数据类型不相同，从而不能正常的显示select的label值。el-select在编辑调用的时候一直显示的不是label值，而是本身的value值。尝试了很多种方法，都没有解决。显示不正常，多数是由于得到的数据类型对应不上表单操作的数据类型进行相应转换即可。

2023-06-19 14:31:08 837

原创链判断运算符

运算符，直接在链式调用的时候判断，左侧的对象是否为 null 或 undefined。如果是的，就不再往下运算，而是返回 undefined。盲目的读取会发生错误。当我们的属性在对象的里面很多层，判断的次数就会变多。读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。. 可以简化判断次数。

2023-06-17 22:13:22 490

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。父组件在给子组件传值的时候为什么子组件的生命周期中没有办法直接取到父组件的参数?子组件更新：父beforeUpdate->子beforeUpdate->子updated->父updated。注意：子组件不能修改父组件的值。父组件通过 v-on:(或 @ ),可以接收子组件抛出的值。

2023-06-17 21:50:30 482

原创回流( reflow )与重绘( repaint )

文章目录1、了解浏览器的渲染机制2、回流3、重绘4、避免方法1、了解浏览器的渲染机制（1）浏览器采用流式布局模型。（2）首先浏览器会将 HTML 解析成 DOM，把 CSS 解析成 CSSOM，把 CSSOM 与 DOM 结合产生 render tree。（3）有 render tree 之后，我们知道了节点样式，然后浏览器会计算节点的位置，然后把节点绘制到页面上。2、回流当 render tree 中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流( ref

2021-10-15 10:14:33 226 1

原创 4、Vue 笔记（路由、路由规则中定义参数、路由嵌套、watch 属性、computed 属性）

文章目录路由什么是路由在 vue 中使用 vue-router在路由规则中定义参数方式一（ params 方式传参）方式二（ query 方式传参）使用 `children` 属性实现路由嵌套命名视图实现经典布局`watch` 属性的使用1、监听 `data` 中属性的改变2、监听路由对象的改变`computed` 计算属性的使用`watch`、`computed` 和 `methods` 之间的对比路由什么是路由对于普通的网站，所有的超链接都是 URL 地址，所有的 URL 地址都对应服务器上对应

2021-10-12 21:07:12 698 1

原创 3、Vue 笔记（axios、Vue 动画、Vue 组件、使用 this.$refs 来获取元素和组件、Vue 组件中 data 和 props 的区别）

文章目录axios 的使用1、axios 基本使用2、vue 中的 axiosVue中的动画1、使用过渡类名实现动画2、可修改 v- 前缀3、使用第三方类库实现动画4、使用钩子函数实现小球的半场动画5、列表动画Vue 组件定义 Vue 组件全局组件定义的三种方式第一种方式：第二种方式：第三种方式：私有组件定义组件中展示数据和响应事件组件切换切换方式一（使用flag标识符结合v-if和v-else切换组件）切换方式二（使用component标签的:is属性来切换组件,并添加动画）组件切换时切换动画父组件向子组

2021-10-11 14:54:02 1871 2

原创 2、Vue 笔记（Vue 的生命周期、过滤器、键盘修饰符及其自定义、自定义指令、ES6新特性）

通过Vue.config.keyCodes.名称 = 按键值使用自定义的按键修饰符：js键盘按钮keyCode及示例大全(定义在标签里面的 JS 代码，所有的 Vue 实例都可以使用)使用 Vue.directive()定义全局的指令 v-focus其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面不需要加v-前缀但是：在调用的时候，必须在指令的名称前加上 v-前缀来进行调用参数2：是一个对象，这个对象上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作。

2021-10-10 16:01:59 437 1

原创 1、Vue 笔记（初识 Vue 、Vue 的基本指令、事件修饰符）

文章目录什么是 Vue框架和库的区别MVC 与 MVVM 的图解关系第一个 Vue 程序el 挂载点data 数据Vue 中的 `v-text` 指令Vue 中的 `v-html` 指令Vue 中的 `v-on` 指令Vue 中的 `v-show` 指令Vue 中的 `v-if` 指令Vue 中的 `v-bind` 指令Vue 中的 `v-for` 指令Vue 中的 `v-model` 指令事件修饰符(stop、prevent、capture、self、once)Vue 指令之 `v-for` 和 `key

2021-10-09 20:26:41 654

原创 Python爬虫：英雄联盟英雄皮肤图片

进入英雄联盟官网的英雄链接https://lol.qq.com/data/info-heros.shtml，发现内容并不是储存在静态网页中，通过查看元素，找寻到了接口https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js ，进行以下操作：要求：1、通过连接文章目录一、分析二、实现代码三、实现结果一、分析1、 https://game.gtimg.cn/images/lol/act/img/js/heroList/hero

2021-08-02 12:30:47 397 1

原创 Python爬虫：豆瓣天龙八部短评数据

爬取豆瓣天龙八部的短评数据，网址为https://book.douban.com/subject/1255625/comments/。要求：（1）抓取所有的短评，将评论信息存储至文本文件中；（2）将评论生成词云图片。效果如下：文章目录一、分析二、爬取短评三、词云的制作四、完整代码一、分析1、豆瓣天龙八部的短评网页：https://book.douban.com/subject/1255625/comments/结果为我们需要爬取每一个短评内

2021-07-30 13:06:48 1238 4

原创 Python爬虫：豆瓣电影 TOP 250

要求：爬取豆瓣电影 TOP 250（https://movie.douban.com/top250）的电影信息，如：[‘排名’, ‘电影名称’, ‘电影信息’, ‘评分’, ‘评价人数’, ‘推荐语’]，并把这些信息保存在csv文件中。文章目录一、分析二、爬取一页具体操作三、完整代码一、分析1、爬取的网页为https://movie.douban.com/top2502、具体的页面：3、审查元素（每个电影的所有信息都存放在item中）4、需要提取的信息（都在item下的元素中）：[‘排名’

2021-07-28 15:18:53 1437 1

原创 JavaScript学习笔记（二）两种操作属性的方法，常用的属性

JavaScript中两种操作属性的方法点-.用法：元素.属性方括号->[ ]用法：元素[‘属性’]例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-05-30 21:22:19 210 4

原创 JavaScript函数调用加()和不加()

注意！！！加()表示立即执行！！！不加()一般用在触发某个事件后才执行下面代码调用不加()(发生点击事件后才执行)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu

2021-05-28 12:19:14 446

原创 JavaScript学习笔记（一）JavaScript的几种写法，获取元素的两种方法，JavaScript 变量

JavaScript 使用创建变量var+变量名变量名的规范：变量名称：小写字母大写字母 $ _ 1数字不能放在最前面变量名称尽量避免和函数库有关系prompt() 方法HTML DOM Window 对象定义和用法prompt() 方法用于显示可提示用户进行输入的对话框。语法prompt(text,defaultText)说明如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。在用户点击确定按钮或取消按钮把对话框关闭之前，它

2021-05-28 10:01:35 254 2

原创 CSS学习笔记（二十三）CSS 网格布局

CSS 网格布局模块网格布局CSS 网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。网格元素网格布局由一个父元素以及一个或多个子元素组成。实例<!DOCTYPE html><html><head><style>.grid-container { display: grid; grid-template-columns: auto aut

2021-05-27 10:11:33 255

原创 CSS学习笔记（二十二）弹性布局

CSS FlexboxCSS Flexbox 布局模块在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：块（Block），用于网页中的部分（节）行内（Inline），用于文本表，用于二维表数据定位，用于元素的明确位置弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。Flexbox 元素如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。实例含有三

2021-05-24 21:44:49 274 1

原创 CSS学习笔记（二十一）CSS变量var()

CSS 变量CSS 变量var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。var() 函数的语法var() 函数用于插入 CSS 变量的值。var() 函数的语法如下：var(name, value)注释：变量名称必须以两个破折号（–）开头，且

2021-05-24 14:54:45 4279

原创 CSS学习笔记（二十）CSS object-fit 属性,按钮，分页，多列

CSS object-fit 属性CSS object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。CSS object-fit 属性CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。一个300x300 像素的图片，如果设置成了 200x300 像素，图片就会被压缩。

2021-05-24 12:08:03 482

原创 CSS学习笔记（十九）CSS 工具提示，图像样式

CSS 工具提示基础的工具提示创建一个鼠标移到元素上时显示的工具提示：实例<!DOCTYPE html><html><style>.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;}.tooltip .tooltiptext { visibility: hidden; width: 120px; backgr

2021-05-24 10:14:02 165

原创 CSS学习笔记（十八）CSS 2D 转换，3D 转换，过渡，动画

CSS 2D 转换CSS 2D 转换方法通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()translate() 方法translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：实

2021-05-23 20:52:38 288

原创 CSS学习笔记（十七）CSS 文本效果，Web 字体

CSS Box ShadowCSS box-shadow 属性CSS box-shadow 属性应用阴影于元素。最简单的用法是只指定水平阴影和垂直阴影：为阴影添加颜色：向阴影添加模糊效果：div { box-shadow: 10px 10px 5px grey;}CSS 文本效果CSS 文字溢出CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。可以被裁剪：也可以将其呈现为省略号（…）：代码如下：<!DOCTYPE html>&lt

2021-05-23 16:55:44 203

原创 CSS学习笔记（十六）CSS渐变

如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。如需创建线性渐变，您必须定义至少两个色标。下面的例子展示了从左开始的线性渐变。CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。CSS 渐变还支持透明度，也可用于创建渐变效果。size 参数定义渐变的大小。如需创建径向渐变，您还必须定义至少两个色标。

2021-05-23 16:20:56 205

原创 CSS学习笔记（十五）CSS 圆角，多重背景

CSS 圆角CSS 圆角通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。CSS border-radius 属性定义元素角的半径。提示：您可以使用此属性为元素添加圆角带有指定背景颜色的元素的圆角：带边框元素的圆角：带有背景图像的元素的圆角：提示：border-radius 属性实际上是以下属性的简写属性：border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusbo

2021-05-23 15:47:41 333

原创 CSS学习笔记（十四）CSS 计数器，特异性

CSS 计数器CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。计数器使您可以根据内容在文档中的位置来调整其外观。带计数器的自动编号CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。如需使用 CSS 计数器，我们将使用以下属性：counter-reset - 创建或重置计数器counter-increment - 递增计数器值content - 插入生成的内容counter() 或 counters() 函数

2021-05-23 15:05:54 229

原创 CSS学习笔记（十三）CSS 下拉菜单，属性选择器

CSS 下拉菜单基础的下拉菜单创建当用户将鼠标移到元素上时出现的下拉框。实例<style>.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px

2021-05-23 14:40:20 1057

原创 CSS学习笔记（十二）CSS 水平导航栏

CSS 水平导航栏水平导航栏有两种创建水平导航栏的方法：使用行内或浮动列表项。行内列表项构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline：实例li { display: inline;}例子解释：display: inline; -默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。浮动列表项创建水平导航栏的另一种方法是浮动元素，并为导航链接规定布

2021-05-21 21:28:24 1317

原创 CSS学习笔记（十一）透明悬停效果，CSS 导航栏

透明悬停效果opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：实例img { opacity: 0.5;}img:hover { opacity: 1.0;}例子解释第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。当鼠标指针离开图像时，图像将再次透明。反向悬停效果的例子：实例

2021-05-21 21:07:59 1662

原创 CSS学习笔记（十）CSS 组合器，伪类，伪元素

CSS 组合器CSS 组合器组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。CSS 中有四种不同的组合器：后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)通用兄弟选择器 (~)后代选择器后代选择器匹配属于指定元素后代的所有元素。下面的例子选择 <div> 元素内的所有 <p> 元素：（包含在里面的所有p元素）实例div p { background-color: ye

2021-05-18 12:33:32 194 1

原创 CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐

CSS 布局 - display: inline-blockdisplay: inline-block与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他

2021-05-17 14:01:01 1659

空空如也

空空如也