格鲁的斯图尔特-优快云博客

允许你在React函数组件中添加state的Hook。返回值为：包含当前state以及更新state的函数的数组。count是state变量，接受0；用来初始化state首次渲染，将初始值给到count；后续只要调用了setCount，就会将最新值给到countsetCount是改变state的函数，只要调用setCount一次，整个App中的代码都会执行useState函数可以执行多次，每调用一次为函数组件提供一个状态注意：整个只能在函数组件中使用依赖项：控制副作用的执行时机。

2022-11-08 16:20:37 1222

原创 React 路由基础--React路由介绍

两种常用的路由模式：BrowserRouter和HashRouter声明当前要用是一个非hash的模式的路由包裹整个应用一个React应用只需要使用一次HashRouter，hash模式的路由一个有#（HashRouter），一个一带#（BrowserRouter）（推荐）Link指定导航链接，完成路由跳转to属性指定路由地址，最终被渲染为a标签Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部Route用于指定路由组件和路由地址path：路由组件对应的路径；

2022-11-08 16:17:46 4685

原创 React组件进阶--render-props，render props模式的使用步骤，children代替render属性，传递props

目的：实现状态逻辑复用采用包装（装饰）模式，比如说：手机壳手机：获取保护功能手机壳：提供保护功能高阶组件就相当于手机壳，通过包装组件，增强组件功能2.思路分析高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，}}通过prop将复用的状态传递给被包装组件 WrappedComponent组件通讯是构建 React 应用必不可少的一环。

2022-11-08 16:15:21 507

原创 React组件进阶--基础父子组件案例，props中children属性的用法，props的校验写法，props常见的规则，props默认值，生命周期，挂载阶段，更新阶段，卸载阶段

打印输入框的内容

2022-11-08 16:12:20 2631

原创 Web前端高频面试题解析（javascript篇）--- 每日十题（6）

B继承于A，A是父类，B是子类；继承可以让字类具有父类的各种属性和方法。继承方式只能继承父类的实例属性和方法，不能继承原型属性或者方法。改变一个，也会影响另外一个。子类的实例对象使用的是同一个原型对象。构造函数不能继承原型属性的方法和属性。借用call，改变this指向。

2022-11-08 15:21:44 259

原创 React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。

2022-09-04 14:15:00 1018

原创 React组件基础--表单处理，受控组件和非受控组件，基础组件案例的实现，评论列表案例

HTML 中的表单元素是可输入的，也就是有自己的可变状态。（input表单元素的状态是在value中）。React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改React将 state 与表单元素值value绑定到一起，由 state 的值来控制表单元素的值。受控组件：其值受到 React 控制的表单元素。非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值。

2022-09-03 12:30:00 936

原创 React组件基础--两种创建方式，函数和类创建组件，抽离为独立 JS 文件，React 事件处理，有和无状态组件和组件中的 state 和 setState，事件绑定 this 指向的三种方法

组件表示页面中的部分功能；组合多个组件实现完整的页面功能；特点：可复用、独立、可组合推荐：使用class的实例方法}箭头函数bindsuper()}

2022-09-02 13:36:33 807

原创 React基础--JSX相关知识，脚手架中可以使用JSX语法的原因，注意点，嵌入JS表达式，JSX条件渲染，列表渲染，样式处理

JSX 是 JavaScript XML（HTML）的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码。（ React 的核心内容。）

2022-09-01 20:42:20 876

原创 React基础--React的特点和安装，React脚手架的使用，npx和yarn的使用，React18新版本使用的不同点

一个专注于构建用户界面（html）的 JavaScript 库。写html页面（构建Web应用）MVC：React只是V（视图层）只负责视图的渲染，并非提供完整的M、C的功能。

2022-08-31 15:58:11 1153

原创 Vue高频面试题解析2--过滤器作用，计算属性特性和应用，父子组件的访问方法和通信，双向数据绑定v-model的实现原理，provide-inject跨界通信及如何变成响应式，vue2和vue3响应式

v-bind；v-if；v-for；v-model...不同的指令实现不同的功能。需求：刚进入页面就有就有焦点1.inserted钩子函数表示被绑定的元素插入父节点的时候调用el：表示指令所绑定的元素binding对象包含很多属性：name：指令名；value：指令绑定值2.设置时不需要写v-，使用时需要写directives: { // 自定义指令focus: {...

2022-08-31 14:38:19 625

原创 Web前端高频面试题解析（Vue篇）--- 每日十题（1）

1.v-for和v-if不建议一起用2.为什么v-for要用key3.v-if和v-show的区别4.常用指令及用法1.v-html2.v-once3.v-bind4.v-on5.v-for6.v-if7.v-show8.v-model5.生命周期6.$router和$route的区别1.$router全局路由对象2.$route局部路由对象7.computed和watch及methods的区别8.ref的作用9.watch如何对对象进行深度监听10.vue中常用的修饰符1.v-on和v-model...

2022-08-17 00:30:31 950

原创 Web前端高频面试题解析（javascript篇）--- 每日十题（5）

1.JS中对事件流的理解：捕获，冒泡2.JS中如何阻止事件冒泡和默认行为1.阻止默认行为preventDefault2.阻止冒泡stopPropagation3.JS中实现函数的防抖4.JS中实现函数的节流5.ES6中对箭头函数的理解1.基础使用跟函数没有很大区别2.注意点6.JS中“use strict”的含义及使用区别7.JS中localStorage和sessionStorage的区别8.JS中常见的几种内存泄漏情况9.JS中对事件代理的理解及应用场景10.JS中对作用域链的理解...

2022-08-15 09:51:39 323

原创 Web前端高频面试题解析（javascript篇）--- 每日十题（4）

判断一个属性是属于实例对象还是继承于构造函数1.通过hasOwnProperty()2.bind和call，apply的作用以及区别1.作用：2.区别：1.apply：2.call：3.bind：3.总结：3.ES6中Promise的认识1.三种状态：2.特点：3.用法：4.ES6中Promise实例的方法1.then()2.catch()3.finally()5.ES6中回调地狱及如何使用Promise解决6.ES6中Promise.all的理解及应用场景7.ES6中Promise.race的用法及应用场

2022-08-13 17:46:58 390

原创 Web前端高频面试题解析（javascript篇）--- 每日十题（3）

函数的prototype属性，在定义函数是自动添加的，默认值是一个空对象对象的__proto__属性，创建对象的时候自动添加的，默认值是构造函数的prototype属性主要是为了遍历对象而产生，不适用于遍历数组。...

2022-08-12 17:46:03 366

原创 Web前端高频面试题解析（javascript篇）--- 每日十题（2）

const定义的对象的属性可以修改吗？可以const保证的并不是变量的值不能改动，而是变量指向的内存地址不能改动。obj = {}//Assignment to constant variable.不能够赋值，因为不是改变的属性，是改变的对象。...

2022-08-11 00:09:49 495

原创 Web前端高频面试题解析（javascript篇）--- 每日十题（1）

引用数据类型存储在堆中var a=[1,2,3,4],如果再去改变它数组在增加，大小也在变大a=[1,2,3,4,......],大小不固定，会随着长度在增大。如果+操作符其中一个操作数是字符串（)（或者是通过ToPrimitive操作之后，最终得到的字符串），则执行字符串的拼接，否则执行数字加法。NaN（not a number）不是一个数字，表示是否属于number类型的一种状态：是或否，不是确切的值。如果对象的隐式原型等于构造函数的显式原型的话，那么说明这个对象就是这个构造函数实例化出来的。.....

2022-08-09 16:35:51 688

原创 Vue+JS+Element UI实战（电商项目3)

商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页值给的看到。动态参数用户在选择商品的时候可以选择商品颜色，也可以选择商品版本（用户可以修改）静态属性商品固定的一些参数（用户只能查看）.......................................

2022-08-01 19:51:25 1632 1

原创 Vue+JS+Element UI实战（电商项目2)

检查当前所处分支，从master分支上创建新分支查看结果推送到云端进行保存通过路由形式加载权限列表组件页面。

2022-07-29 01:10:27 1086

原创 iconfont字体图标下载

把鼠标放在图标上面，就会显示购物车，点击加入购物车即可此时就会有一个压缩包下载了，解压到当前文件夹，可以将文件名个名字这里面点击FontClass就可以使用图标的类名了（下面那一行）同时这个页面也有使用步骤。一定是，否则会显示不了iconfont.css。...

2022-07-24 00:08:51 1658

原创 Vue+JS+Element UI实战（电商项目1)

根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式。客户使用的业务服务PC端，小程序，移动web，移动app管理员使用的业务服务PC后台管理端。PC后台管理端的功能管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离（后端写接口，前端调接口）的开发模式前端项目是基于Vue的SPA（单页应用程序）项目前端技术栈后端技术栈Element。......

2022-07-23 23:59:13 2385 2

原创 Vue+TS+Element-plus项目

3.搭建第三方库element-plus1.安装安装 | Element Plus如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。3.按需导入自动导入推荐首先你需要安装和这两款插件然后把下列代码插入到你的或的配置文件中Webpack--->可以在vue.config.js中添加webpack.config.js即可修改配置了之后，要重启项目自动生成Vue3代码：Vue VSCode Snippets（下载失败：使用管理员运行v

2022-07-08 00:13:04 2854

原创 Vue3基础知识3

你可以使用注册一个全局前置守卫：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。每个守卫方法接收两个参数：eg.有一个在用户未能验证身份时重定向到2. 路由独享的守卫守卫只在进入路由时触发，不会在、或改变时触发。3.组件内的守卫可用的配置 API可以为路由组件添加以下配置：2.路由懒加载 Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导

2022-07-06 18:28:04 2345

原创 Vue3基础知识2

1.组合式 API 基础新的选项在组件被创建之前执行，一旦被解析完成，它就将被作为组合式 API 的入口因为是围绕和生命周期钩子运行的，所以不需要显式地定义它们。即在这些钩子中编写的任何代码都应该直接在函数中编写。在中你应该避免使用，因为它不会找到组件实例。的调用发生在 property、 property 或被解析之前，所以它们无法在中被获取。（组件创建之前被调用，数据代理data还没有开始，所以不能拿到这个数据）将返回的所有内容都暴露

2022-07-03 23:47:00 575

原创 JavaScript基础知识3（ES6）

一组值和语义的封装2.广义的对象dom元素；数组；函数判断是否为对象，那就判断是否可以添加属性（ x.username=‘xx’），可以添加的话就是对象2.json1.js对象和JSON格式的区别： 1.JSON的属性一定要加双引号；对象可以加，也可以不加 2.JSON不可以进行赋值（obj.name = 'zx'），也不可以以属性的形式取值，对象可以。 3.转换为js对象类型3.对象中的this1.执行上下文代码分类（位置）

2022-06-24 23:39:34 669

原创 Vue3基础知识1

编写HTML，指定ID-->编写CSS-->编写JavaScript交互（获取DOM->添加事件监听->维护数据（手动添加新元素）） HTML不灵活 CSS样式覆盖 Javascript变量覆盖 HTML与JavaScript结合紧密（紧耦合）数据不同步传统Web弊端：数据不能同步，全局变量冲突使用script引入使用脚手架检查打开首选项-->settings-->format on save 检查是否开启EPERM: operation not permitted, mkdir

2022-06-17 23:56:57 1653

原创 JavaScript基础知识2（BOM+DOM）

目录1.DOM1.什么是DOM2.查找节点3.事件三要素4.改变HTML内容 5.获取，设置，删除节点属性2.DOM节点1.dom节点nodeType：nodeName：nodeValue：层次节点的属性2.节点操作tab切换案例3.表单操作创建表格4.元素大小5.周边大小滚动事件点击返回顶部案例6.注册事件7.删除事件8.this关键字9.事件对象10.鼠标事件11.可视区和屏幕的坐标12.键盘事件13.表单事件1.onblur2.onfocus3.onchange4.onreset5.onsubmit

2022-06-16 23:37:27 348

原创 Javascript基础知识 1（JS）

运行在客户端的脚本语言；专为与网页交互而设计的脚本语言；动态类型、弱类型、基于原型的语言。脚本语言：不需要编译，运行过程中由js解释器（js引擎)逐行解释并且执行（边解释边执行）。C、C++等语言先编译后执行。基于对象：不仅可以创建对象,也可以使用现有的对象。动态性：采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。（在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应）跨平台性：不依赖于操作系统,只需要浏览器的支持

2022-06-12 23:29:11 762

原创 CSS基本知识总结（HTML+CSS）

英文全称：Cascading Style Sheets中文名称层叠样式表。给页面中的HTML标签设置样式。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS有3种引入方式：行内式：将样式写在元素(标签)的 style属性内。（配合javascript使用）-->是当前标签中内嵌式:将样式写在 style元素内。（任意位置，通常写在head标签中）-->当前页面中外链式：通过link标签，引入CSS文件内的样式。（多个页面）-->.css文

2022-06-09 22:42:42 1169

原创 CSS常见图片居中，文字居中，版心居中集合

1.margin:0 auto；（水平居中）2.margin: auto;（垂直水平居中）3. 定位居中（垂直水平）适用于未知宽高，已知高度也可以用4.text-align水平居中，主要使用：文字居中5.行高line-height垂直居中，适用于：文本6.Flex居中(垂直水平居中)7.width:fit-content; (水平居中)设置width:fit-content;同时设置margin：auto；实现元素居中；8.margin-top（垂直水平居中）9.vertical-align:middle.

2022-06-09 14:44:57 9120

原创背景图片相关应用-铺满，自适应

数值，或者top,right,bottom,left等，center：距离页面左边的定位，0px：距离页面上面的定位auto：默认值，保持背景图片的原始高度和宽度。contain：缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。宽跟父级一样高后，就不会缩放了,当宽度或高度和盒子尺寸相等，图片就不再缩放.这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。cover：缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。图片完全覆盖到整个盒子

2022-06-08 15:00:00 6322 1

空空如也

空空如也