- 博客(43)
- 收藏
- 关注
原创 04-react基础知识-路由
一、react路由环境安装二、引入路由 1.createBrowserRouter里面路由的写法(path,element):第一种:element里是简单的标签 2.页面对应的path路径,访自己风钻工的组件的写法一: 3.访问自己封装的组件的最终写法(代码最简)三、页面之间的跳转:1.无参跳转页面:(1:标签跳转(Link和a标签的区别)(2:编程式写法的页面跳转(useNavigate)四、有参跳转页面:三种方式(state、query、动态路由传参)
2023-11-07 19:59:07 578
原创 03-react基础知识-HOOK
一、useState二、useEffect三、useCallback四、useMemo五、useContext六、useReduce七、useRef八、自定义Hoook
2023-11-06 10:15:23 254
原创 React基础知识02
一、通过属性来传值二、插槽的思想来传递模板(children属性),若组件标签属性名为children的同时,该组件标签中还有元素,显示的原理和顺序三、hook 1.类组件的状态:通过this.state和setstate两者来实现响应式数据的功能 2.usestate:usestate的含义和用法(【变量,修改变量的函数】=usestate(”变量在页面中显示的数据,可以是任意类型,变量的类型由usestate保存的信息来决定“))四、受控组件和非受控组件的含义和案例
2023-11-03 02:25:48 440
原创 一、React基础知识
一、react环境安装二、JSX相关基础语法:组件(纯组件、函数创建组件、通过class创建组件)三、JSX中的插值表达式{ }的使用途径:变量、对象和数组访问成员、js运算表达式、函数调用、JSX对象四、插值表达式的使用途径:标签属性上:1.(className:添加一个类名或多个类名的方法 2.style:分为局部样式(各自的样式各自用,选择器的名字重复与否不影响)和全局样式(供全局使用)、src、href等)五、数据循环渲染(通过for循环渲染、通过map函数来循环渲染数据)
2023-11-01 19:59:14 859
原创 vue-动态组件(component),缓存组件(keep-alive)、异步组件(defineAsyncComponent )
一、v-if和v-for两个条件使用避免多余标签二、动态组件(component)(is为属性,is为变量的情况)三、缓存组件(keep-alive)(与动态组件结合使用,生命周期函数、选择性缓存组件和选择性不缓存组件,缓存多个组件)四、异步组件(defineAsyncComponent )(懒加载组件和预渲染组件)
2023-10-16 20:09:39 3008
原创 组件传值-高级
属性传值(父组件给子组件传值)二、反向传值(子组件向父组件传值) 第二种写法:因为v-modle等价于“:value,@input” 的写法穿透传值(跨组件传值)依赖注入(provider/inject):是多层传值的优化版五、$parent、$root、$refs的使用六、中央事件总线,
2023-10-16 00:01:04 105
原创 vue知识点05-插槽
1.单向数据流、2.vue中的data为什么要设计成为一个函数3.具名插槽:该子组件的插槽slot标签上添加name属性来指定插槽的名称,父组件在使用子组件时,可以用v-slot指令来将内容分配给具体的具名插槽4.匿名插槽:最简单的一种写法5.组件嵌套组件,6.把子组件当标签用7.插槽(slot)
2023-10-12 22:58:08 61
原创 Vue04-使用vue进行项目开发
一、vue项目环境的搭建(使用vite)二、vue基础知识1.vue文件中的标签的省略:2.引入vue组件在vue中组件如果有多个类名相同的标签,在各个组件中设置不同的样式,显示顺序,根据入口文件的导入顺序执行的,样式都会执行的,只是后面的将前面的样式给覆盖了若想要各自的样式是各自的,则在自己组件的样式标签中添加scoped属性即可,成为局部样式给自己使用。 2.引入外部的css样式main.js文件中也引入样式2.属性传值类型验证属性传值使用驼峰命名发命名
2023-10-12 20:04:10 61
原创 vue03-基础知识
侦听器(watch)、生命周期函数(创建前:beforeCreate、创建后:created、挂载前:beforeMount、挂载后:mounted、更新数据前:beforeUpdate、更新数据后updated、销毁前:beforeunmount、销毁后:unmounted在directives中设计自定义指令,components、template(模板标签)、局部组件、全局组件、局部指令、全局指令、可以将页面拆分为一个个对象
2023-10-11 00:23:13 48
原创 vue语法02-页面渲染相关知识
条件渲染(v-if,v-else)、循环渲染(v-for)、过滤器(filters)、计算属性(computed)
2023-10-10 01:10:01 151
原创 Vue开发环境集成
直接在网页中使用在线的vue,下载网页中的vue,引入到本地的vue文件,自己手动构建脚手架(全程在小黑窗,可视化创建手脚架,使用vite构建手脚架(速度更快、使用最广泛
2023-10-09 01:10:08 136
原创 webpack(静态模块打包工具)
webpack环境安装、webpack的构成:entry(入口)、output(输出)、loader(加载器)、plugins(插件)、mode(模式)、开发环境(devServer)
2023-10-09 00:24:32 402
原创 TS--类(class)
一、基本知识二、类三、对象和内存四、this:和js中的this用法一样,谁调用,this就指向谁五、构造函数(constructor)六、静态方法七、存取器八、继承(extends)九:super它是用来创建具有相似属性和行为的对象的一个模板或蓝图。类定义了对象的属性(成员变量)和行为(成员函数),并通过创建对象来实例化类。对象是具有类类型的变量:(1)类是对象的抽象,而对象是类的剧吐实例(2)类是抽象的,不占用内存,而对象是具体的,占用存储空间(3)类是用于创建对象的规划,抽象。
2023-09-01 20:17:55 2903
原创 事件类型和事件对象
1.鼠标事件,下面是常见的鼠标事件 2.键盘事件3.输入框事件4.其他事件网页加载顺序:url-->下载页面-->domTree,cssTree并行-->渲染树renderTree-->绘制页面-->继续下载图片资源,下载完毕再放到页面上去onload。 domTree:domTree的形成,是先把元素翻译成的节点对象挂到 domTree上去,再把属性 img_src放到渲染树上去事件对象上存储着事件发生时的相关信息鼠标事件触发时:有以下信息 (1)a
2023-09-01 09:50:39 115
原创 TS相关知识-初始接口
含义:接口(Interface)用于描述一个对象的结构或者一个类应该具备的属性和方法,它定义了对象的形状和行为。接口中还可以包含接口。
2023-08-31 20:02:41 214
原创 元素相关知识--事件
含义:官方的某些元素自带事件,若我们再给其绑定一个这个事件,那么先执行我们设置的事件,再运行系统官方默认设置的事件,若不想要默认事件,则可以用”e.preventDefault()“来让它不运行。(2)若子元素和父元素都设置了事件,点击子元素,子元素事件触发时,父元素事件也会触发,但是是先执行子元素事件,再执行父元素事件。捕获阶段:具有嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素)。冒泡阶段:具有嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。
2023-08-24 00:09:07 127
原创 DOM-获取元素及获取元素的相关知识
DOM的相关知识:元素获取的几种方式通过关系来获取页面上的元素通过document来直接获取标签兄弟元素,子元素视口的相关操作
2023-08-23 16:49:32 409
原创 JavaScript--web浏览器
(4)debugger:是关键字:通常用于调试(程序运行的步骤)(4)clearInterval(a):到达一定的条件后清除计时器a(前面的数据信息不会被清除)n1:在延迟n2的时间后需要执行的代码 n2:延迟的时间(ms)(1)setTimeout(n1,n2):用于在指定的时间间隔之后执行一次指定的函数或代码。(3)clearTimeout(n):1秒钟后清楚n这个计时器,前面打印的数据也被清空。(2)setInterval():每个3秒就执行因此要执行的代码。
2023-08-17 21:42:42 40
原创 JavaScript--ES6相关知识
ES6:全称为ECMAScript6.0(欧洲计算机制造商协会脚本6.0版本),主要为了解决前面es5的先天不足(缺乏块级作用域、没有模板字符串、缺乏解构赋值等语法不成熟问题)五大浏览器:各浏览器使用的内核1、IE浏览器内核:Trident内核,也是俗称的IE内核;2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
2023-08-17 21:34:08 102 1
原创 JavaScript--正则表达式
4.方括号“[]”:表示接受其中方括号中的任意一个字符,里面可以是单个字符[a]、字符范围[a-z A-Z]或字符集合[0-9] 例:[abc]:匹配字符,满足a,b,c中的任意一个返回值都为true。1.正则表达式中的方法:test()、execu()、match()、search()、replace()(3)match()、search()、replace()都会返回特定的结果类型。(2)excu():进行字符串匹配,会返回一个数组,数组中包含了符合规则的结果。
2023-08-16 22:42:52 135 1
原创 JavaScript--内置对象--obj相关操作
1.is:传入两个对象是否是同一个对象(即该对象的类型和值都相等),若是,则返回true,反之为false25行中的数据类型都为abc,且数据类型都为string,所以返回值为true, 27行中的虽然值相等,但一个是number型,一个是string型,所以返回值为false2.keys():是一个函数:用于获取一个对象所有的成员名,以数组的形式返回3.values():用于获取对象中的所有成员的值。
2023-08-15 20:35:21 122
原创 JavaScript--内置对象--字符串--常用方法
1.charAt():用于获取字符串指定索引的字符(第一个字符索引是0),并作为一个新的字符串返回2.split():将一个元素字符串拆分成为新的字符串数组,根据给定的分隔符将该字符串分割为多个子字符串,返回的是一个数组将a这个字符串分割为字符串数组,以符号”$“ 作为分割条件3.slice():遵循左闭右开的原则:从一个字符串中截取指定位置的子字符串,并将截取到的子字符串作为一个新字符串返回4.toLowerCase():将大写字母转换为小写。
2023-08-15 19:55:52 64
原创 JavaScript--内置对象--数组的相关操作
每次打印都有两个结果是为了做对比1.若想将数组快速删掉,可以使用length=0将其快速置空,将数组的长度置为011行打印的是置空前的数组,13行打印的是将a数组的长度置为0的数组2.若传入一个参数,则默认为数组的长度且都为空,传多个参数,则是添加数组元素(1)传入一个参数(2)传入多个参数,则是给数组添加元素3.push():在数组的末尾添加一个元素(只能添加一个),原来的数组被改变。返回的是一个修改过的数组。
2023-08-14 19:09:26 40
原创 JavaScript--new关键字
3.通过构造函数来创建对象(比较便捷的方式,当属性名一样,但值不同可以快速创建多个对象):任何函数都可以通过new来创建对象。4.1例子:由下面程序可知,返回的是一个引用数据中的对象,所以此时的new对象失效,返回的就是对象。4.2例子:由下面程序可以看到返回的类型不是引用数据中的任何一种,所以new对象生效,返回的是对象。b和c是两个不同的对象,是两个不同的数据容器,只是属性名一样,但值不同。3.函数内部的this就是创建的那个对象。返回一个引用数据(数组、对象、函数)函数内部的this是创建的对象。
2023-08-09 19:26:13 191 1
原创 JavaScript--this关键字
开始调用getAge并打印,此时调用getAge的对象是window(console.log(getAge()等价于:先调用getAge()函数,再将其打印出来),所以对象person中的getAge函数中的this是指向window,所以返回的是window中的age==20。在script标签里的所有变量都是window对象的成员,window对象的成员包括script里的所有,当我们调用函数时写的是函数名()实际上是window.函数名() var i=2等价于var window.i=2。
2023-08-09 17:16:35 114 1
原创 JavaScript--回调函数以及自调用
根据程序运行步骤:先调用fn函数执行,将函数fm传递给形参,这时fn里面的arg函数只声明未调用,所以执行222的语句,当调用arg函数后,则打印111的语句,然后按照顺序执行333的语句,执行完fn里面的函数后,退出,这时调用了fm函数,所以打印了444这条语句。这里调用函数后传入一个5的实参,fn里的条件是当n小于等于1是返回1,其他值时返回n*fn(n-1),因为5是从外面传进来的,所以每次都会从函数外面进来再判断。第五次返回的值为1*fn(5-1-1-1-1)第二次返回的值为4*fn(5-1-1)
2023-08-08 20:02:06 243
原创 JavaScript--闭包
按照业务场景来区分闭包可以分为以下几种:1.函数具有作用域,每次调用都是独立的,变量用栈来保存 2.闭包可以将不同的业务分为几个模块,将其封装起来,要使用再调用 3.若函数在A区域被声明,但在B区域被调用,那么执行时要在A区域运行代码(这可以简介访问函数内部的变量)这可以简介访问函数内部的变量)
2023-08-08 18:49:51 32
原创 JavaScript--函数的执行顺序
4. 函数调用一次就会运行一次,而且函数调用如果在A作用域 它是在B作用域生成的 那么函数运行代码在B作用域。4. 函数调用一次就会运行一次,而且函数调用如果在A作用域 它是在B作用域生成的 那么函数运行代码在B作用域。2.局部变量:函数内部声明的变量只能在函数内部使用,不能再函数外部使用,否则会报错:该变量未定义。2.函数内部的标识符只能在函数内部使用 函数外部不能使用。这里的例题:内部变量在函数内部没找到相应的变量,就往外面找。函数的作用域:分为局部作用域和全局作用域(局部变量)(全局变量)
2023-08-07 20:32:05 560
原创 JavaScript--函数参数
(2)当实参的数量少于形参的数量时,按顺序取值,未取得的形参默认未undefined,那么任何数据类型与undefined运算结果都未NaN。2.若在使用别人写好的参数,自己使用时不知道有参数参数的话可以用” console.log(arguments)“数组 里面装的是实参。(1)例:当实参的数量多于形参的数量,则按顺序取,剩下的不用管。形参:声明变量是”()“中的参数,是可变的,得到的值是由实参传递过来的。实参:具有具体的数据,调用函数时函数名后面的”()“中的数据。函数的参数分为实参和形参。
2023-08-07 20:04:14 80
原创 JavaScript--函数的返回值
函数调用定会生成一个结果,但生成的结果可以使用,也可以不使用函数的返回值有三种(1)没有执行return(2)执行了return但是只有return,后面没有表达式(3)执行return且后面有表达式(包括成员访问、各种运算、函数,数据类型等)。其中(1)(2)返回的结果都是undefined。(3)执行return后面有表达式(可以是函数,数组,运算表达式等)(2)返回return但后面没有表达式。
2023-08-07 19:31:59 125
原创 JavaScript--函数设计
找出数组中有成年人的姓名和年龄,并判断是否有第三个年龄是大于18的人?有的话返回该人的名字。最小值的话可以将temp的值为负无穷。根据自己想要实现的功能来设计函数。例:遍历数组中的最小值或最大值。
2023-08-07 19:16:09 32
原创 JavaScript知识--数组遍历、获取数据
例:已知:arr = [[10,30,21, 20, 30], ["ajax","JavaScript", "HTML/css", "MySQL","TypeScript", "框架"], [true, false, "hello", 123, 0.5, .9]];则获取["ajax","JavaScript", "HTML/css", "MySQL", "TypeScript", "框架"]中的各个元素。数组中可以存储各种数据类型,数组中可以包含元素、函数,数组等。例2:获取书名以及价格。
2023-08-07 18:36:08 732
原创 JavaScript--对象
例题:var arr = [{ name: "karen", age: 23, son: { life: 1, name: "jack", books: ["三体", "乔布斯"] } }, "hello", { x: 20, y: 30 }]如何取到乔布斯这个元素。其中a、b为对象obj的成员,a:100中的a为属性名,100为属性值,简称键值对。2.函数:可以把公共的代码部分抽取出来函数不会直接运行,要用的时候,再调用它,每次调用时都是独立的,不互相影响,对象中的成员还可以包括对象或数组。
2023-08-04 19:49:36 36 1
原创 JavaScript基础知识--条件语句
E} A:指初始条件 B:循环的条件 C:迭代操作 E:循环体。3.for循环:for循环就是机械的执行相同的代码,但每次的结果都不同,可以控制for的循环次数。2.if.....else语句:当满足条件时执行if中的代码块,否则执行else中的代码块。条件语句是在不同的条件下来执行不同的操作,今天学的内容是if和if..else,for三种。{条件成立执行的代码块}运行的顺序:1A--2B--3E--4C--2B-3E-4C-.....
2023-08-03 20:01:41 755
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人