- 博客(51)
- 收藏
- 关注
RSS订阅原创 常用浏览器调试方法
这种调试方案是最方便简明的，直接在需要调试的代码处console.log（xxx），可以直接打印出所需要的数据，一目了然；1949年9月9日，天气非常炎热，有一只娥死在了70号继电器里面，造成电路不通，机器死机，经过近一天的检查，Grace Hopper（格蕾斯哈珀）终于找到了真凶，原来正是被光吸引过来的娥造成了机器宕机，在这儿之后，在计算机科学中，Bug就从虫子变成了程序的缺陷，一只虫子就这样被载入了计算机史册。控制台是支持jquery的$，可以使用 $(selector)，查看节点。
2023-08-07 15:24:35
224
原创 Promise详解
then()方法是Promise 实例的第一个参数是resolve状态的回调函数如果then回调方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then// 打印结果:复制代码。
2023-04-17 21:20:27
505
原创 Vue的DOM异步更新
DOM的更新是异步的，这就意味着，并不是你修改了数据，其对应的真实的DOM就会立马完成更新。Vue的官方文档是这样说的：可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。虽然数据已经修改了，但修改后立刻访问DOM，仍是旧值。也代表着我们获取的不是最新的DOM，如何才能在DOM完成更新后操作DOM呢？
2023-04-17 21:04:13
744
原创 vue插槽
默认插槽 组件内容部分就是插槽内容 - 插槽内容 可以是组件 也可以是标签在组件中 使用slot插槽组件访问具名插槽在组件内部的标签或者组件中使用slot="" 在组件中使用slot插槽组件 且通过name属性获取具名插槽
2023-04-13 19:12:42
110
原创 vue中使用swiper插件
2.在main.js中引入,供所有组件访问。--save-dev 或者 -D。3.在组件中使用swiper。--save 或者 -S。
2023-04-13 19:11:24
108
原创 vue中使用swiper插件
2.在main.js中引入,供所有组件访问。--save-dev 或者 -D。3.在组件中使用swiper。--save 或者 -S。
2023-03-31 21:35:37
122
原创 vue网络请求及跨域问题
2.在单组件中使用axios网络请求,为了不每次都在不同的组件中导入axios,供该组件使用;指令:npm i axios --save 以及 npm i vue-axios --save。this.$http.get(url).then(res =>{}) get方式的请求。this.$http.post().then(res =>{}) post方式的请求。1.首先, 需要找到当前项目路径下的vue.config.js文件。2.在vue.config.js文件中添加新的键值对。
2023-03-30 21:48:43
442
原创 vue的一些总结
但是引用数据类型，可以通过方法this.$set(数组/对象，数组下标/key，数组元素/value) 数据源改。(1).在自定义子组件中，定义配置信息中的属性props:['属性名','属性名'];首先，在子组件中，通过事件发射 this.$emit('事件名',传递的参数)b.子传父 （父组件使用子组件中的数据源，计算属性，方法的返回值...）的。(2).属性传值props - porps接收父组件中的方法名，便于回调；(2).在自定义组件中，传递过来的属性使用方法和该自定义组件当中的。
2023-03-30 21:47:45
121
原创 自定义全局与局部组件
除了vue实例中的el属性不能访问以外。数据源为什么要是一个函数及返回值的形式。从函数的作用域角度来看自定义组件中的。自定义组件和vue实例一样。函数与函数之间是有作用域的。所以两个不同的作用域之间。只有函数才有作用域问题。组件不管被复用了多少次。数据源都应该是相互隔离。
2023-03-27 20:54:36
57
原创 watch监听
参数1：监听的数据源名 参数2：监听数据源改变时，触发的回调函数。key代表监听的数据源属性名，对应的value函数有两个参数，watch监听属性，监听数据源的改变，从而做交互处理。参数1接收改变之后的值，参数二接收改变之前的值。方式二：外部处理(写在实例外面)方式一：写在实例里面。
2023-03-24 21:44:02
510
原创 v-if、v-show和v-for
v-show是先当于在css中添加display:none和block样式，节点一直存在。选择是否插入该指令所在的节点，值为true时，插入该节点，反之，不插入。v-if为真 走if v-if为假走else。v-if是将整个dom元素节点整个添加或删除。v-for的优先级更大。
2023-03-23 20:57:21
69
原创 Vue基础指令
vue中的指令:将vue实例中data属性值,函数返回值，计算属性值，绘制(渲染)到该元素节点中。绘制元素，文本，注释节点，类似于JS中的innerHtml。指令：绘制文本，类似于原生js中的innerText。指令 解决文本闪烁问题。双向数据绑定，默认为。
2023-03-23 20:54:09
57
原创 vue实例对象
4.computed 属性，计算属性：是用来计算复杂的逻辑数据处理的，计算属性要。例如：this.$set(数组/对象，下标/key，数组元素/value)3.methods 属性，vue实例中提供的方法支持部分。vue中提供了一个方法(非基本数据类型的处理)，2.data属性，vue实例中提供的数据源支持。5.filters 过滤属性，操作数据源的。数据源改变，计算属性也会重新渲染。,挂载到el绑定节点。
2023-03-22 19:17:17
277
原创 路由6中三种传值
1.params传值动态路由配置组件通过useParams接收2.state传值 link传值编程式传值通过useLocation接收3.search传值导入qs模块link传值方式编程式传值方式通过useSearchParams接收
2023-03-21 19:32:17
56
原创 React路由6
react-router-dom(6.3)是react路由的新版本,与之前的路由5有较大的改动;下载指令:npm i react-router-dom@6.3 --save1.react-router-dom 6版本适用于函数式组件,部分逻辑api更倾向于react hook;2.react-router-dom 6的新特性: 2.1 没有了component和render属性,都用element属性代替,值写成标签形式; 2.2 所有的Route组件必须要被Routes组件包裹; 2.3
2023-03-21 19:28:56
121
原创 React组件懒加载
因为React脚手架项目是一个SPA单页面应用,因为在请求加载资源全部完成之后,才会渲染页面,这样就会严重影响首屏页面加载的速度,减少首屏加载的速度,可以使用懒加载处理;通过import() 和 React.lazy()方法,还有Suspense 共同一起实现懒加载,也就是常说的运行时动态加载；懒加载的组件在渲染之前处理 -render之前。只会在组件渲染时,才会被下载到本地(缓存);
2023-03-20 21:28:29
334
原创 React组件动画
1.index.html中导入 animate.css文件。1.下载react-transition-group。2.classNames 设置名字便于设置css。方式二：使用第三方animate.css中的动画。POP回退 PUSH前进 REPLAY首屏。3.在xx-exit-active中离开时。2.在xx-enter-active 中。CSSTransition中的属性。1.timeout 延时时间。方式一：用css处理动画。
2023-03-10 21:30:16
127
原创 Redux的使用
在Reducer中的index.js。在Store中index.js。在src下创建Redux文件。在另一个reducers中。在Redux文件下创建。在另一个action中。在reducers中。
2023-03-10 21:27:48
38
原创 React路由跳转传值方式
1.params 方式:直接将需要传递的值以/形式继续拼接在url地址的后面;3.state 方式,传值方式与query类似;(少用,除了接口中存在此情况)
2023-03-09 21:44:17
1062
原创 React路由5
指令:cnpm/npm i react-router-dom@5.2.1 --save (此种方式,在导入该路由时,会报路由路径问题,需要在d.ts文件中,进行模块声明 declare module "react-router-dom")3.路由种类:BrowserRouter(history 路由)组件或者HashRouter(hash 路由)组件,这是路由接口实现必须使用的组件,如果想使用路由中的功能,需要将该组件包裹起来才能实现效果;path属性,是一个字符串,用来匹配路由(路由路径);
2023-03-08 20:58:48
148
原创 React解决axios跨域问题
在React中,axios是ajax的再次封装,所以,axios具有同源策略的特点,不能跨域请求数据,如果想跨域请求数据,需要设置跨域代理,方法如下 1.需要在src一级目录下面 创建 setupProxy.js文件 2.下载模块 npm i http-proxy-middleware@2.0.6 --save 3.在setupProxy.js中书写固定跨域代码 4.在使用该接口的地方,通过/api代理将要跨域的域名 5.重新启动服务器 npm run start
2023-03-08 20:58:14
952
原创 React+TS中axios网络请求以及利用Promise封装多个网络请求
在组件中就可以用this.$netWork进行多个网络请求。方式二：(全局设置 通过this.$axios()请求)在ts中如果window.XXX 或者 $.XXX未注解。axios网络请求的封装。在index.tsx中。3.在.d.ts文件中。方式一：在单个组件中。
2023-03-06 19:07:48
912
原创 React脚手架搭建以及新电脑需要安装哪些
create-react-app 项目名(不允许大写) --template typescript。全局下cnpm install -g create-react-app (使用一次就行)npm run start 或者 npm start。快速创建constructor构造函数 rconst。项目文件下create-react-app 项目名。1.安装node环境 默认安装。2.安装淘宝镜像cnpm。快速创建组件rcep。
2023-03-06 19:02:58
44
原创 React生命周期函数
该方法会在数据(接收的props属性或者该组件state数据源)更新之前进行询问,如果返回true,则正常更新(数据更新,组件重新render渲染),如果返回false,则不重新更新使用过该数据的jsx结构,也就是不重新渲染;组件的构造函数,会在组件实例化时自动触发,在该函数里做一些代码的初始化工作,例如:初始化state,修改函数this的指向,创建ref对象,props属性获取等等;该生命周期函数的作用:我们可以在该函数中做一些清理任务,例如:清除定时器,移除监听,或者数据的保存,以及数据内存的销毁;
2023-03-04 14:48:53
165
原创 React中ref的使用
1.创建ref对象,去标识需要标记的jsx元素节点，需要标记几个，就创建几个对象，例如 this.ref标记名 = React.createRef()；ref:React提供的对组件或者jsx语法的标注，可以让我们快速的忽略组件的嵌套关系，而获取子组件或者某个jsx标签，其原理类似于HTML中的id；2.获取已标记的组件或者jsx语法结构，语法：this.ref标记名.current。获取已标记的节点对象，语法：this.refs.ref标记名。给元素节点添加ref属性，设置唯一的标识。
2023-03-04 14:47:55
366
原创 React数据源state与setState
组件中的state数据源属性：如果组件内部需要进行组件状态的维护，此时需要使用自定义组件的state属性，注意state数据源属于组件内部的私有数据，只能用来维护该组件内部的状态(state)，外界无法直接使用该数据，该属性可以实现组件的高度封装性；(state是读写属性，props是只读属性)2.直接使用对象，但是多了一个参数，为回调函数(监测当数据源重新赋值成功之后，执行的回调)参数2：newProps 接收最新的props对象。3.setState有两个参数，都是回调函数。在component中写。
2023-03-03 19:31:15
58
原创 React 组件通信的方式
方法：在子组件中自定义属性props接收父组件的方法名，在子组件通过this.props.属性名接收获取到的父组件中的方法，然后调用(this.props.属性名(参数…))，回调函数(去调用父组件中的方法)，方法中的参数传值给父组件接收；(父组件方法形参接收子组件传递的实参)原理：将父组件中的数据及相关值通过自定义属性的方式，传值给子组件，也就是子组件自定义props属性名，然后，子组件通过props属性接收父组件传递的数据。方法：子组件传值给父组件，父组件再传给另一个子组件。原理：(通过回调函数)
2023-03-03 19:31:05
101
原创 React组件概念及使用
本质上就是一个函数，将组件对应的UI视图以JSX的语法当做函数的返回值return出来，代码简单晴晰，但是相比于class组件，因为本只有一个函数，所以内部无法使用组件的生命周期，但是可以利用react提供的新特性react-hook解决生命周期问题；本质上是一个类(ES6中的class类)，每一个组件都是类实例化出的一个对象，因为语法是面向对象编程，所以，可以在内容中使用react的生命周期，但是语法复杂，逻辑看起来比较复杂；同时达到封装的目的，支持复用。
2023-03-02 19:36:31
411
原创 React事件及绑定方式
因为React里我们操作的都是虚拟DOM，所有在JSX语法结构里绑定的事件并不是真正的DOM事件，我们称之为"React控制事件"；使用bind方法绑定，第一个参数是绑定的实例对象this(组件实例对象)，从参数2以后，是事件触发时，传递的参数(实参)；on+事件名={()=>{ this.方法名(参数1，参数2)} }1.调用的方法中能够获取this对象(组件实例对象)；1.调用的方法中能够获取this对象(组件实例对象)；1.调用的方法中能够获取this对象(组件实例对象)；
2023-03-02 19:36:06
1201
原创 ES6的一些常用语法
ES6中的解构赋值是ES6中新增的方法，在进行赋值过程中，如果运算符(=)左右两边的数据结构完全相同，此时ES6会将右侧对应的位置数据赋值给左侧的变量。先取解构的score值，如果解构的score不存在则取score=100。const 常量名 = 值 （常量名一般大写）2.const用来定义常量，值不可以被改变。1.let与for的区别: 直接上例子。，用来解构该key对应的value值。let块级作用域，防止变量污染。作用1：快速创建多个变量。对象解构，保证前面解构的。打印0 1 2 3 4。
2023-03-01 19:36:46
62
原创 JSX语法的用法特点及注意
注意：在进行列表渲染时，需要给map方法里的jsx结构(虚拟DOM节点)设置一个值唯一的key属性，一般情况下，key的值可以直接通过后台返回的数据中去使用唯一的标识id，如果后台没有返回标识，则可以使用遍历处理的index下标去代替(不能重复)1.jsx的语法结构如果代码多，存在换行情况，整个结构可以用()包裹起来。列表渲染对象{} 不能直接遍历对象，可以变相的通过数组的方式，处理对象。2.jsx语法结构中，可以声明注释，写法{/* xxx */}+{} 当中书写数组，可以直接遍历数组，得到数组元素。
2023-03-01 19:29:37
169
原创 webpack打包-详细
3.项目文件打包指令：npm run build 注意：build 如果没有默认配置，需要在package.json文件中scripts中配置"build":"webpack"；4.此时重新使用npm run build打包项目，依然会报错，找不到src下的打包文件资源(因为webpack默认会对该项目目录下的src文件夹下的文件进行打包)；下载模块指令npm install webpack webpack-cli --save-dev。或者 npm i webpack webpack-cli-D。
2023-02-28 21:32:52
1367
原创 TS中特有类型
例如，知道枚举Color类型值为"下"，但是不知道它映射到Color里的名字，我们可以查找响应的名字；TS中的枚举类型，enum类型：开发中当某一个数据的取值情况有固定的若干种，可以穷尽列举；void：无返回值，适用于TS中函数的返回值，当函数运行完之后未使用return关键词，此时的函数认为是无返回值的函数。：为联合类型重新定义一个名字，主要作用就是简化联合类型的使用难度，防止每次都大量的写重复的联合类型。进行合并，代表后期此变量存储的值可以是此多个类型中的一种，同时可以重新赋值；
2023-02-28 21:26:36
153
原创 超全正则表达式
全局（搜索）匹配，即使匹配到对应的内容，也会继续匹配，直到字符串结束为止，默认是局部匹配，匹配到即结束，返回结果；如果是匹配结果（true或者false），不需要使用全局，如果是匹配到内容，则可以使用全局匹配；.有特殊含义，代表匹配规则，所以，如果想匹配字符串中是否包含字符" . "，需要进行转义；或者 [^\n] 除了\n换行以外的所有字符，除了\n是false，其他都是true；用来匹配字符串中是否出现过[]中的字符，如果出现过，则返回true。^放在[]中，代表除了[]中出现的字符以外。
2023-02-27 21:50:21
69
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人