hx_programmer的博客

VUE初次渲染父子组件生命周期执行顺序

hx_programmer — Mon, 29 Nov 2021 15:37:54 +0800

听到很多这个问题,想了一下,自己也不是很清楚,写了一个demo,打印结果如下 1.父组件的beforeCreate 2.父组件的created 3.父组件的beforeMount 4.子组件的beforeCreate 5.子组件的created 6.子组件的beforeMount 7.子组件的mounted 8.父组件的mounted ...

TypeScript基础

hx_programmer — Thu, 25 Nov 2021 19:04:01 +0800

TypeScript 是什么? TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 TypeScript有什么作用? JS是弱类型的,没有类型的概念,当你类型写错了的时...

react登录访问控制--鉴权

hx_programmer — Thu, 18 Nov 2021 20:57:26 +0800

这里给出的解决方案是封装一个鉴权路由组件组件代码 import { hasToken } from '@/utils/storage' // 这里是封装了获取token的函数 import React from 'react' import { Route, Redirect } from 'react-router-dom' // 我们需要解构所有的属性，除了component属性 export default function PrivateRoute ({ component, path })

react项目中非组件环境下拿到路由信息

hx_programmer — Thu, 18 Nov 2021 20:47:58 +0800

问题导入一般我们在非组件中跳转路由,由于hooks只能在函数组件中使用,所以我们在非组件中可以用window.location.href,例如: window.location.href = '/login' 这里有一个问题,就是使用window.location.href跳转路由会刷新页面,那么如何在不刷新页面的情况下跳转路由呢,接下来我们来说一下解决办法背景 react-router-dom中直接有Router这个包，但是它Router 没有histo...

react-router-dom基本使用

hx_programmer — Wed, 17 Nov 2021 20:54:45 +0800

react-router-dom现在发了6.0版本，目前不稳定,这里我们使用5.X 基础步骤第一步安装包 npm i react-router-dom@5.3.0 第二步导入包，并使用。 import { HashRouter, Route, Link } from 'react-router-dom' 第三步使用Link指定导航链接使用Route指定路由规则(哪个路径展示哪个组件) 路由三大对象之-Router Router 组件：包裹整个应用，一个 R...

温故而知新(第六天)

hx_programmer — Mon, 15 Nov 2021 20:02:25 +0800

1、js 防抖和节流函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在延迟时间后触发函数，但是在延迟时间内再次触发的话，就会取消之前的计时器而重新设置。只有最后一次操作能被触发应用场景:搜索联想函数节流（throttle）：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数应用场景: 鼠标滚动事件,轮播图 2.、什么是类数组（伪数组），如何将其转化为真实的数组？伪数组有下面几个特点 1、具有 length 属性 2、按索引方式存储数据 3、不具有数组

React-redux库的使用

hx_programmer — Mon, 15 Nov 2021 19:54:58 +0800

为什么要使用React-redux 每个组件都需要单独导入store 在根组件上的写法不友好什么是react-redux 是 Redux 官方提供的 React 绑定库 React 和 Redux 是两个独立的库，两者之间职责独立。 Redux可以和其他的js库，框架一起使用，而并不专门用于react。为了实现在 React 中使用 Redux 进行状态管理，就需要一种机制，将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了

react中redux的使用

hx_programmer — Mon, 15 Nov 2021 19:44:31 +0800

什么是redux Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。为什么Rect要用 Redux React 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React，写大型应用比较吃力不使用 Redux ：只能使用父子组件通讯、状态提升等 React 自带机制 ...

useEffect副作用的使用

hx_programmer — Sat, 13 Nov 2021 13:47:07 +0800

概念:接收一个包含命令式、且可能有副作用代码的函数使用时有几种使用方式: 1.不带第二个参数。执行时机：初始执行，每次更新之后都要执行。可以模拟 componentDidmount + componentDidUpdate useEffect(() => { // 副作用函数的内容 }) 2.带第二个参数，参数是空数组。执行时机：只执行第一次。模拟 componentDidMount useEffect(() ...

useRef的基本用法

hx_programmer — Fri, 12 Nov 2021 20:01:55 +0800

1.使用useRef获取DOM元素 const refContainer = useRef(null); console.log(refContainer) 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。可以把这个ref对象利用元素的ref属性绑定在dom元素上,示例如下: import React, { useRef } from 'react' import reactDom from 'react-dom' export .

useContext的基本用法

hx_programmer — Fri, 12 Nov 2021 18:54:59 +0800

useContext基本使用可以分为固定的三步 1.根组件导入并调用createContext方法，得到Context对象，并导出 import { createContext } from 'react' export const Context = createContext() 2.在根组件中使用 Provider 组件包裹需要接收数据的后代组件，并通过 value 属性提供要共享的数据 return (

react组件之间的通信

hx_programmer — Wed, 10 Nov 2021 21:42:14 +0800

111111

温故而知新(第五天)

hx_programmer — Tue, 09 Nov 2021 18:45:07 +0800

一 .Vue 中怎么重置 data? 要初始化 data 中的数据，可以使用 Object.assign()方法，实现重置 data 中的数据，下面我详细介绍一下Object.assign()方法基本定义:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。用法:Object.assign(target, ...sources)，第一个参数是目标对象，第二个参数是源对象，就是将源对象属...

怎样快速搭建web的api接口

hx_programmer — Tue, 09 Nov 2021 18:26:25 +0800

一 .安装json-server包 npm install -g json-server 二 . 创建一个文件夹,在里面创建一个json文件,名字随意,在json文件中把你需要的数据按json合适的要求定义一个对象例如: { "assets": [ { "id": 1, "name": "外套", "price": 99 }, { "id": 2, "name": "裤子", "price": 34 }, { "id": 3, "name": "鞋", ".

温故而知新(第四天)

hx_programmer — Mon, 08 Nov 2021 19:12:17 +0800

1.你知道 style 上加 scoped 属性的原理吗？先说一下scoped是干什么的,在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有 Vue 组件 style 标签全部加上了 scoped，相当于实现了样式的私有化. 它的原理是通过PostCSS 转移实现,PostCSS 给所有 dom 添加了一个唯一不重复的动态属性，然后，给 CSS...

温故而知新(第三天)

hx_programmer — Sun, 07 Nov 2021 16:17:31 +0800

1.编程式导航使用的方法以及常用的方法首先我们先说一下什么是编程式导航,顾名思义,就是在业务逻辑代码中实现导航我们常用的方法一般有四种: 1.路由跳转： this.$router.push() 2.路由替换 : this.$router.replace() 3.后退： this.$router.back() 4.前进：this.$router.go(n) (这里的n可以是负数也可以是正数,负数代表后退,正数代...

前端从入门到进阶必备的N个网站

hx_programmer — Sun, 07 Nov 2021 15:10:11 +0800

文档学习类 1.MDN MDN是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件，包括：网络标准（例如：CSS、HTML 和 JavaScript）、开发开放网络应用、开发 Firefox 附加组件。 2.菜鸟教程菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识，可以看做是前端开发字典，可在上边查漏补缺。 3.W3CSchool w3cschool是一个专业

温故而知新(第二天)

hx_programmer — Sat, 06 Nov 2021 22:02:21 +0800

1.简述vuex数据传递流程当我们调用dispatch 来触发 actions 里面的方法。actions 里面的每个方法中都会有一个 commit 方法，当方法执行的时候会通过 commit 来触发 mutations 里面的方法进行数据的修改。 mutations 里面的每个函数都会有一个 state 参数，这样就可以在 mutations 里面进行 state 的数据修改，当数据修改完毕后,会同步到组件中,因为数据双向绑定,所以页面的数据也会发生改变 2.Vuex 的 ...

温故而知新(第一天)

hx_programmer — Fri, 05 Nov 2021 22:39:59 +0800

1.Vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？在Vue.cli中使用自定义组件一般分为四步第一步: 新建组件文件,一般在src下的components文件夹中创建,script标签中一定要有export default {} 第二部: 在父组件中导入该组件第三步: 在父组件的components属性上注册该组件第四步: 在父组件的template中使用该组件遇到的问题: 如果导入的时候子组件名用的是驼峰命名法,在template中使用时eslint会自动转化为用减号

如何在老项目中添加Eslint和保存自动格式化

hx_programmer — Fri, 05 Nov 2021 19:40:27 +0800

1.在项目中安装eslint npm i eslint typescript -D 2.在项目根目录，运行npx eslint --init npx eslint --init (1)按交互提示安装相关插件 (2)它会自动生成eslint的配置文件 3.设置vscode的自动保存格式化在项目根目录下，补充配置文件：.vscode\settings.json 代码: { "eslint.run": "onType", ...