- 博客(34)
- 收藏
- 关注
RSS订阅原创 用react实现tab切换
在react中我们应该如何去实现tab切换？首先我们应该知道tab切换的思路是什么思路：HTML+CSStab切换1、简单来实现基础结构2、可以通过修改HTML对应class名来实现任意改变(手动实现tab切换)js1、简单把对应手动改成js默认修改this.statecurrent2、直接方法提炼(传参)我们的代码如下：import React, { Component } from 'react'class View extends Component...
2021-09-16 09:39:32
3259
原创 react生命周期
挂载constructor1、初始化state2、绑定实例render渲染数据初始化的渲染，执行一次componentDidMount挂载完成ajax、定时器方法初始化更新render只要props和state改变，就会执行componentDidUpdate只要props和state改变，就会执行卸载componentWillUnmount...
2021-09-14 10:35:54
130
原创 props使用场景
props组件1、App.js2、mkdirviews/Props3.visrc/views/Props/index.jsx//基础数据类型4.visrc/views/Props/child.jsx//thsi.props.children5.visrc/views/Props/child1.jsx//组件、复合数据类型6.visrc/views/Props/child2.jsx7.visrc/views/Props/left.jsxprops...
2021-09-12 20:36:02
205
原创 两列布局，三列布局，垂直水平居中
两列布局：左侧200px右侧自适应三种方法：1.flex2.浮动：左侧浮动，右侧：margin-left:左侧宽度3.定位左侧定位，右侧：margin-left:左侧宽度三列布局左右侧200px,中间自适应1.flex2.浮动左侧：float:left右侧：float:right中间：margin值3.定位左侧：定位left右侧：定位right中间：margin值垂直水平居中：...
2021-09-12 20:35:00
126
原创 类组件和函数组件
exportdefault导出的方法export和exportdefault区别和形式?1.export与exportdefault均可用于导出常量、函数、文件、模块等2.在一个文件或模块中，export、import可以有多个，exportdefault仅有一个3.通过export方式导出，在导入时要加{}，exportdefault则不需要4.(1)输出单个值，使用exportdefault(2)输出多个值，使用export(3)exportd...
2021-09-12 20:33:35
93
原创 ps常规操作
PS操作：编辑——首选项——单位和标尺——单位改为像素切图方法：1.直接切m选中某个区域ctrl+shift+c复制ctrl+n新建ctrl+v粘贴ctrl+shift+alt+s保存在互联网中，图片后缀.gif已经放弃png-8一般情况下用png-24半透明用jpg大于100K时,如banner图https://tinypng.com/压缩大图片时再次压缩，进行简单的优化2.合并后切3....
2021-09-08 15:07:35
110
原创 cmd和vim语法
##cdm语法###cdcd..返回上一级cd文件夹进入指定文件夹###mkdirmkdir文件夹创建一级文件夹mkdir-ppro3/pro4创建多级文件夹###pwdpwd查看当前文件所在路径###lsls查看当前文件夹下包含哪些文件ls-a当前文件夹下包含隐藏文件###rm-rf-p文件夹删除文件夹##vim语法vi文件名创建一个文件进入编辑内容vi如果没有就创建...
2021-09-07 20:29:42
593
原创 mobx和redux的创建项目流程
无论是创建mobx项目，还是redux项目，都是有流程的！！！在创建mobx项目时，我们应该做如下操作：我们应该结合react的state和setstate1.定义一个observable相当于我们的state2.想要更改observable需要使用action相当于setState3.在视图中通过@observable来响应数据变化最后再是有关安装和页面结构详情见：mobx安装及简单使用同理：在创建redux项目时，我们应该做如下操作：我们应该结合react的S
2021-09-02 16:29:50
106
原创 css实现弹窗效果
用css实现弹窗效果有三种情况：情况一（代码如下）：<div className="alert_box"> <div className="alert_bg"></div> <div className="alert_con"> 情况一 </div><div>.alert_box{ position:fixed; left:0; top:0; z-index:900; width:100%; heig
2021-09-02 16:21:34
4627
原创 redux项目创建流程（二）
1.安装：yarn add reduxyarn add react-redux2.修改Router.jsrouter store注入引入store文件，react-reduximport {Provider} from 'react-redux'import Store from './store/store.js'将store注入路由页面(即将App进行包裹)<Provider store={Store}> <App/>&l...
2021-09-01 15:00:29
79
原创 redux项目创建流程
1.创建一个redux的项目2.某个页面中需要使用redux3.App.js 导入包 自定义url 引入包4.mkdir-pviews/AjaxPageviindex.jsx5.vistore/store.js 导入所需页面的renducer 并且使用它6.cdviews/AjaxPage7.cpviews/AjaxPage/_index.jscp_index.js...
2021-08-26 11:27:51
234
原创 redux安装及其简单使用
#redux!!!注意：一个项目中，redux和mobx只能存在一个##三大原则单一数据源state是只读的使用纯函数来修改执行###安装yarnaddreduxyarnaddreact-redux###引入在Router.js中引入import{Provider}from'react-redux'importStorefrom'./store/store.js'将App进行包裹<BrowserRouter>...
2021-08-25 08:50:40
1110
原创 mobx对修饰器的实验支持功能在将来的版本中可能修改
我们在使用mobx练习时刚开始会出现一个这样的问题：那么我们应该如何去解决呢？首先我们在 VS Code里面找到设置，如图所示：然后，打开设置。搜索experimentalDecorators，见图最后，进行勾选这样问题就可以解决了！！！！！步骤是：VS Code ——>齿轮——>设置——>搜索experimentalDecorators——>勾选——>完成...
2021-08-18 11:15:34
85
原创 mobx安装及其简单使用
mobx解决的问题：(redux)任意组件间的数据通信mobx的安装：yarn add mobx(单独的js文件)yarn add mobx-react(将react和mobx进行绑定)父组件 数据注入纸组件 获取(任意组件)新建store/store.js其中里面的内容是：import {observable, computed, action, autorun,runInAction} from 'mobx';// import {observable, comp
2021-08-17 10:48:06
874
原创 Mobx出现的问题及其解决方案
由于浏览器不支持@，所以在下载完mobx完成配置后启动项目是会有报错！！！！！报错：而我们要解决这个问题需要两步：第一步：我们需要安装两个插件yarnadd@babel/plugin-proposal-decoratorsyarnadd@babel/plugin-proposal-class-properties第二步：修改package.json文件将以下代码"presets": [ "react-app" ]修改成："...
2021-08-17 09:50:57
895
原创 react知识点总结(加强版)
1.创建项目create、git、eject、scss(script)scss、env(打包)、本地开发联调(axios)、路由、代码分割项目真正的创建完成流程：1.npxcreate-react-app'文件名'2.提交git仓库命令:gitadd--allgitcommit-m''gitpush3.yarneject4.安装scss语法5.src同源目...
2021-08-16 10:54:29
123
原创 界面切换的实现方法
界面切换其实非常简单！！首先我们需要了解到界面切换的思路才可以实现界面自动切换的效果。思路：1）用html+css来搭建所需的页面2）用css进行样式的完善，并实现改变具体显示状态3）通过修改或增加对应的className来实现手动的页面切换4）将对应的classname通过state单独提出来5）通过修改state默认值进行理想版块的显示隐藏6）增加setState方法，用该方法设置classname，来改变布局7）通过点击事件来切换对应的classname思路理清了，
2021-08-03 11:58:14
966
原创 react知识点总结
1.创建react项目1）打开git bush2）查找文件夹，用cd（即：cd '文件夹名'）3）输入npx creact-react-app '文件名'4）提交到gitee仓库 命令是：git add --all git commit -m '' git push5）查找创建的react项目的文件夹(即：cd '文件名')6）输入yarn eject或npm run...
2021-08-03 11:10:46
231
原创 数组，对象的合并方法
数组合并方法：concat()对象合并方法：Object.assign()相对于数组和对象来说ES6中的展开运算符(...)也是可以进行对象合并的。所以，展开运算符(...)既可以合并数组，也可以合并对象。
2021-08-03 09:27:40
230
原创 sass教程
sass定义：Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。sass特色功能：完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等.
2021-08-02 16:27:51
110
原创 react路由安装及其使用
1.安装包yarn add react-router-dom2.新增router.js文件(src下，与App.js同级)Router.jsimport React from 'react';import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';import App from './App.js';const Router = () => ( <Bro...
2021-08-02 16:16:50
78
原创 css面试题(附答案)
1.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同的？答：标准盒子模型：宽度=内容宽度（content）+border+padding+margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin2.box-sizing属性？答：用来控制元素的盒子模型的解析模式，默认为content-box content-box:W3C的标准盒子模型，设置元素的height/width属性指的是conten...
2021-07-15 20:49:49
174
原创 课堂总结（2021-07-12）
强化map的使用：1.map参数有哪些？分别是什么？map有三个参数值。分别是item（当前元素的值）、index（索引值）、arr（原数组）2.数组forEach和map的区别？1）map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。且不会对空数组进行遍历，同时不会改变原始数组。2）forEach方法用于调用数组的每一个元素，将元素传给回调函数，且对于空数组来说不会调用回调函数的。3.map/forEsangecanshuach等迭代方法的第一个参数是回调函数
2021-07-12 20:19:55
68
原创 react项目创建步骤（补充）
先打开gitbush然后cd进入文件夹之后输入npxcreate-react-app‘文件名’之后gitadd.gitcommit-m'three'之后cd'文件名'之后用的是yarn就输入yarneject用的是npm就输入npmruneject会出现config和script两个文件夹安装scssyarnaddnode-sass-chokidaryarnaddnpm-run-all这个分两次输入在package.jso...
2021-07-12 11:09:01
112
原创 props使用场景
react/first-react/src/App.jsimport Home from './views/home';import Test from './views/Test';import Props from './views/Props';function App() { return ( <div> <h3>这是第一个app</h3> {/* <Home/> .
2021-07-11 20:51:36
141
原创 面试题（补充）
1.垂直水平居中，实现方法有哪些？答：方法一：使用position定位<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>实现垂直水平居中方法1</title> </head> <style> html,body,div{ margin:0; padding:0; } body{ hei
2021-07-11 20:32:44
36
原创 两列布局，三列布局如何自适应？
两栏布局：左侧定宽，右侧自适应方法一：利用绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .
2021-07-11 20:05:26
1821
原创 ES6 知识点总结
1.变量：var、let、constvar : 变量提升、重复声明、window属性 、全局作用域和函数作用域let : 无变量提升、无重复声明、无window属性、全局作用域和块级作用域{()}、暂时性死区(TDZ，同作用域下先声明，再应用)const : 设置常量、声明时必须赋值、不可重复声明、不可更改、不能删除、不能重新赋值、块级作用域、没有变量提升 如果是引用类型，设置的指向Object.freeze（常量）2.箭头函数如果只有一个参数，圆括号“()”可以省略...
2021-07-11 19:46:24
146
原创 清除浮动方式
清除浮动的方式：1.父级div定义伪类：after/*css样式*/<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200
2021-07-09 11:07:29
44
原创 C语言 转义字符
转义字符定义：转义字符是很多程序语言、数据格式和通信协议的形式文法的一部分。对于一个给定的字母表，一个转义字符的目的是开始一个字符序列，使得转义字符开头的该字符序列具有不同于该字符序列单独出现时的语义。因此转义字符开头的字符序列被叫做转义序列。字符表： 转义字符 意义 ASCII码值（十进制） \a 响铃(BEL) 007 \b 退格(BS)
2021-07-08 16:04:03
9458
7
原创 css pc版默认样式
body, textarea, input, select, option { font-size: 14px; color: #333; font-family: "Hiragino Sans GB", "Microsoft Yahei", tahoma, arial, sans-serif; -webkit-font-smoothing: antialiased;}h1, h2, h3, h4, h5, h6 { font-size: 100%;}body, h1, h2,...
2021-07-08 15:31:33
103
原创 HTML面试题总结（附答案）
1.DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?答：告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。2.HTML5为什么只需要写 <!DOCTYPE HTML>？答：HTML5不基于SGML（Standard Generalized Mark.
2021-07-07 16:11:28
1586
原创 react创建新项目
react介绍React是一个用于构建用户界面的Javascript库。React主要用于构建UI，很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目，用来架设lnstagram的网站。React拥有较高的性能，代码逻辑简单。react特点声明式设计——React采用声明范式，可以轻松描述应用。 高效——React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活——React可以与已知的库或框架很好的配合。 JSX——JSX是Java
2021-07-07 11:29:14
116
原创 vue常见面试题
1.计算属性和watch的区别？computed是一个对象时，它有那些选项？computed和methods有什么区别？computed是否能依赖其他组件的数据？watch是一个对象时，它有哪些选项？答：1）计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。所以区别来源于用法，只是需要动态值，那就用计算属性：需要知道值的改变后执行业务逻辑，才用watch，用反或混用虽然可行，但都是不正确的用法。2）有get和set两个选项。3
2021-07-06 17:30:21
79
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人