- 博客(44)
- 收藏
- 关注
RSS订阅原创 09-React路由使用（React Router 6）
与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除<Switch/>，新增<Routes/>等。变为等。useParamsuseMatch等。
2023-10-22 17:59:36
359
原创 08-React扩展
对象式的setState是函数式的setState的简写方式(语法糖)使用原则：如果新状态不依赖于原状态 ===> 使用对象方式如果新状态依赖于原状态 ===> 使用函数方式如果需要在setState()执行后获取最新的状态数据，要在第二个callback函数中读取父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）
2023-10-21 22:29:11
504
原创 07-React-redux和redux的使用
容器组件与UI组件是父子组件，但是状态与操作状态的方法不能像其他父子组件一样通过给子组件添加属性的方式传递。函数第一次执行后传递了a、b两个函数的返回值，即是状态和操作状态的方法。只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。,也就是状态的数值，因为a函数是用来传递状态的，所以。的文件夹存放两个组件的文件（容器组件+UI组件），在。在UI组件读取状态的数值和调用操作状态的方法。给UI组件传递操作状态的方法就是传递其对应的。容器组件向UI组件传递状态与操作状态的方法。
2023-10-20 21:18:02
369
原创 06-React的路由（React Router 5）
一个路由就是一个映射关系(key:valuekey为路径,value可能是function或component。
2023-10-15 23:22:26
482
原创 05-React组件的组合使用
拆分组件、实现静态组件，注意：className、style的写法动态初始化列表，如何确定将数据放在哪个组件的state中？某个组件使用：放在其自身的state中某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）关于父子之间通信：【父组件】给【子组件】传递数据：通过props传递【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数。
2023-10-15 17:01:07
220
原创 04-React脚手架
当运行React脚手架时，webpack打包管理工具会创建一个本地的虚拟服务器来运行项目以此来模拟现实的开发环境。当在React应用中向某个服务器接口发送请求后，服务器接口返回的数据会被浏览器会抵挡，使我们不能读取到服务器接口返回的数据，具体原因是跨域原则。为了避免跨域问题，需要在React脚手架应用中配置一个代理服务器来解决网络请求跨域的问题。文件，并在此文件中创建一个子组件的文件夹，然后在子组件的文件夹里编写。，这样引入组件文件或者时，就可以省略路径。编写子组件的组件文件和样式文件。
2023-10-15 16:00:24
134
原创 03-React的生命周期
创建基础结构的类式组件控制组件的透明度那有没有可能能够让组件一开始就自动变化透明度呢？——使用React中的生命周期当销毁掉组件后，需要一并将定时器销毁掉，这时就可以使用React中的销毁前生命周期2.React的旧生命周期1).理解：组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。2).生命周期流程图（旧）：由触发—初次渲染1.2.
2023-10-08 23:45:37
33
原创 02-React的模块与组件
/ 1.创建函数式组件return 我是用函数定义的组件（适用于【简单组件】的定义）// 2.渲染组件到页面当我们在组件中输出this时，this显示为undefined，因为babel编译后开启了严格模式// 1.创建函数式组件return 我是用函数定义的组件（适用于【简单组件】的定义）执行了,之后，发生了什么？React解析组件标签，找到了组件。发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
2023-09-24 23:17:28
131
原创 01-React入门
全称: JavaScript XMLreact定义的一种类似于XML的JS扩展语法:JS + XML本质是方法的语法糖作用: 用来简化创建虚拟DOM</h1>注意1：它不是字符串, 也不是HTML/XML标签注意2：它最终产生的就是一个JS对象标签名任意:HTML标签或其它标签标签属性任意:HTML标签属性或其它babel.js的作用:浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行只要用了JSX，都要加上, 声明需要babel来处理。
2023-09-23 15:28:33
22
原创 04_TypeScript与面向对象
对象中主要包含了两个部分：属性方法// 定义实例属性name:string="孙悟空";gender:string="男"// 定义方法console.log("你好");抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例以abstract开头的类是抽象类，抽象类和其他类区别不大，只是不能用来创建对象抽象类就是专门用来被继承的类抽象类中可以添加抽象方法抽象方法使用abstract开头，没有方法体。
2023-08-19 15:49:20
27
原创 02-TypeScript的基本类型
类型声明是TS非常重要的一个特点通过类型声明可以指定TS中变量（参数、形参）的类型指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值。
2023-08-19 15:45:42
21
原创 01-TypeScript入门
TypeScript简称TSTS和JS之间的关系其实就是Less/Sass和CSS之间的关系就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JSTypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。
2023-08-19 15:37:58
23
原创 01—Webpack基础
Webpack 本身功能是有限的:开发模式：仅能编译 JS 中的ES Module语法生产模式：能编译 JS 中的ES Module语法，还能压缩 JS 代码开发模式顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事：编译代码，使浏览器能识别运行：开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源代码质量检查，树立代码规范：提前检查代码的一些隐患，让代码运行时能更加健壮。
2023-08-15 15:25:41
31
原创 11-JavaScript的BOM对象
浏览器对象模型-BOM可以使我们通过JS来操作浏览器-在BOM中为我们提供了一组对象，用来完成对浏览器的操作- BOM对象。
2023-05-13 11:06:22
90
原创 10-JavaScript的DOM对象
10-DOM1.DOM简介DOM，全称Document Object Model文档对象模型。1).JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。-文档——文档表示的就是整个的HTML网页文档-对象——对象表示将网页中的每一个部分都转换为了一个对象。-模型——使用模型来表示对象之间的关系，这样方便我们获取对象。2).要使用DOM来操作网页，我们需要浏览器至少得先给我一个对象才能去完成各种操作所以浏览器已经为我们提供了一个document对象，它是
2023-05-12 19:23:06
741
原创 09-JavaScript内建对象
正则表达式用来定义一个规则-通过这个规则计算机可以检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来-正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象。
2023-05-12 19:19:26
59
原创 07-面向对象
1．无法区分出不同类型的对象2．不方便批量创建对象1．类是对象模板，可以将对象中的属性和方法直接定义在类中，定义后就可以直接通过类来创建对象2．通过同一个类创建的对象，我们称为同类对象，可以使用instanceof来检查一个对象是否是由某个类创建如果某个对象是由某个类所创建，则我们称该对象是这个类的实例语法 : class 类名 {} //类名要使用大驼峰命名 const 类名 = class {} 通过类创建对象 new 类()//创建一个人的类 class Person {
2023-05-12 17:46:27
36
原创 06-JavaScript函数
函数也是一个对象,它具有其他对象所有的功能-函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码)-函数中可以保存一些代码在需要的时候调用在实际开发中很少使用构造函数来创建一个函数对象。
2023-05-12 17:33:18
130
原创 05-JavaScript对象
in语句对象中有几个属性，循环体就会执行几次，每次执行时，会将对象中的一个属性的名字赋值给变量。获取这种属性时，也必须使用Symbol，使用Symbol添加的属性，通常是那些不希望被外界访问的属性。修改变量时，只会影响当前的变量，在使用变量存储对象时，很容易因为改变变量指向的对象，提高代码的复杂度。-对象字面量的属性名可以加引号也可以不加，建议不加 , 如果要使用一些特殊的名字，则必须加引号。-如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法。
2023-05-12 17:20:06
37
原创 04-JavaScript流程控制
1).我们的程序是由一条一条语句构成的，语句是按照自上向下的顺序一条一条执行的在JS中可以使用{}来为语句进行分组：同一个{}中的语句我们称为是一组语句，同一个代码块中的代码，就是同一组代码，它们要么都执行，要么都不执行，一个{}中的语句我们也称为叫一个代码块，在代码块的后边就不用再编写;了2).使用 {} 来创建代码块，代码块可以用来对代码进行分组，let和var:-在JS中，使用let声明的变量具有块作用域，在代码块中声明的变量无法在代码块的外部访问。
2023-05-12 17:17:13
45
原创 03-JavaScript运算符
通过运算符可以对一个或多个操作数（值）进行运算,并获取运算结果比如: typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回number string boolean undefined object。
2023-05-12 17:12:48
85
原创 02-JavaScript数据类型
当声明一个变量而没有赋值时，它的值就是Undefined-Undefined类型的值只有一个就是undefined-使用typeof检查一个Undefined类型的值时，会返回“undefined"var b;alert(b);
2023-05-12 17:06:58
25
原创 01-JavaScript入门
①.变量可以用来保存字面量，而且变量的值是可以任意改变的②.变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量③.可以通过变量对字面量进行描述// var 定义的变量 var int1 = 100;// 变量名称重复 重复赋值效果 var int1 = '北京';// 变量名称重复 结果是报错 let int2 = '上海';
2023-05-12 16:59:03
167
原创 21-Vue-router
一个路由就是一组映射关系（key - value）key 为路径, value 可能是 function 或 component需求：在News组件上添加一个透明度持续变化的文字效果。
2023-04-22 19:47:57
30
原创 20-Vuex
在上面的案例中，使用插值语法关联属性值时，代码非常的繁多，需要写storestate或者store.state或者storestate或者store.getters等前缀< h2 > 当前求和的值为：{{$store.state.sum}} </ h2 > < h4 > 当前求和的值放大十倍为：{{$store.getters.bigSum}} </ h4 ></
2023-04-19 23:07:05
17
原创 19-VUE的插槽
需要三个显示相似内容格式的卡片区域，可以通过组件和父子组件传递数值实现</</importfrom;exportdefaultname"App"componentsdatareturnfoods'火锅''烧烤''小龙虾'games'红色警戒''穿越火线''劲舞团'films'《教父》''《拆弹专家》''《你好，李焕英》'</</</</</</exportdefaultname"CateGory"props'listData''title'</
2023-04-18 21:43:45
42
原创 17-VUE的动画与过度
如果我们想实现这样一个元素的显示与隐藏的动画效果我们可以通过学过的原生CSS动画通过切换class类选择器实现效果</</</</exportdefaultname"AnTest"datareturnisShowtrue</h1;</
2023-04-15 16:14:01
36
原创 13-VUE的组件
如何定义一个组件？使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但是有区别的区别如下：1.el不要写，为什么？——最终所有的组件都要经过一个vm的管理，vm中的el决定服务哪个容器2.data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系。备注：使用template可以配置组件结构。
2023-04-13 11:43:29
27
原创 15-VUE的自定义事件
1)一种组件间通信的方式，适用于：子组件 ==> 父组件2)使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中3)绑定自定义事件：①.第一种方式，在父组件中：<Demo @atguigu=“test”/> 或 <Demo v-on:atguigu=“test”/>-- 例子： --> <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（使用@或者v-on） --> <!
2023-04-13 11:38:18
19
原创 14-VUE的脚手架
ref属性1.被用来给元素或子组件注册引用信息(id的替代者)2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)3.使用方式：打标识：.... 或 获取：功能：让组件接收外部传过来的数据(1).传递数据：(2).接收数据：第一种方式（只接收）：第二种方式（限制类型）：props:{第三种方式（限制类型、限制必要性、指定默认值）：props:{
2023-04-09 00:22:25
942
原创 12-VUE的生命周期
需求：实现一个自动减少透明度的文本效果效果如下：首先我们可以通过在Vue实例的外部添加一个定时器来控制Vue实例中透明度数值的变化-- 以下说明页面的代码如同 --> < div id = " root " :x = " x " > < h2 > n的值为：{{n}} </ h2 > < button @click = " add " > 点我n+1 </ button > < button @click = " bye " > 点我销毁vm </ button > </ div >
2023-04-06 13:31:47
57
原创 11-VUE的自定义指令
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。< div id = " root " > < h3 > n的值为： < span v-text = " n " >
2023-04-05 18:03:43
28
原创 10-VUE的内置指令
1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
2023-04-05 11:30:27
27
原创 09-VUE的过滤器
当我们想将一个包含当前时间戳的vm实例data的属性转换为“xxxx年xx月xx日”的格式，可以使用VUE的计算属性跟侦测属性实现dayjs().format()是外部引入的JS库-dayjs()自备的转换时间戳的方法
2023-04-05 11:29:36
20
原创 07-VUE监测的原理
Vue监视数据的原理：1.vue会监视data中所有层次的数据。2.如何监测对象中的数据？通过setter实现监视，且要在new Vuel时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API:3.如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：(1).调用原生对应的方法对数组进行更新。(2).重新解析模板，进而更新页面。
2023-04-04 20:57:43
30
原创 02-vue事件
/</</</ 5.@click=“demo"和@click=” demo($event)"效果一致， 但后者可以传参;</
2023-04-04 16:55:33
24
原创 01-vue初识
当我们想给新属性绑定一个指定的变量，而且保证新添加的属性值会跟随指定的变量一起变化时，不适应适应直接添加的方式，需要使用另一种方法来通过Object.defineproperty()方法实现。举例: v-bind:href="xxx”或简写为:href=“xxx”，xxx同样要写js表达式,且可以直接读取到data中的所有属性。当想在一个对象中添加一个新的属性时除了可以直接添加属性名和属性值，还可以通过Object.defineproperty()方法添加。，此处只拿v-bind举个例子。
2023-04-04 09:07:37
37
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人