有点东西：）-CSDN博客

原创 React基础_7(路由)

render方法的调用并不表示重新渲染整个页面，表示diff算法执行，只更新需要更新的地方。React路由一共需要导入三个组件import {BrowserRouter as Router,Route,Link}from 'react-router-dom'1.使用Router组件来包裹整个应用2.使用Link组件作为路由的入口3.使用Route组件作为路由的出口...

2021-11-09 00:00:57 903

原创 React基础_6(原理.优化)

前言1.React相关原理2.React性能优化正文React相关原理介绍setState方法，这个方法是异步更新数据的，并且多次调用setState方法最后只会重新渲染一次render方法class App extends React.Component{ state={ num:0 } Click=()=>{ this.setState({ num:this.state.num+1 })

2021-11-08 23:57:04 89

原创 React基础_5(组件复用)

前言组件复用正文React组件复用：复用state和操作state的方法复用的两种模式：1.render props模式2.高阶组件render props 给组件传递一个函数，函数的参数为组件的state，返回值为所需要渲染的结构。class App extends React.Component{ render(){ return( <Child mouse={(s)=>{ return (

2021-11-08 23:54:29 137

前言组件的生命周期，以及相关的钩子函数正文组件的生命周期：生命周期是组件从创建到不在运行从页面中卸载掉的整个过程，在整个生命周期中有很多函数会发生运行，这些函数就是钩子函数。只有类组件才会有生命周期。创建时的钩子函数:constructor:渲染完成前执行render：渲染时执行componDidMount：渲染完成后执行以上三个函数顺序执行 class App extends React.Component{ constructor(props){ super(

2021-11-08 23:49:32 215

原创 React基础_3(props.组件间通讯)

前言组件间的通讯，主要内容为props的一些用法正文组件中的通信：使用的是props，通过属性名=值的形式给组件传输数据，在函数组件中使用props使用数据，在类组件中使用this.props使用数据function App(props){ return ( <div> <h2>props是:{props.name}</h2> </div> )}ReactDOM.rende

2021-11-08 23:46:34 88

原创 React基础_2(组件.事件.state.受控非受控)

前言本篇内容主要包含以下内容1.组件的创建2.组件的事件绑定3.state的使用4.受控组件和非受控组件正文React最关键的内容就是组件，组件就是页面中一个个的元素，也可以说是一个个标签，共同组成整个页面.创建一个组件:function Hello(){ return ( <h2>我是一个函数组件</h2>) }ReactDOM.render(<Hello />,document.getElementById('root'))//函数组件的

2021-11-08 23:42:46 219

原创 React基础_1(JSX)

前言JSX的相关基础知识。正文在使用React相关内容之前需要导入相应的包，导入方法如下import React from 'react';import ReactDOM from 'react-dom';创建一个JSX，JSX是JavaScript XML的简写，表示在js代码中写HTML格式的代码。const jsx=( <div> <h2>hello React!!</h2> </div> )//jsx就是一个JSXReact

2021-11-08 23:35:33 349

原创一些Sass

前言Scss时CSS的一些扩展，本篇主要关于介绍变量的创建，一些逻辑结构，以及重用样式;正文创建变量：<style type='text/scss'>$color:red;h1{ background:$color; }</style><h1>我的背景是红的</h1><!--要设置type="text-scss",在变量面前使用$,表示变量;引用时也要加$;嵌套设置：<style type="text-scss"&gt

2021-08-25 14:02:07 56

原创基础jQuery

前言本篇内容主要介绍jQuery选择、移除、克隆和修改页面上的不同元素。正文使用结构：<script> $(document).ready(function() { ... //在这里面写一些操作; });</script>给标签添加类：<script> $(document).ready(function() { $("button").addClass("bounce animated"); //给所有的button标签添加bounce和

2021-08-23 15:04:25 68

原创前端开发库_1

导入Bootstrap库：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

2021-08-21 15:55:34 81

原创 JavaScript基础_7(杂项)

前言正文Object.keys()：let obj={ name:"zhao", like:"java" }console.log(Object.keys(obj));//将对象的属性保存到数组里返回;

2021-08-13 22:32:16 65

原创 JavaScript基础_6(对象)

前言本篇文章是关于对象的一些介绍；正文对象的创建：//构造函数function Bird(name){ this.name=name; }//创建实例const bird =new Bird("niuniu");console.log(bird);instanceof 比较运算符:function Bird(name){ this.name=name; }let bird_1=new Bird("niuniu");let bird_2={name:"huahua"};/

2021-08-06 16:41:16 66

原创 JavaScript基础_5(字符串和数组方法)

前言本文主要介绍一些字符串和数组的操作方法;正文调整大小写的方法：let str="nAmE";console.log(str.toUpperCase());//toUpperCase()将字符串大写console.log(str.toLowerCase());//toLowerCase()将字符串小写console.log(str);//原字符串不变split()方法：let str="I like java";console.log(str.split(" "));//将字符串以

2021-08-04 20:04:26 124

原创 JavaScript_4(对象方法)

前言正文length方法：let arr=[1,2,3,4];console.log(arr.length);//返回数组长度splice()方法：let arr=[1,3,4,4,5,6];console.log(arr.splice(2,2,2,3));//第一个参数表示从第三个开始，第二参数个表示删除从第三个往后的几个，剩下的表示要替换的内容，被删除的内容以数组的形式返回;可以只给前两个参数，表示只删除不添加;console.log(arr);slice()方法：let

2021-08-03 11:19:59 97

原创 JavaScript基础_3(正则表达式)

前言正文正则表达式的test方法：let str="name zhao";let reg=/zhao/;////里面就是正则表达式了;let res=reg.test(str);console.log(res);//在字符串中匹配到zhao返回true;没有则返回false;多种模式匹配：let str_1="name zhao";let str_2="name qian";let reg=/zhao|qian/;//|相当于或let res_1=reg.test(str_1);

2021-07-30 18:22:00 35

原创 JavaScript基础_2(Promise)

前言ES6 中的一个内容 Promise，鉴于内容有点长就另开一篇。正文Promise的构造：const pr = new Promise((resolve, reject) => {});/*Promise 是一个类;它接收一个函数作为参数;而接收的这个函数需要接收两个参数;resolve和reject;同样的这两个参数也都是函数;Promise的三种状态：const pr = new Promise((resolve, reject) => {});console.dir

2021-07-28 23:29:00 330

原创 javaScript基础_2

let 声明变量：'use strict';//严格模式//let_1let test="test1";let test="test2";//会报错，let声明的变量不可修改值。//let_2function test(){ let a=1; if(a>0){ let b=2; } console.log(b);}test();//会报错，b的值未定义，b的作用范围仅在if后面的大括号内;const 声名只读变量：const a="no chan..

2021-07-27 23:34:17 90

原创 javaScript基础_1

前言正文注释：//注释格式一/* 注释格式二*/创建变量：var i;变量用法和其他编程语言一样。四则运算；自加自减；求余；复合运算：var i=0;i=i+1;i=i-1;i=i*1;i=i/1;i++;i--;i%1;i+=1;i-=1;i*=1;i/=1;转义字符：\' //单引号\" //双引号\\ //反斜杠\n //换行符\r //回车符\t //制表符\b //退格\f //换页符字符串连接：var a="Hello";

2021-07-25 21:15:35 124 1

原创 HTML小白入门基础_9

写在前面本篇内容正是第一大部分最后的内容，关于网格的一些学习总结。内容第一个是将标签设置成为网格，将它的 display 属性设置为 grid 即可。<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .conta

2021-07-13 22:35:49 104

原创 HTML小白入门基础_8

前面内容第一个是关于CSS部分的内容，用来设置当浏览器页面宽度小于一个数值是用什么用的样式或者页面宽度大于一个数值用什么样的样式。<style> @media (max-width: 100px){ p{ font-size:100px; } }</style><p>看看我的不同变化当最大宽度超过1000px时显示下面的效果，小于1000px时显示上面的效果。下一实现的让一张图片最页面大小变化而变化。设置图片最大宽度为100%且高度

2021-07-12 20:34:08 81

原创 HTML小白入门基础_7

写在前面正文第一个是给图片做一个注释，当图片无法显示之后，注释就显得尤为重要。给 img 标签添加一个 alt 属性就能够给图片添加注释。<img src="samuraiSwords.jpeg" alt="我也不知道是啥">alt 属性是必要出现的，如果你不想让注释出现，就赋给它一个空值即可。在HTML5中添加了很多的新标签，main 标签就是其中之一，他里面的内容是 body 里面的一个主题，且只能存在一个，关于他的包含关系，它不能够被以下几个标签包含 header foot

2021-07-08 22:27:25 45

原创 HTML小白入门基础_6

写在前面正文第一个是实现这样一种效果，将一个标签放在左边，将另一个标签放在上一个标签的剩余部分，比如实现下面这种效果。<style> .left{ background-color:red; width:40%; float:left; } .right{ background-color:blue; width:50%; float:right; }</style><h2 class="left">我左边有空</h2><

2021-05-11 23:44:55 530

原创 HTML小白入门基础_5

写在前面正文第一个内容是实现文本的对齐，我们用到的属性是 text-align，它的属性值有left center right，默认是左对齐。<style> .zhong{ text-align:center; } .moren{ text-align; }</style><h2 class="zhong">标题</h2><h1 class="moren">blblblblbl</h1>在文本中，可以通过加

2021-05-07 23:32:16 71

原创 HTML小白入门基础_4

写在前面正文上一篇设置边距的内容还有一个剩余没有提到，就是应用属性选择器来进行设计。属性选择器的应用格式如下[属性名=‘属性’]{}<style> [type='radio']{ margin:20px 10px 10px 20px; } .yellow-box{ background-color:yellow; padding:20px; }</style><div class="yellow-box"> <input type="r

2021-04-26 00:15:33 99

原创 HTML小白入门基础_3

写在前面正文下面就开始第二个部分，基础css的总结内容，下面让我们开始吧。第一个内容是如何改变字体的颜色，这暂时还没有涉及到css的内容，我将它称为前朝（HTML）余孽，改变的方法就是给标签添加一个 color 属性，给他赋值啥颜色就是啥颜色。<h2 style="color: blue;">蓝色字体</h2>如果有很多这样的 h2 标签那一个个设置就很麻烦，这时候可以使用css选择器进行批量的设置。<style> h2{ color:bule; }

2021-04-15 23:24:45 148

原创 HTML小白入门基础_2

写在前面正文开始这一期放在最前面的是创建一个前面带点的列表，就是下面的这种<ul> <li>这是第一个内容 <li>这是第二个内容</ul>

2021-04-07 23:15:40 100

原创 HTML小白入门基础_1

写在前面以下的内容都是笔者在freecodecamp上跟随课程学习的总结，内容属于个人总结，如果出现了什么错误还请在评论帮忙指正。在这里还是要说一下，freecodecamp对于没有前端基础的人来说，学习起来也是相当不错的，通过一个个的小挑战，给定内容，目标，以及完成步骤，学起来还是很不错的。强烈建议想学前端的伙计去呢个社区看看，它应该可以满足你所想要的。什么是HTMLHTML全称成为超文本标记语言，是一种标记语言。一般一个HTML文件都是由一个个的标签，标签中间嵌套着内容，对标签属性进行修改可以使

2021-03-13 00:35:36 217 2

weixin_52612800的博客