自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(19)
  • 收藏
  • 关注

原创 vue怎么引入全局方法(前端小白必看!)

mixin是什么?怎么用?前端新手上车

2022-11-21 16:44:41 4744 1

转载 VUE调用方法 加不加括号 有什么区别

@click=“fun” 不带括号、不写实参的fun默认传event (事件对象)@click=“fun(value)” 只要加括号,无论是否传值,都属于传实参给函数,event (事件对象)就接收不到。如果需要实参、又需要event (事件对象),就需要手动传入 event (事件对象),如下: @click=“fun($event, value)”注: Vue中的@click和React中的onClick实现原理是不一样的,React onClick必须接收一个函数体,如果加括号绑定,就会将.

2022-05-09 14:59:52 851

原创 js 中的new到底干了啥

JS new的时候发生了什么(1) 创建一个新对象;(2) 将构造函数的作用域赋值给新对象( this 指向这个新对象);(3) 执行构造函数中的代码(为这个新对象添加属性) ;(4) 返回新对象。一个普通的构造函数function Person(name){ this.name = name}var p = new Person("小明");console.log(p.name) // 小明console.log(p instanceof Person) // true用JS

2022-01-13 17:43:11 505

原创 文本溢出换行操作word-break、white-space、overflow-wrap

tag{ width: 200px;//给个宽度 word-break: break-word;//设置断点换行 white-space: pre-wrap;//处理元素中的空白 }

2022-01-07 19:21:55 2005

原创 ai-5: 实现通知消息功能 未处理消息-图标出现红点提示,已处理消息-调接口自动删除,定时器刷新数据

尽可能减少变量数-变量名规范命名不传递不必要的参数减少函数量和代码行数//通过 getSeeData 方法的参数(isReset) 决定是否执行setEndCount const getSeeData = (isReset) => { isReset && setEndCount(COUNT) if (tabKey === '1') { setSeeData(notifyData.slice(0, isReset ? COUNT : endCount

2021-12-27 10:09:27 317

原创 react 类组件写法

子组件写法import React, { Component } from 'react'export default class NotifyInfo extends Component { constructor(props) { super(props) this.state = {//创建变量并初始化 seeData: [], } } //使用箭头函数可绑定this指向,就可以不用bind clearSeeData = () => {

2021-12-22 17:29:20 296

原创 CSS-伪类和伪元素

伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。伪元素 是一个附加至选择器末的关键词,对被选择元素的特定部分修改样式。伪类就是一个选择处于特定状态的元素的选择器,比如某一个 clsss 的第一个元素,某个被 hover 的元素等等,我们可以理解成一个特定的CSS 类,但与普通的类不一样,它只有处于 DOM树无法描述的状态下才能为元素添加样式,所以将其称为伪类。伪元素和伪类很像,但是伪元素类似于增添一个新的 DOM 节点到 DOM树中,而不是改变元素的状态。注意了,这里是类似,而不是真的

2021-12-14 10:34:35 198

原创 HTML基础知识点

html5新增内容1. 语义化标签nav、header、footer、article、section…2. 媒体标签audio、video、source3. 表单表单类型:<input type="tel"> number、date、time、month、week…表单属性:表单事件:4. 进度条、度量器5. DOM查询操作6. Web存储行内元素和块级元素块级元素:三大列表和表格,六大标题和表单,段落地址要分行> 行内元素有:a b

2021-12-13 13:55:05 76

转载 浏览器是如何渲染页面的?

浏览器从HTTP服务器获取html文档,到呈现页面给用户,经过以下步骤1、解析文档构建dom树HTML/XHTML/SVG:解析这三种文件后,会生成DOM树(DOM Tree)CSS:解析样式表,生成CSS规则树(CSS Rule Tree)JavaScript:解析脚本,通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree,与用户进行交互2、构建渲染树解析文档完成后,浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上,并根据DOM

2021-12-12 13:55:52 624

原创 JQuery、React区别

JQuery、React区别:1、本质上,React是一个UI库,而JQuery是一个工具库或者说是插件库。2、对Dom操作的不同,React提供了一整套的虚拟Dom,所有的操作都在虚拟的Dom上而并非真实的Dom;而Jquery操作的是真实Dom。jQuery 优点:直观易懂,缺点:对于庞大的项目,代码量大、结构复杂、难以维护 React优点:利用函数式编程的思维来解决用户用户界面渲染的问题(改变数据渲染页面),开发效率高React 的理念 ,归结为一个公式: UI=render(dat

2021-12-10 17:29:33 2911

原创 JavaScript sort 方法 默认排序顺序为按字母升序-数组常用方法

默认排序顺序为按字母升序。注意:当数字是按字母顺序排列时"40"将排在"5"前面。使用数字排序,你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。这些说起来可能很难理解,你可以通过本页底部实例进一步了解它。注意: 这种方法会改变原始数组!。var points = [40,100,1,5,25,10];points.sort() //[1,10,100,25,40,5]function compare(a, b) { return a - b;}point

2021-12-10 16:11:47 912

原创 Antd-table组件+Select组件+Form组件 小知识

table组件-columns常用属性dataIndex – 列数据在数据项中对应的路径,支持通过数组查询嵌套路径key --React 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性ellipsis --超过宽度将自动省略,暂不支持和排序筛选一起使用。render --生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,//return 里面可以设置表格行/列合并 function(text, record, index) {} render

2021-12-10 15:29:45 2151

原创 ai-4:页面展示接口数据,隐藏弹框,并具有增删改查功能(react)

开发中遇到的问题与解决方法:异步解法1:useEffect监听变量,触发相应操作解法2:Promise对象管理异步任务一个 Promise 对象代表一个在这个 promise被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise,以便在未来某个时候把值交给使用者。一个 Promise 必然处于以下几种状态之一:待定(pending): 初

2021-12-10 14:21:05 647

原创 git从主分支上拉取新分支以及提交代码、合并到主分支

从master上拉取一个新分支: - git branch 查看当前分支,显示为master就行了 - git checkout -b xxx 根据master分支切一个xxx分支出来 - git branch 查看当前分支,显示为xxx分支就可以 - git push -u origin xxx 将xxx分支推到远程上,因为远程上没有这个新的xxx分支,所以要加-u。第一次将新分支提交到远程上时需要加-u提交到当前开发分支: - git branch 查看当前分支

2021-11-29 15:41:48 813

原创 src与href的区别

src和href都是用来引用外部的资源,区别如下:src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内,如请求js脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执⾏完毕,所以⼀般js脚本会放在页面底部。href: 表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时,就会并⾏下载资源,不会停⽌对当前⽂档的处理。 常用在a、link等标签上。...

2021-11-26 16:08:23 387

原创 CSS样式优先级

!important使属性值有最高优先级(一般不建议使用)使用方法:选择器 {样式:值 !important}注意:!inportant 写在值的后面,分号前面p{ color: grey !important;}

2021-11-26 15:47:24 130

原创 ai1:react实现todoList

效果如下:添加按钮-弹出添加任务清除按钮-清除所有的已完成和未完成事项删除按钮-删除选中事项完成按钮-把选中事项变成完成状态所有的按钮都做了选中校验接下来上代码import React, { useState } from 'react';import { Checkbox, Button, Input, Space, message, Card, Divider } from 'antd';const { TextArea } = Input;export default fu

2021-11-23 11:03:03 650

原创 ai-2:react+antd使用心得

1.对折线图的数据做平滑处理等可以对<Line/>组件里的数据修改配置,比如<Line {...getChartsConfig(传入参数)} />export const getChartsConfig = (data, xField, yField, seriesField): LineConfig => { return { data, xField, yField, seriesField, legend: { posi

2021-11-23 10:22:44 560

原创 ai-3:原生js实现时光轴,jquery-ajax调接口(本地文件用open with live server)

html文件<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="./test.css" /> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2021-11-23 09:52:32 578

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除