目录form结构修改el-form-item所有样式只修改label只修改content只修改input只修改button总结 form结构 <el-form :model="formData" label-width="80px"> <el-form-item labe...[2022/11/17]

目录在echarts 中实现渐变的具体几种方式方式一：方式二：colorStops总结 在echarts 中实现渐变的具体几种方式 在我们日常使用Echarts图表过程中，会遇到一些要求我们的echarts图表能实现颜色渐变，以下几种方式就能满足你的需求。文档参考 ECharts option ...[2022/11/17]

目录正文什么是 Tree Shaking寻找 Tree Shaking 的机会防止 Babel 将 ES6 模块转换为 CommonJS 模块留意 side effects只导入你需要的更复杂的情况总结 正文 随着 web 应用复杂性增加，JS 代码文件的大小也在不断的攀升，截住 2021年9月...[2022/11/17]

耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接： 链接: https: pan.baidu.com 1PD-Sts-e...[2022/9/20]

目录情景再现使用泛型泛型类型泛型接口泛型类泛型约束在泛型里使用类类型[]高级案例 情景再现 这里针对一种情况，也是非常常见的一种情况：那就是 function identity(arg: number): number { return arg; } 就是我接收一个num...[2022/9/20]

目录基本定义声明数组时直接初始化访问数组Array对象声明数组时指定数组大小两种定义方式声明多维数组(含泛型)普通版泛型版类数组数组解构通过接口描述数组数组迭代 基本定义 声明数组时直接初始化 基本定义 let arr:number[] = [1,2,3]; let arrS: st...[2022/9/20]

目录前言1.没有使用严格模式我们为什么要使用严格模式？2. 使用 || 确定默认值那它应该是什么样子的呢？3.使用any作为类型为什么要这么做呢？为什么不能用any？4. val 作为 SomeType强制告诉编译器它无法推断的类型。这就是类型守卫的用途。5. any在测试用例中的表现在编写测试时6...[2022/9/15]

目录前言什么是Concurrent React？设置项目实现 useTransition()isPending 是做什么的？ 前言 React 18 引入了一个关键的新概念，称为“Concurrent”。 并发涉及同时执行多个状态更新，这可以说是 React 18 中...[2022/9/15]

目录一、基本使用二、路由跳转2.1 Link 组件2.2 NavLink 组件2.3 编程式跳转三、动态路由参数3.1 路径参数路径匹配规则兼容类组件3.2 search 参数四、嵌套路由5.1 路由定义5.2 在父组件中展示5.3 在组件中定义五、默认路由六、全匹配路由七、多组路由八、路由重定向九...[2022/9/15]

目录前言第一种：父向子传值新建文件导入结构引入 注册 使用子组件子组件内部代码完善父组件内部代码完善操作main.js文件思路总结 前言 大家好，这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路。最常见的vue组件传值分为三种，第一种是父向子传值，第二种是子向父传值，第三种是兄弟组件...[2022/9/15]

目录在for循环中使用var声明初始化带来的问题解决方法使用闭包使用let变量初始化for循环怎么处理用let和var声明的初始化变量？总结 在for循环中使用var声明初始化带来的问题 一道经典面试题： var funcs = []; for (var i = 0; i < 3;...[2022/9/15]

目录前言ES5与ES6的区别1. 作用域2. 全局属性3. 变量提升与暂时性死区4. 重复声明let与const的区别1. 常量最佳实践 前言 JavaScript中一共有3种用来声明变量的关键字，分别是var、let和const。 其中var关键字是ES5时代的产物，由于ES5对变量的约束...[2022/9/15]

目录文章目标P6P6+ ~ P7一、背景二、前端路由特性三、面试！！！四、Hash 原理及实现1、特性2、如何更改 hash3、手动实现一个基于 hash 的路由五、History 原理及实现1、HTML5 History 常用的 API2、pushState/replaceState 的参数3、H...[2022/9/15]

目录前端状态管理出现的意义及解决的问题Vuex 源码解读Vuex 公共方法Vuex 介绍及深入使用Vuex 使用（官网）1、基本框架2、基本使用3、State3.1 mapState 辅助函数4、Getter4.1 通过属性访问4.2 通过方法访问4.3 mapGetters 辅助函数5、Mutat...[2022/9/15]

目录背景UI 组件容器组件connect()mapStateToProps()mapDispatchToProps()组件实例：计数器 背景 在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库 如果将两者连接在一起，可以使用官方...[2022/9/15]

目录1、借助ES6提供的Set结构 new Set() 简单好用 强烈推荐2、利用 filter() 去重3、利用for 循环 搭配 indexOf 去重4、将数组的每一个元素依次与其他元素做比较，发现重复元素，删除 比较繁琐 不推荐5、借助新数组 通过 indexOf 方法判断当前元素在数组中的索...[2022/9/1]

目录Number对象是什么静态属性实例方法Number.prototype.toString()Number.prototype.toFixed()Number.prototype.toExponential()Number.prototype.toPrecision()Number.prototy...[2022/8/31]

目录Vuex获取getter对象中的值1.直接从根实例获取2.使用mapGetters取值3.使用module中的getter计算属性获取的getter值需要刷新才能更新描述解决 Vuex获取getter对象中的值 getter取值与state取值具有相似性 1.直接从根实例获取 m...[2022/8/31]

目录TypeScript定义变量变量声明格式变量类型推导JS和TS的数据类型TS中使用JS的数据类型number类型boolean类型string类型Array类型Object类型Symbol类型null和undefined类型TS自身特有的数据类型any类型unknown类型void类型never...[2022/8/31]

本文实例为大家分享了React封装弹出框组件的方法，供大家参考，具体内容如下 效果图 文件目录 alertList.tsx 用于容纳弹出框的容器 import React from "react"; export const HAlertList = ...[2022/8/23]

本例基于react实现了一个简单的确认弹窗，可以让我们在项目中根据需要随时调用 创建全局modal组件 此处我将弹窗模态框独立出来，用户可以通过传入组件或Element来填充模态框的内容。 import ReactDOM from ''react-dom''; import React...[2022/8/23]

目录前言分析 asyncAdd直观的基本要求隐藏的考察点 — setTimeout & cb隐藏的考察点 — async & await实现 asyncAdd具体实现进行优化抽离内层函数缓存计算结果 前言 在掘金上发现一道既简单但个人觉得还挺有意思的一道题...[2022/8/23]

本文实例为大家分享了react-native弹窗封装的具体代码，供大家参考，具体内容如下 上图 仿苹果弹窗组件（android+ios均可用） 以上效果均基于本文的弹窗组件，后续将会介绍上面的组件，也可基于改组件定制更多组件 安装依赖 yarn add react...[2022/8/23]

目录使用vue-video-player无法播放本地视频方法使用vue-video-player播放视频及遇到的问题安装引入 使用vue-video-player无法播放本地视频 方法 因为引入的是本地资源，要把资源写在“require”方法里 ? sources...[2022/8/23]

目录一、预备知识：二、创建项目步骤：三、启动项目时可能出现的报错：四、Todolist项目相关库：五、GitHub搜索案例相关库：六、尚硅谷路由案例相关库：七、UI库案例相关库：八、redux相关库： 一、预备知识： npm (也可以用yarn，本文以npm为例) npm介绍 全称为Nod...[2022/8/23]

React Hook实现对话框组件，供大家参考，具体内容如下 准备 思路：对话框组件是有需要的时候希望它能够弹出来，不需要的时候在页面上是没有任何显示的，这就意味着需要一个状态，在父组件点击按钮或其他的时候能够更改+ 它并显示，同时子组件（对话框组件）点击关闭的时候也需要更改这个状态。 &...[2022/8/23]

目录引言遇到的困境1. 如何表达渲染结果？2. 如何测试并发环境？React的应对策略实现一个渲染器如何测试并发环境？总结 引言 React18进入大家视野已经有一段时间了，不知道各位有没有尝试并发特性呢？ 当启用并发特性后，React会从同步更新变为异步、带优先级、可中断的更新。 这也...[2022/8/23]

JavaScript实现鼠标移动事件画笔小游戏，供大家参考，具体内容如下 实现功能 鼠标点击时可以在画板上画画如果鼠标双击那么停止移动进画板颜色改变移除时颜色改变 <!DOCTYPE html> <html lang="en"> ? <head> ...[2022/8/23]

目录一、使用场景二、补充组件注册三、深度解析 Vue.extend()虽然已近用过很多次了，但都没有深入思考过这个东西，仔细想了想，有点意思 一、使用场景 按需使用组件，也叫懒加载，性能蹭蹭往上走 扩展的组件，其自由度高到你无法想象 二、补充组件注册 平日里，我们使用组件： ...[2022/8/23]

本文实例为大家分享了js实现登录弹框，供大家参考，具体内容如下 html: <body> ? ? <div id="M"><!--用div将所有东西套起来,需要设置绝对位置--> ? ? <input type="button" valu...[2022/8/23]

目录1.不允许直接修改2.存在异步的情况解决思路 经过测试父组件中传递过来的数据有以下特点： 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜，我父组件的瓜岂是你能变的，父组件重新渲染时，这个...[2022/8/23]

本文实例为大家分享了vue实现二级弹框的具体代码，供大家参考，具体内容如下 二级弹框案例，如下图所示 <template> ? ? <div cla ="zw-dialog"> ? ? ? ? <div cla ="zw-top"> ?...[2022/8/23]

目录深度优先遍历多层数组对象比如树结构是这样的vue遍历包含数组的对象请求来拿到后数据格式是下面这种最终在html中这样遍历 深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的话可以拿到爷爷Id，自己Id，父亲Id；其实如果想要拿到label的话就把data.id换成data.label...[2022/8/23]

目录一、计算属性1、插值语法实现2、通过方法实现3、通过计算属性二、监视属性三、深度监视 一、计算属性 在开发中，可以有这样的需求，在属性（date）中，有fistName和lastName两个属性，需要将两个属性拼接起来，这种需求也很简单，有以下实现方式 1、插值语法实现 直接在bod...[2022/8/23]

目录对数组和对象进行遍历和修改1、对数组进行循环2、 修改数组的时候，不能直接通过下标去增加修改删除3、对对象进行循环4、增加对象的时候修改数组和对象的特殊情况以及修改方法修改数组的两个特殊情况修补方法 对数组和对象进行遍历和修改 1、对数组进行循环 v-for进行循环，有两个参数（item...[2022/8/23]

目录v-for循环遍历图片的方法解决方法如下vue循环显示多个图片小扩展（require 和 import） v-for循环遍历图片的方法 写项目时，遇到后台无法提供背景图片，需要自己在本地循环遍历到页面上，并和后台数据一起展示的需求 解决方法如下 resourceList是后台传...[2022/8/23]

本文实例为大家分享了使用js实现复制功能的具体代码，供大家参考，具体内容如下 复制 1.遍历复制(for in) 特征：不修改引用关系（原来的属性还在），仅能复制字符属性，Symbol不能复制，不可枚举属性不能复制，原型链不能复制。浅复制 2.JOSN.parse(JSON.stri...[2022/8/23]

目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是它的所有用法你是否全部理解呢？本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。 什么是插槽 简单来说就是子组件中的提供给父组件...[2022/8/23]

目录引言背景1背景2commonjses modules总结 引言 最近在项目中使用了typescript + rollup，满心欢喜测试打包结果的时候，发现打包出来的文件竟然无法运行，具体报错如下： throw new ERR_INVALID_ARG_TYPE(''superCto...[2022/8/23]

目录前言安装挂载VuexPinia修改状态vuexPiniaPinia解构(storeToRefs)gettersPiniaVuexmodulesPiniaVuex写在最后 前言 Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用...[2022/8/23]

目录引言Proxy对象是什么使用Proxy写一个简单的数据驱动视图 引言 上大学的时候，最流行的框架是JQuery，它是事件驱动类型的，也就是说，当一个数据与DOM的某个内容相关联的时候，我需要在这个数据改变之后，去操作DOM来进行同步： <div id="data">数据<...[2022/8/22]

目录一、配置vite二、router路由1、安装router路由2、配置router路由3、注册router路由4、使用router路由三、安装element plus等其他依赖1、注册element plus并配置图标四、pinia使用     &...[2022/8/22]

目录引言_renderProxy是干什么的initProxy方法总结 引言 之前的文章提到，Vue实例化时_init方法做了很多处理，其中就有这么一段： if (__DEV__) { initProxy(vm) } else { vm._renderProxy = vm } ...[2022/8/22]

目录rollup介绍以命令行方式打包Tree ShakingRollup 的命令行使用命令行format 格式rollup.config.js设置/获取环境变量插件 plugins rollup介绍 开源类库优先选择以 ESM 标准为目标的构建工具Tree Shaking 以命令行方式打包 ...[2022/8/22]

目录正文v-model 正文 首先我们来看一段代码： <input value="value"> 这里是一个原生的input输入框，每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据。 如果我们想要获取到这个值我们可以通过input.targe...[2022/8/22]

目录前言语法参数返回值使用示例方法实现1、当只扁平化一层的时候2、当数组展平的层数为最大层时3、数组扁平化使用参数控制扁平的深度总结 前言 flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 语法 var newArray =...[2022/8/22]

今天面了家小公司，上来直接问 computed 底层原理，面试官是这样问的，data 中定义了 a 和 b 变量。computed 里面定义了 c 属性，c 的结果依赖与 a 和 b，模板中使用了变量 c。假设改变了 a，请问底层是如何收集依赖，如何触发更新的？ <div>{<...[2022/8/22]

目录引言例一例二总结 引言 相信很多人都用过proxy，这里就不多说proxy的基本使用，这里要说一下很多人使用proxy的一个误区，大家一般都是直接将管官方的例子拿过来，修改一下代理目标直接就是用了，但是代理的路径匹配你真的会用么？ 如果你能够认证看完那么我保证你下次再配置代理的时候就能一...[2022/8/22]

1、登录页登录成功时将服务端返回的标识存放起来 2、在router中给不需要登录的页面设置 meta : { auth : false }，如首页  3、使用路由前置守卫beforEach，由于给路由设置了meta : { auth : false }，如果是符合该属...[2022/8/22]

目录一、每个 Vue 实例都实现了事件接口二、注意事项三、例子及说明 四、总说明 一、每个 Vue 实例都实现了事件接口 即： 1、使用 $on(eventName) 监听事件 2、使用 $emit(eventName, optionalPayload) 触发事件 二、注意...[2022/8/22]