前端-小鑫-CSDN博客

原创前端进阶学习之路

学习目标：掌握前端基本功HTML、Css 、Sass 、JavaScript 掌握前端框架 Vue2x、Vue3、React 掌握前后短交互Node.js、MySql学习内容：HTML CSS JavaScript Git Vue React Node MySqlHTMLHTML 标签更新中JavaScriptJavaScript运行机制 JavaScript 变量 JavaScript检测属性 JavaScript深浅拷贝 JavaScript c...

2021-08-01 17:52:03 703 4

原创 JavaScript call-apply-bind三者区别与介绍

call apply：相同点：第一个参数是改变this指向，在非严格模式下传递null / undefined/不传参都是指向window不同点:：apply 需要的参数数组形式传递，call 一个一个传递 apply性能比call好语法fun.call([context],1,2)fun.call([context],[1,2])call和apply 与bind比较区别：call和apply 都是改变this的同时把函数执行了，而bind不是立即执行函数，只是预先改变this

2021-08-01 17:03:41 151

原创 JavaScript深浅拷贝

理解：浅拷贝，只克隆第一层，修改拷贝后的第二层将影响被拷贝的数据浅拷贝三种方式let obj={ a:10, b:[10,20], c:{ x:10 }, d:/^d+$/}let obj1={...obj} //第一种let obj2=Object.assign({},obj) //第二种//封装第三种let obj3={} for(let key in obj){ if(!obj.hasOwn...

2021-08-01 17:01:58 165

原创 JavaScript检测属性

typeof 对于原始类型（boolean，null,undefined,number,string,symbol），缺点：除了 null 以及不能区分object 都可以显示正确的类型原因null 二进制000 而对象在计算中都是以000计算机存储（浏览器bug） //原始类型存储的都是值，是没有函数可以调用的，比如 undefined.toString() 会报错typeof 1 // 'number'typeof '1' // 'string'typeof undefined //

2021-08-01 16:58:46 136

原创 JavaScript运行机制

组成：1.核心（ECMAScript）是一种在国际认可的标准的脚本语言规范（语法、关键字和保留字、控制语句、对象、变量和数据类型）2.文档对象模型（DOM）HTML或XML页面中的每个组成都是某种类型的节点（document,createElement）3.浏览器对象模型（BOM）可以对浏览器窗口进行访问和操作(window.innerHeight,navigator.appName)JS单线程概念：JS在同一个时间只能做一件事，同步，从上往下执行任务队列 :1.同步任务: co

2021-08-01 16:57:58 125

原创 JavaScript 变量

Var Let Const 变量区别var 全局变量，有预解析，存在变量提升属于window，函数中定义的var仅可在局部使用const 局部变量，定义好后不能改变let 局部变量，没有预解析，不存在变量提升代码全局/局部体现： //var 可以alert //const 与 let 报错未定义 if (true) { //var a=12; // const a=12 let a = 12; } ale...

2021-08-01 16:56:30 111

原创 sass使用教程

SassSass与Scss区别：Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。Sass语法例子：$font-stack: sans-serif $primary-color: #123 body font: 100% $font-stack color: $primary-colorSass语法例子：$font-stack: sans-serif;$primary-col..

2021-08-01 11:42:14 161

原创 CSS Gird布局用法

容器属性 grid-template-columns 列 grid-template-rows 行 row-gap 行间距 grid-auto-flow 排列方向默认row行排列排版 justify-content 水平 align-content垂直设置多余的设置大小 grid-auto 容器属性一个区域由单个或多个组成grid-template-areas 列grid-template-columns grid-temp

2021-08-01 11:37:26 670

原创 css 左右固定中间自适应

浮动写法：<div class="box_float"> <style type="text/css"> .box_float { min-height: 100px; } .left { float: left; background: black; width: 300px; } .middl

2021-08-01 11:35:39 111

原创 CSS选择器介绍

css三大特性：1.继承性2.优先级3.层叠性优先级等级选择器权值权级 !important 10000 5 内联 1000 4 id 100 3 class 10 2 元素选择器 1 1 通配符 0 0 伪类与为元素伪类 :hover :first-child...伪元素 ::before ::after区分伪类是操作对象中档中有的元素，伪元素是没有的

2021-07-31 19:54:17 88

原创 css 盒子模型介绍

块盒 display:block 常见标签 div p h1-h6 宽度占整个一行高度默认为0，可根据内容自行撑开设置高度有效行盒 display:inline 常见标签 span a 默认宽度 auto 根据内容展示宽度有空格会自动默认合并成一个空格设置高度无效行块盒 display:inline-block 常见标签input 高度随内容撑开可设置高度有效

2021-07-31 19:53:30 91

原创 CSS 浮动介绍

浮动添加浮动后默认值宽度将会是0 ，宽度由内容决定占用的空间将会腾出元素高度为auto将会自适应内容高度前面元素浮动后后面元素如果是块级盒子将会显示在前面元素的底部背景，如果是行盒将会避开，文本都将会跟在前面浮动盒子旁边盒子里面的内容浮动后，外面包裹的盒子高度坍塌问题第一种盒子里面最后添加一个div 属性设置clear:both 第二种伪元素盒子属性 clear::after{content:"";clear:both;disp

2021-07-31 19:52:07 91

原创 CSS 动画介绍

过渡transitiontransition: property duration timing-function delay; 过渡效果属性，运行时间，运行速度，何时开始默认执行时间是0transition:1s 如果只填写时间则默认全部all过渡属性transition-property 单个或多个属性，多个用逗号隔开 none 没有属性过渡效果 all 所有耗性能过渡时间 transition-duration 默认0 没有过渡效果单

2021-07-31 19:51:14 88

原创 css 定位介绍

相对定位 position: relative; 不会脱离文本流相对自身进行，且偏移后不影响任何元素 margin偏移超出范围则不会超过父级容器，而使用相对定位后 left right等调整可超出父级盒子 left与right冲突优先left top与bottom冲突优先top 绝对定位 position:absolute 宽高为auto 自适应文本根据包含块父级的一个定位元素(相对定位、绝对定位、固定定位) 如果设置了absolut

2021-07-31 19:49:34 103

原创 css 垂直水平居中解决方案（6种）

第一种：<html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> .box{ width: 300px; height: 300px; background:...

2021-07-31 19:48:39 90

原创 css 弹性布局flex介绍

父级使用弹窗布局 display: flex横向对齐方式justify-content : flex-start //默认靠左 : center //居中 : flex-end //靠右 : space-around //分布对齐 : space-between //两端对齐纵向对齐方式align-items :center //垂居中 :flex-start //顶部默认 :flex-end //底部排列方式flex-direction :row //横向默认 :r

2021-07-31 19:47:03 173

原创 HTML 标签

排版标签标题标签h1-h6 段落标签 p 换行标签 br 水平线标签hr 文本格式化标签(推荐第二种方式标签语义化主要seo b strong加粗 u ins下划线 i em倾斜 s del删除线媒体标题图片标签img img src 图片来源 art 图片加载失败显示，成功不显示 title 图片介绍 width heigth 如果设置一个另一个自动等比缩放 border

2021-07-31 19:44:13 177

原创 react Redux使用教程

redux状态管理安装 npm install redux 核心： Action 操作 store Reducer 一个函数 store 数据缺点：需要将store一层一层传递加减Demo:let num = 0export default function counter(state = num, action) { if (action.type == 'ADD') { return state + 1...

2021-07-31 19:37:39 239

原创 react 路由 react-router-dom使用

下载 npm install react-router-dom（第四代版本开始）官网https://reacttraining.com/react-router/路由器 Routersimport { BrowserRouter , HashHistory ,Switch, Route, Link, Redirect, useParams } from "react-router-dom"; BrowserRouter 路由不带#，需要配置响应请求服务 HashHistory 路由带# .

2021-07-31 19:28:19 353

原创 react 动画react-transition-group使用介绍

react-transition-groupyarn add react-transition-groupCSSTransitionin：如果this.state.show从false变为true，则动画入场，反之out mountOnEnter：默认false 即使in 是false 组件也会正常加载，如果是true则不会加载，只会在in为true时加载 appear：默认false 加载后自动执行 enter：默认false 是否开启进入转换(关闭后不进入entering状态，直接进入

2021-07-30 17:25:27 530

原创 React函数式Hooks-useRef()用法

函数式组件本身就没有实例，所以没有dom等于无法通过ref获取，而useRef则可以提供获取函数式组件的dom用途：获取dom 获取共享数据父组件获取子组件的domimport React, { useState, useCallback, useRef, PureComponent } from 'react'class Counter extends PureComponent { render() { const { props } = this;

2021-07-30 17:21:47 515

原创 React函数式Hooks-useMemo()用法

useMemo根据条件是否渲染组件useMemo与memo区别： menmo在渲染后执行 useMemo渲染中执行，且有返回值 useMemo只有满足回调的条件，接收定义的变量才会有值，否则都是0，例如count3只有满足count>3,count3才会不是0不重复执行函数 import React, { Component, useState, useMemo } from 'react'function UsememoTemplate() { const [count, s

2021-07-30 16:55:44 1011

原创 React函数式Hooks-useContext()用法

函数组件接收createContext传递的值，如不了解createContext可阅读react 创建上下文（createContext）使用（超详细）例子如下：import React, { Component, createContext, useState, useContext } from 'react'const CountContext = createContext()//之前获取数据的两种方式//第一种class TwoHook extends Component {

2021-07-30 16:10:25 225

原创 vue 动画

三种使用方式：1.Name使用方式 fade为name自定义名称.fade-enter-active 进入时 .fade-leave-active 离开时 .fade-enter 进入过渡 .fade-leave-to 离开过渡<template> <div id="tran"> <input type="button" value="动画" @click="change()" /> <transition n.

2021-07-30 15:57:41 62

原创 React函数式Hooks-useEffect()用法

函数组件没有生命周期，所以useEffect看做生命周期在 componentDidMount componentDidUpdate 之后componentWillUnmount 之前，代替了这两个周期，可以进行操作dom以及卸载例子：监听窗口大小之前写法import React, { Component } from 'react'export default class TestUseEffect extends Component { state = { size

2021-07-30 15:53:11 187

原创 React函数式Hooks-useState()用法

函数式组件，使用函数组件可以拥有类组件的特性，例如state，生命周期等使用useState 语法 useState定义后不能更改获取顺序import React, { useState } from 'react'export default function TestHooks(props) { const [count, setCount] = useState(() => { return props.defaultCount || 0 //默认初始化，只

2021-07-30 15:42:55 307

原创 react 组件渲染控制

场景：子组件不进行任何操作，但父组件操作更新将会导致子组件也进行了重新更新解决重复渲染组件方式：shouldComponentUpdate PureComponent memo 只可以是纯函数场景代码如下： ComponentTemplate组件每次执行点击事件都将会重新渲染Template组件import React, { Component, } from 'react'class Template extends Component { render() { .

2021-07-30 15:08:50 414

原创 react 异步组件加载lazy与Suspense

场景，组件异步渲染期间懒加载，组件加载失败情况lazy需要与Suspense配合使用 Suspense填充状态 fallback请求组件期间还没全部加载完成时显示的内容，需要传入组件实例，例如传入组件，例如 fallback={<loading/>} getDerivedStateFromError /componentDidCatch 错误捕获 import React, { lazy, Suspense, Component } from 'react'; //lazy异

2021-07-30 14:52:44 409

原创 react 创建上下文（createContext）使用（超详细）

原本组件传递需要一层一层props传递，传递太过繁琐，例如以下代码：import React from 'react'function NeedData(props) { return <div>{props.value2}</div>;}// 中间组件function Middle(props) { return ( <div> <NeedData value2={props.value} /&

2021-07-30 13:45:12 20198

原创 React生命周期

React的生命周期可以分为三个阶段：挂载、更新、卸载 constructor 初始化，接收两个参数props和context，如需使用参数需要使用super，且如果使用了constructor则必须使用super，否则thi指向将不正确初始化 componentWillMount() constructor()初始化数据后，未渲染dom，组件准备挂载 componentDidMount() 组件第一次渲染完成，DOM生成， setState后组件会重新渲染，件挂载完毕

2021-07-29 17:11:17 705

原创 react Component与PureComponent区别

React.PureComponent 与 React.Component 几乎相同区别： Component 中只要使用了setState，是否有更改，都会重新渲染组件（包括子组件），如需判断是否要重新渲染组件，需要借助shouldComponentUpdate PureComponent 在原来Component 基础上自动添加了一个shouldComponentUpdate ，处理规则：对对象进行浅对比(指向地址变量，内容不变) 规则如下：function isReset

2021-07-29 14:29:44 127

原创 React setState使用与深入理解

setState作用更改数据，重新渲染页面，直接进行更改数据，值会更新，但页面不会重新渲染如不使用setState更改数据，则可以使用foceUpdate强制渲染页面setState与foceUpdate区别：相同点：都是重新渲染页面不同点：setState执行流程：先走shouldComponentUpdate=>ComponentWillUpdate 使用setState后，如不使用shouldComponentUpdate则即使没有更改数据也会重新渲染组件 foceUp

2021-07-28 22:07:54 381

原创 react props使用

props主要用于子组件接收父组件传递过来的内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1

2021-07-28 20:39:12 81

原创 react中的ref的3种方式

需要获取dom的时候使用，不建议多使用因为会缓存到内存string类型绑定（不推荐）函数类型绑定（不推荐） createRef绑定ref获取DOM更改数据String绑定方式import React from 'react'export default class ChangeRef extends React.Component { constructor(props) { super(props) this.state = {

2021-07-28 17:28:37 347 1

原创 react创建组件

react 的核心主要由以下部分react.js 核心库 react-dom.js 操作dom的react库 babel.js 解析jsx 语法格式为js  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <scrip

2021-07-28 17:12:27 139

原创 vue3 快速掌握 Composition API 大全

setup学习传送门setup函数是 Composition API vue2中在一个组件中会有data methods computed等多个属性当组件越来越大则会增加复杂度以及维护难度， setup 则是将这些内容全部合并执行时间在beforecreate与create之间两个参数 props（父组件传递的值） context （attrs, slots, emit）需要使用的值或函数，必须return出去 setup中不能写this ，因为是在create实例之前还未创建，

2021-07-28 15:13:45 205

原创 vue3 vuex使用与详情

使用vue-cli后选择需要vuex 将会生成一个store ，目录格式如下，如不清楚store，mutations，action，module 等可以去查阅文章Vueximport { createStore } from 'vuex'export default createStore({ state: { }, mutations: { }, actions: { }, modules: { }})获取相应值以及更改值<template&g

2021-07-28 14:46:09 288

原创 vue3 使用ref获取dom元素

vue 2.x获取DOM<div ref="test"></div>this.$refs.testvue 3获取单个或多个DOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n

2021-07-28 13:57:25 731

原创 vue3 provide与inject的使用与详情

定义值，获取值provide第一个参数是key，第二个参数是value inject第一个参数是获取provide的key，从而获取value ，第二个是如为获取到相应的值则给一个默认值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

2021-07-27 20:45:32 1083

原创 vue3 生命周期函数

mounted 等于 onMountedbeforeUpdate 等于 onBeforeUpdateUpdated 等于 onUpdatedbeforeUnmount 等于 onBeforeUnmount<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE.

2021-07-27 17:28:16 115

空空如也

空空如也