![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
大前端
文章平均质量分 62
前端实战应用记录
你好昵称已存在
这个人很帅,所以什么都没有写
展开
-
记录一个vue实战中的小技巧
下面记录一个最近遇到的一个性能优化的问题,就是我们在写页面渲染的时候,能不用reverse()就不用这个方法,尤其是在Ref双向响应的变量上,不然当我们写在template标签里面的时候,页面会变得很卡。而且控制台还有报错。咳,咳咳,首先呢今天是1024。不知不觉中已经过了一年了。从原来的React技术栈,现在也开始写vue3。不要问我是怎么知道的,可被坑了一次。原创 2023-10-24 20:28:42 · 87 阅读 · 0 评论 -
又是一年1024,记录一个前端解决跨域的问题~
9种前端跨域解决方案详解第一种使用jsonp简单粗暴,直接dataType: ‘jsonp’,这里多了个属性就行,唯一缺点是,只能用于get请求,看看是否能够满足你的需求而用之。await $.ajax({ url: '' // 请求的地址 method: 'get', dataType: 'jsonp', success: (res: any) => { data = res?.result; }, error: (res:原创 2021-10-24 23:36:54 · 1901 阅读 · 0 评论 -
一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放概念题
写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:https://zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!本章你将能学到:结合css、div布局对屏幕尺寸、分辨率、缩放有更深一层的理解。这几个小知识点,也许我们在日常中,经常有所耳闻,但是具体什么意思呢,总是容易混淆,经过我多次亲身经历开发,特地总结如下(不要小瞧这几个概念哦,这可跟我们css布局开发息息相关):屏幕尺寸原创 2021-08-06 16:44:26 · 685 阅读 · 0 评论 -
react子父组件互相通信传值
react子父组件互相通信传值写在前面:本文作为本人学习总结之用,同时分享给大家~个人前端博客网站:https://zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步!子父组件传值源码地址:JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子; (github.com)本系列你将能学到:父组件传值与函数给子组件,在子组件可使用父组件的值与函数;原创 2021-08-06 16:33:33 · 233 阅读 · 0 评论 -
回炉重造,css常规布局系统整理——实战开发后复盘小结
回炉重造,css常规布局系统整理——实战开发后复盘小结写在前面: 在了解css布局之前,我们先了解两个小概念,我认为这将对你有所帮助! 块级元素:display:bloak;占据一行,下一个元素自动换行,如div等; 行内元素:display:inline;元素没有高宽,根据元素内的内容改变大小,如span、a标签等; 行内块:display:inline-bloak;使行内元素具有块级元素特性、使块级元素具有行内元素特性;1 基础css布局1.1 position定位 pos原创 2021-07-19 09:30:47 · 351 阅读 · 1 评论 -
前端开发之mock.js使用——前后端分离,生成随机数据
文章目录前言一、Mock.js是什么?二、如何使用Mock.js1.引入库2.写数据3.发送请求总结前言本篇目标在于先简单了解mock.js,然后可以简单使用,运行出第一个Mock.js的“HelloWorld”。一、Mock.js是什么?官网: http://mockjs.com/官方简介:Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:根据数据模板生成模拟数据模拟 Ajax 请求,生成并返回模拟数据基于 HTM原创 2021-02-19 11:41:16 · 392 阅读 · 0 评论 -
浅谈vscode+react环境部署,运行第一个react框架
文章目录前言一、安装vscode二、安装node、npm、yarn(采用淘宝镜像)1.安装node2.安装yarn三、拉取React脚手架,运行第一个项目总结前言先上图一、安装vscode见链接:https://www.cnblogs.com/csji/p/13558221.html。二、安装node、npm、yarn(采用淘宝镜像)1.安装node见链接:https://blog.csdn.net/bbj12345678/article/details/106741758检测是.原创 2021-02-18 15:37:29 · 2267 阅读 · 1 评论 -
js随机生成一个[min,max]范围的整数,举一反三
</head><body><h2>JavaScript Math.random()</h2><p>点击按钮, getRndInteger(min, max) 会返回 0(包含)到 3(包含)到数字:</p><button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,3)">点我</button><原创 2021-01-14 11:18:12 · 346 阅读 · 2 评论 -
CSS学习总结
前言记录css学习内容,查漏补缺。文章目录前言一、CSS是什么?1.1 CSS的"hello world"二、CSS选择器及几种引用方式2.1 id选择器2.2 class选择器2.3 几种引用方式2.3.1 外部引用2.3.2 内部引用2.3.3 内联引用2.3.4 优先级三、CSS position定位3.1 示例图3.2 代码四、CSS float浮动4.1 示例图4.2 代码总结一、CSS是什么? 简而言之,就是样式、布局,使html的框架更好看,把html元素定位在自己想要放的位置。1原创 2021-01-06 13:52:08 · 128 阅读 · 0 评论 -
HTML学习总结
HTML学习总结前言一、HTML简介二、语句用法1."Hello Word"2.块级元素与内联元素3.float布局总结前言 为了达到温故而知新的效果,在此记录一些看完之后总结的HTML语句。一、HTML简介超文本标记语言,用写网页的,骨架。二、语句用法1.“Hello Word”代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello Wor原创 2020-12-19 20:59:45 · 113 阅读 · 1 评论 -
Ant Design4.x rule验证规则的两种写法(函数与正则表达式)
1 函数验证 //函数 const checkPrice = (rule, value) => { if (value.number > 0) { return Promise.resolve(); } return Promise.reject('Price must be greater than zero!'); };//表单 <Form.Item name="price" label="Price"原创 2020-09-06 17:40:54 · 2204 阅读 · 0 评论 -
react+antd Tree树控件(Demo可以直接运行)实现(递归生成数据)同时支持左边图标自定义也可以加自己的Logo
1 先上完成效果图2 上代码(粘贴复制可以直接运行)import React, { useState } from 'react'import { Tree } from 'antd';import { SmileOutlined, WalletOutlined, TabletOutlined} from '@ant-design/icons';function IsTree(props) { //这是我从数据库得到的树的json数据 let d =原创 2020-09-06 01:06:59 · 2452 阅读 · 0 评论 -
react调用antd4.X自定义图标 icon(深入,解决阿里巴巴矢量图标自定义更改后无法引用问题)
1 先贴图2 看官网代码https://ant.design/components/icon-cn/#components-icon-demo-custom使用 iconfont.cn,使用多个和单个是异曲同工之处。那里的scriptUrl是生成的一个远程链接,我们在react里面调用它即可。3 看这篇博客https://blog.csdn.net/weixin_44021270/article/details/1073776584 解决阿里巴巴矢量图标自定义更改后无法引用问题当我原创 2020-09-02 00:07:45 · 1845 阅读 · 0 评论 -
react+antd组件 modal里面包裹使用form表单并获取提交事件
1 先上图我这里是点击“修改密码”那个按钮,然后跳到了modal框。(大家这里可以随便写一个按钮,然后给他一个点击事件让他可以显示modal框就好了,我这里着重讲解标题的内容)2 贴代码const [visible, setVisible] = useState(false);//antd 控制modal是否显示const showMoal=()=>{ // console.log("showMoal") setVisible(true);}const handle原创 2020-08-31 23:36:16 · 5443 阅读 · 1 评论 -
js对象动态赋值---融会贯通
let obj={}; let x='a'; let y='b'; obj[`${x}`]='aaaa'; obj[`${y}`]='bbbb'; console.log("obj:",obj) let config_2=`{"site":{"logo": "${x}","title": "${y}","floor": "${obj[x]"}}`; console.log("config_2:",config_2);输出如下所示:动态赋值主要是通过ES6的模.原创 2020-08-11 23:58:26 · 614 阅读 · 0 评论 -
react使用antd中Form内联组件与Form表单默认赋值
先写思路:这里假设我写了两个Input组件,他们是一组,都在Form表单里面。然后我在通过initialValues给他们赋初始值。一组Input组件的解决方案:一组Input组件,这里直接转到官网教程:https://ant.design/components/form-cn/#header看官网的代码直接套用即可给一组Input组件赋初始值解决方案:我这里使用了官网此处的方法赋值完后,发现表单验证是无法通过了,就过一夜的苦寻答案后,解决如下(在initialValues里.原创 2020-08-11 23:44:58 · 3205 阅读 · 0 评论 -
ES6语法模板字符串一看就会的超简单使用
let x='q'; let y=`x${x}`;//模板字符串 console.log("y:",y); /* 解释:``这个符号就是模板字符串特有的,可以把他看做就是字符串的双引号“”, 此刻他就是一个字符串,唯一不同的是,我们可以在里面加入变量,${x}这 样,里面x可以是我们任意的变量,数组的某个值、对象的某个值,都可以。而 只要不是用${}包裹的都是普通的字符,比如那个外面的那个x。 */输出结果:...原创 2020-08-11 23:27:37 · 300 阅读 · 0 评论 -
JSON.parse()函数与JSON.stringify()函数一看就会的简单使用教程
JSON.parse 函数将 JavaScript 对象表示法 (JSON) 字符串转换为对象 let strJson= '{"name":"唐三","age":18,"University":"史莱克学院"}' //字符串 console.log("strJson:",strJson); console.log("JSON.parse(strJson):",JSON.parse(strJson));//json字符串转对象输出结果:JSON.stringify()函数将 Ja.原创 2020-08-11 23:13:23 · 133 阅读 · 0 评论 -
js map数组遍历方法的使用
map()方法只能应用于数组遍历。如果想要遍历对象,可将对象转化为数组对象再其进行遍历。var arr = [1,2,3,4]; //item,index,arr 分别为:当前元素的值(必填),当前元素的索引值,当前元素属于的数组对象 //最终在不改变原有数组值的情况下将原来数组循环一遍,处理好数据,返回一个新数组。 var arr1 = arr.map((item,index,arr) => { console.log(".原创 2020-08-09 23:33:20 · 1436 阅读 · 0 评论 -
001ES6语法---箭头函数(由浅入深)
在看箭头函数之前,让我们来回顾一下一般的函数是咋样的: function dealInput (event) { //console.log(event) // 只有通过 event 才能获得输入框输入的值 setUrl(event); } <input onChange={dealInput}></input> ...原创 2020-08-03 00:09:58 · 171 阅读 · 0 评论