m0_47670683的博客

有时候遇到某些内容需要根据用户需要切换是否加.class，我看到有很多地方用3元表达式来做切换，我想到一种既直观又简洁优雅的方式。先看代码：<script setup>import { ref } from 'vue'const isRed = ref(true)</script><template> <button @click="isRed = !isRed">切换</button> <h1 :class="{i

在windows平台安装前端开发环境。

开篇MobX是一款身经百战的状态管理库，它比Redux性能更优秀、功能更强大、使用更灵活、代码量更少！但使用率却不如Redux，我觉得有很大一部分原因是过于灵活，即完成一件事可以有多种方式。这使得不同人编写的MobX风格差异极大！也使得版本升级历史包袱重！MobX6与之前版本有不少差异！最近我把官方文档从头到尾过了一遍，感觉MobX官方文档真的非常不错，里面有很多状态管理的知识值得细细咀嚼，强烈建议有时间的话还是要亲自啃一遍官方文档。此外官方文档里的内容是真的多，啃起来很费功夫。在学习官方文档过程中越

Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。useReducerconst [state, dispatch] = useReducer(reducer, initialArg, init);useReducer是useState的替代方案，它和redux非常相似，使用dispatch和payload更新数据。useReducer和useContext配合

Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。usuMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);memo是memoized的简写，意思是缓存；computeExpensiveValue的意思是“计算开销很大的值”。useMemo的作用是通过存

Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。useEffect一句话简介useEffect相当于componentDidMount、componentDidUpdate、componentWillUnmount这三个生命周期方法的组合。参数参数1：函数，即effect函数体，执行各种副作用操作，如网络请求、添加订阅、添加计时器等。函数返回值，执行取消

create-react-app需要升级版本卸载旧版本yarn global remove create-react-app安装新版本yarn global add create-react-app提示某些包装不上提示信息如下：npm ERR! code ETARGETnpm ERR! notarget No matching version found for @typescript-eslint/scope-manager@5.20.0.npm ERR! notarget

Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。useState基本用法const [state,setState] = useState(initialState)参数参数类型typeuseState右侧的<>部分是typeScript中泛型的用法，用来约束参数initialState的类型。参数初始值initialStateinitia

类组件的问题自从React推出Hooks之后，函数组件写法大行其道，而类组件写法有些日渐式微。为什么要推广函数组件？我觉得有以下三个原因。原因一，因为this带来的问题有一个著名的案例展示了类组件this带来的问题，下面我将其本土化复现一下这个案例。import React from "react"const ProfileFunction: React.FC<{goods:string}> = (props) => { const showMessage = () =

最近在做antd项目，使用typescript写layout组件，通过cloneElement给子组件的props添加initialState中的数据遇到飘红：类型“ReactNode”的参数不能赋给类型“ReactElement<any, string | JSXElementConstructor<any>>”的参数。这里涉及到下面两个知识点：ReactNode这是一种联合类型，可以是string、number、ReactElement、{}、boolean、React

最近我在前端项目中使用WangEditor，确实是一个非常棒的富文本编辑器，再次向广大前端程序员隆重推荐！近期在使用过程中又发现一个问题，编辑器中的效果与展示效果不完全一致。作为完美主义者怎么能忍！于是我又搞事情了，尝试将wangEditor编辑与展示封装在一个组件中，确保编辑与展示效果完全一致！！！创建WangEditor组件在components目录下创建WangEditor子目录定义样式在WangEditor子目录中创建index.less文件，内容如下：.wangEditor { p

我最近在前端项目中要用到富文本编辑器，找来找去发现wangEditor很不错，目前已经迭代到v5版本，WangEditor官方手册是纯中文文档，内容比较详细，非常值得推荐使用。我使用react开发，但官方手册对react开发者写的手册不够详尽，在使用过程中还是折腾了不少时间，其中多次提交issue叨唠开发者，项目开发者王福朋都不厌其烦地帮我解决了，非常感谢。在此我写一篇在antd中使用wangEditro开发手册致敬王福朋先生，支持开源项目。安装yarn add @wangeditor/editor-

内容提要图像img标记语法及属性设置方法。设置图像热区链接。滚动文字marquee标记语法及属性设置方法。背景音乐bgsound标记语法及属性设置方法。嵌入多媒体文件embed标记语法及属性设置方法。采用超链接插入动画、音频和视频类多媒体文件。图像网页上插入图像的方法就是使用<img>标记。它的众多属性可以控制图像的路径、尺寸和替换文字等各种功能。...

Angular布局模板bootstrap是通用的css库，angular发布了自己的css库——angular material design。angular material design官网是https://material.angular.io 。国内的ant design of anular，官网是https://ng.ant.design 。Angular：面向组件的设...

今天学习创建Angular工程的时候遇到了障碍，跟着教学视频先安装Angular运行环境时遇到很多坑。我在此将安装angular运行环境的过程记录下来供后来的同学参考。首先说明：我的系统是win10，以下安装过程是在win10下进行的。注意：以下所有命令都是在“管理员身份运行powershell”下执行的。安装node.js首先安装node.js，这个安装非常简单，建议去官网h...

一、Flex布局要领Flexible Layout：弹性布局Bootstrap：栅格布局产品是做业务的，产品是为业务服务的。框架能满足百分之九十几的需求。CSS1：display:block;CSS2：display:table;CSS3：display:flex; display:box; display:grid;实践案例，设计如下图的页面：分析页面：整体是三...

移动互联网时代越来越凸显前端技术重要性！最近在学习万门教育的WEB全栈工程师零基础特训班课程。第一讲 基本知识点以京东网站讲解网站案例。看网站页面先看布局，了解共性。从大处着眼、小处着手。整个页面都是一行行元素构成。每一行大小不一、内容多寡不一，每一行里面有很多组件。整体风格一致，对称布局。布局模板常用的有2种：flex弹性布局bootstrap栅格布局做网页首...