前端
关注
分享
扫一扫
文章平均质量分 64
学习前端知识
隐形喷火龙
十多年互联网从业经验，一个有创意的全栈程序员
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
搭建TypeScript单元测试环境
我们在学习TypeScript的时候如果能够搭建一个单元测试的环境，那写些demo会很简单，下面我们使用jest来搭建一个单元测试环境。在 tsconfig.json 中（ctrl F 搜索 types 配置项，解开注释，并配置)初始化 ts 环境，执行下面命令，自动生成 tsconfig.json 文件。先新建一个空白项目，然后新建src目录，在src目录下新建index.ts。在src下新建tests目录，新建index.test.ts。安装 jest babel 下的 ts 环境，用来支持 ts。原创 2025-04-23 13:45:42 · 640 阅读 · 0 评论 -
element ui--下拉根据拼音首字母过滤
我们来看下重点代码,需要开启filterable,然后重写filter-method方法，el-option的key要用id,不要用index,否则某些输入会导致select重渲染导致输入框里面的值丢失。companyFilter就比较简单了,把包含输入项，或者起始是拼音首字母的过滤出来，赋值给filterCompanyList。很多场景下我们的下拉不仅仅要根据选项中的字过滤，还要根据拼音首字母过滤，现在我们来实现下。下面的代码可以获取companyName的拼音，返回的是数组，不包含声调。原创 2024-12-25 16:57:08 · 670 阅读 · 0 评论 -
高级组件封装技巧--tree的封装
el-tree是一个经常用到的组件，但是它不支持v-model,使用起来很麻烦，这篇教程封装了el-tree,使得它使用起来很简单，并且支持搜索，支持叶子节点横向排列，这样就算数据多了，也会显的很紧凑,同时它支持提交halfCheck节点，这点在做菜单管理的时候很有用，如果数据中不保存halfCheck，你需要向上遍历父节点，但是保存了父节点在回显的时候会有问题，因为只要父节点选中子节点都会选中，这些在组件封装中都做了处理。原创 2024-09-04 17:01:46 · 885 阅读 · 0 评论 -
高级组件封装技巧--按钮的封装
我们做一些重要操作的时候，往往需要弹窗一个提示框，告诉用户这是一个需要小心的操作，是否继续，用户点击确定后才会开始执行，这种操作写起来比较繁琐，如下所示，要写一堆代码，今天我来讲解下组件的高级封装技巧，让你一行代码搞定有弹出框的点击操作。原创 2024-08-13 15:08:02 · 847 阅读 · 0 评论 -
js日期处理库--dayjs
返回指定时间的开始或结束,这在某些日期查询里面很有用，比如查结束日期往往要传那天的23:59:59,就可以用endOf('day')来实现。这个功能在发布文章，发布消息时很有用，我们在看评论时可以看到发布在多少时间前，这个用day.js可以轻松实现。如果超出这个范围，它会进位到年份。使用format函数来格式化日期，支持的格式化字符见下表。接受1到31的数字。如果使用的是element plus,可以直接使用。返回增加一定时间的复制的 Day.js 对象。返回减去一定时间的复制的 Day.js 对象。原创 2024-08-09 13:32:25 · 1712 阅读 · 0 评论 -
从零开始学Vue3--井字棋
今天的教程是一个综合案例，在这个案例中你将学会如何创建组件，如何监听事件，如何在组件间传值，如何定义计算属性，如何循环渲染，如何条件渲染等。原创 2024-05-30 09:42:58 · 563 阅读 · 1 评论 -
从零开始学Vue3--根据目录结构自动生成路由
我们在测试或者小项目中经常遇到一个问题，就是加一个页面，就要在router.js中加一个路由，相当的麻烦，有没有办法可以根据目录结构自动生成路由呢？原创 2024-05-29 16:28:40 · 1192 阅读 · 1 评论 -
从零开始学React--JSX
是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。所以JSX看起来像HTML，但是语法比HTML严格，比如只允许一个根节点，所有标签必须闭合，class属性要改成className等，参见JSX最强大的地方是可以在HTML里面写js代码。原创 2024-05-29 14:48:27 · 626 阅读 · 0 评论 -
从零开始学React--环境搭建
由于我们需要一个纯洁的测试环境，所以需要清理掉不需要的代码，src文件夹下只需要保留App.js和index.js。Home组件可以写链接，这样有几个测试页面就有几个链接，要加个测试页面加个链接就能跳转过去了。上面的方式有个缺点就是只能在一个文件上面测试，如果想在多个文件测试需要用到路由。新建几个文件,page下面的文件表示页面组件，router表示路由数据。这样就能得到一个纯洁的项目可以直接在App.js里面做练习了。index.js改成如下代码。Article是测试页面。router是路由数据。原创 2024-05-28 13:54:12 · 802 阅读 · 0 评论 -
从零开始学Vue3--模板语法
Vue的核心是MVVM,也就是数据能够影响界面，界面也能影响数据，什么意思呢？比如有个输入框，它绑定的变量name,如果你改变了name的值，输入框显示的值就会变化，如果用户在输入框里面输东西,name对应的值也会变化vue3推荐使用组合式API，在script上加setup表示里面的变量和方法可以暴露给模板使用ref方法可以让值变成响应式对象，一般用来包裹基本数据类型，要取值的话要加个value来取值,reactive用来包裹对象类型让该对象变成响应式。原创 2024-05-24 15:36:59 · 496 阅读 · 0 评论 -
从零开始学Vue3--环境搭建
使用脚手架创建项目根据你的需要选择对应选项进入新建的项目下载依赖启动项目。原创 2024-05-24 13:26:29 · 796 阅读 · 0 评论 -
前端组件高级封装技巧--纯干货
基于配置生成页面有个最大的缺陷是不够灵活，只要需求有点变动就要修改生成方法，比如前提表格都是文字，那你配置文件里面只要配置字段名就行了，但如果表格里面要显示图片，麻烦就来了，你要在配置文件里面加个类型，然后改动生成逻辑，如果如上图所示还要再表格里加个按钮，我估计你头都要大了。按照设计模式来说，这种方式违反了开闭原则。对于前端的小伙伴来说，最常见的工作就是写后台管理系统的页面，而后台管理系统最多的操作就是CRUD了，类似下面的，一个搜索框，一个表格，一个分页，然后点击新增编辑有个弹框。原创 2023-08-16 09:58:43 · 849 阅读 · 0 评论 -
极简Vue3教程--Pinia状态管理
Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词；Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API（Composition API）。从那时到现在，最初的设计原则依然是相同的，并且目前同时兼容Vue2、Vue3，也并不要求你使用Composition API；Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）；原创 2023-03-03 14:28:08 · 1807 阅读 · 0 评论 -
极简TypeScript教程--面向对象
我们可以声明类的属性：在类的内部声明类的属性以及对应的类型,如果类型没有声明，那么它们默认是any的；类中可以有自己的函数，定义的函数称之为方法；在TypeScript中，类的属性和方法支持三种修饰符： public、private、protected,public 修饰的是在任何地方可见、公有的属性或方法，默认编写的属性就是public的；这就是面向接口开发；枚举类型是为数不多的TypeScript特性有的特性之一：枚举其实就是将一组可能出现的值，一个个列举出来，定义在一个类型中，这个类型就是枚举类型；原创 2023-02-21 15:14:20 · 1555 阅读 · 0 评论 -
极简TypeScript教程--高级类型
传入给一个联合类型的值是非常简单的：只要保证是联合类型中的某一个类型的值即可,但是我们拿到这个值之后，我们应该如何使用它呢？在JavaScript开发中，函数是重要的组成部分，并且函数可以作为一等公民（可以作为参数，也可以作为返回值进行传递），我们可以编写函数类型的表达式（Function Type Expressions），来表示函数类型；联合类型是由两个或者多个其他类型组成的类型,表示可以是这些类型中的任何一个值,联合类型中的每一个类型被称之为联合成员。联合类型（Union Type）原创 2023-02-21 10:22:26 · 1304 阅读 · 0 评论 -
极简TypeScript教程--数据类型
TypeScript最大的特点就是有类型检测，格式为这样msg这个变量就有了字符串类型,如果再给他赋值为数字类型，就会在编译期报错。原创 2023-02-17 14:30:23 · 1315 阅读 · 0 评论 -
极简TypeScript教程--简介及环境搭建
JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是。TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码；类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。原创 2023-02-17 09:48:15 · 1342 阅读 · 0 评论 -
uniapp实战(三) -- 小程序微信登录
小程序微信登录的核心是围绕着openId来的，对于每个用户在这个小程序中都有一个唯一的openId来标识用户的身份，但是出于安全考虑，小程序是无法获得openId的，只能获得code,把这个code传给后台，后台根据code,appid,appsecret去获取openid,然后用这个openid来跟用户进行绑定，这样通过code-openid-用户信息的方式，小程序只需要传给后台code就能获取到用户的信息了。原创 2022-09-15 11:03:24 · 2859 阅读 · 0 评论 -
uniapp实战(二) -- 注册小程序，UniApp设置
登录进去后在开发-开发管理里面找到AppID和生成AppSecret,这两个信息很重要，需要记录下来。拿到AppId后，打开uniapp中的manifest.json,进行配置。然后选择小程序，注册小程序需要使用邮箱，一个邮箱只能绑定一个小程序。如果这个小程序不止一个开发者，可以在成员管理-项目成员中添加开发者。填写完成后进行邮箱激活，然后输入个人信息进行注册。微信小程序的管理在微信公众平台进行,点击右上角立即注册进行注册。以后登录只需要用微信扫码即可。原创 2022-09-14 11:48:28 · 3177 阅读 · 0 评论 -
uniapp实战(一) -- 自定义导航栏
首先来看下导航栏结构,红色框叫状态栏,小程序和APP有，h5则没有，蓝色部件叫导航栏，绿色部分叫胶囊按钮，只有小程序有。原创 2022-09-06 16:50:22 · 8259 阅读 · 0 评论 -
极简flex布局
flex布局flex布局又称弹性布局,是一种新型的布局方式，相比传统的div+float布局，使用更为简单，功能更为强大，对于不需要太考虑浏览器兼容性的后台管理系统，H5,APP是布局的第一选择。开启弹性布局在容器上加上display:flex就能开启弹性布局，该容器就被称为flex container,第一层子元素则是flex item.我们用以下代码讲解<html> <body> <div class="container"> <d原创 2022-05-11 17:03:49 · 2172 阅读 · 1 评论