前端开发博客-CSDN博客

转载 10张脑图带你快速入门Vue3 | 附高清原图

前言这个月重新开始学习Vue3目前已经完结第一部分：基础部分我将所有内容吸收整理成10张脑图，一来快速入门Vue3，二来方便以后查看脑图应用实例和组件实例1应用实例和组件实例.png模板语...

2021-08-04 08:30:00 48092 7

转载 Vue3.0七大亮点

大家好，我是漫步，Vue3.0出来了一段时间，刚出来时，我翻译过几篇文章，可以看看：第一篇：Vue 3.0 中令人激动的新功能：Composition API第二篇：Vue 3.0 中令人...

2021-07-31 22:30:57 49308

转载 8张JS 基础思维图，超详细！

大家好，我是漫步，之前我分享过8张JS思维图、面试思维图，今天再次分享八张JS基础的思维图，希望对你有所帮助。1. javascript变量2. javascript运算符3. javas...

2021-07-12 08:48:41 52507 3

原创前端程序员简历模板整理和下载

大家好，我是漫步端午安康，今天晚上抽奖了，去看看参与一下吧。昨天分享了关于制作简历的一些建议，总的来说有这几个方面要点要记住：排版工整：不要出现错别字，版面清晰，段落自然，字体适中，简洁工...

2021-06-14 16:08:26 73776 28

原创前端程序员简历制作建议

大家好，我是漫步，今天来分享一下前端程序员简历该怎么写昨天的抽奖活动还在进行中，去看看吧排版工整好的简历，万里挑一，HR 每天要看上百份简历，一份排版工整、段落错落有致、文字简洁分明的简历...

2021-06-13 23:58:09 50648 10

原创太酷了，纯 CSS 实现微软、谷歌和苹果的官方 Logo！

最近，我看到很多前端开发者用纯 CSS 重现各种经典 Logo，这简直是太酷了！这些作品不仅展示了 CSS 的强大功能，更体现了前端开发者的创意和技巧。微软LogoMicrosoft Logo 非常简单，非常适合刚开始学习 CSS 的新手。image.png<bodytranslate="no"><divclass="logo"><divclass=...

2024-07-05 08:30:59 489

作为前端开发者，我们不仅致力于创造视觉吸引且交互性强的应用界面，还必须将应用安全放在首位。跨站脚本攻击（XSS）是网络安全的重大威胁之一，它允许攻击者将恶意脚本注入到我们的应用中，这可能导致用户数据被盗、用户被重定向到诈骗网站，甚至我们的用户界面遭到破坏。理解XSS攻击设想一个社交媒体平台，用户可以发布动态和评论。一个看似无害的评论，包含有趣的文本或表情符号，可能隐藏着恶意脚本。这就是XSS攻击的...

2024-07-04 10:10:18 966

原创 Vue 中的三种 Props：模板 Props、配置 Props 和状态 Props

Vue 里有个很重要的东西，就是 Props。Props 是用来在 Vue 组件之间传递数据的，就像你把东西从一个盒子搬到另一个盒子一样，从父组件传到子组件。但你知道吗？Props 也有不同的类型，它们的功能可不一样呢！主要有三种类型：模板 Props配置 Props状态 Props（也叫数据 Props）接下来，我们就来详细了解一下这三种 Props，看看它们到底有什么区别，以及在什么情况下应该...

2024-07-03 08:30:29 848

原创一学就会，教你创建和使用 CSS 变量！

作为一名 Web 开发者，我一直致力于寻找提高代码质量和效率的方法。最近，我迷上了 CSS 变量，它让我的样式表焕然一新，也让我对 CSS 的理解更上一层楼。相信很多开发者都遇到过这样的情况：随着网站或 Web 应用规模的增长，样式表也越来越庞大，各种颜色、字体大小、间距等值在不同的样式规则中重复出现，维护起来简直是噩梦。为了解决这个问题，我尝试过 Sass、Less 和 CSS 模块等工具，它们...

2024-07-02 08:29:36 504

原创 JavaScript 字符串处理：trim()和replace()

字符串操作是编程的基础技能。在 JavaScript 中，你经常需要处理字符串，其中一项常见任务就是修剪字符。修剪指的是移除字符串开头和/或结尾的特定字符，例如空格、制表符、换行符或逗号。你可能还想移除程序中不需要的特定字符，并用其他字符替换它们。本文将介绍一些在 JavaScript 中修剪和移除字符串字符的方法。使用trim()方法移除空格trim()方法是 JavaScript 内置的...

2024-07-01 12:34:45 627

原创 Vue Router 结合组合式API：构建流畅单页应用的利器

哈喽大家好，今天来聊聊 Vue Router，它是 Vue.js 官方的路由引擎，能让你的单页应用（SPA）拥有丝滑般的导航体验。为什么用单页应用？在开始之前，先简单说说为啥现在都流行用单页应用 (SPA)。传统的多页应用 (MPA) 每次跳转页面都要重新加载整个网页，速度慢，体验差，就像看幻灯片一样，一卡一卡的。image.png而单页应用 (SPA) 只在第一次加载时加载所有资源，之后就只...

2024-06-28 08:03:14 938

原创 HTML DOM 是如何影响性能的？

你用 Lighthouse 测量过网站性能吗？你可能见过“避免过多的 DOM 节点”的警告，就像下面这样：image.pngLighthouse 提醒我们，DOM 节点太多会增加内存使用量，还会导致样式计算很耗时。再加上网站上其他各种操作，这会显著影响用户体验，尤其是那些使用低端设备的用户。前几天，我在看自己网站的性能报告时，就注意到了这个警告。不过，吸引我注意的不是 DOM 元素的总数，而是它下...

2024-06-27 07:47:02 993

原创 Vue 开发者必备技能：深入理解 Composition API ！

作为一名 Vue 开发者，你可能也曾纠结过：到底应该使用 Composition API 还是继续使用 Options API 呢？毕竟，Vue 3 已经发布了，Composition API 也成为了官方推荐的写法。我的答案和 Vue 官方文档的说法一致：除非你的项目非常小或者简单，否则请使用 Composition API 而不是 Options API。为什么这么说呢？这篇文章会带你深入了...

2024-06-26 18:19:55 789

原创 Nuxt2 即将停止更新！倒计时5天！

哎，有点伤感，Nuxt 2 就要告别了！虽然它陪伴我们走过了很长时间，见证了各种网站的诞生，但技术都在进步嘛，它也到了该“退休”的时候了。记得 2018 年 Nuxt 2 发布的时候，一下子就成了主流框架，很多开发者都用它做了很多很棒的网站，我当时也是其中一员。不过，时间过得真快，现在 Vue 2 都已经停止维护了，Nuxt 3 已经很成熟了，生态系统也发展起来了，所以 Nuxt 团队决定把主要精...

2024-06-25 14:38:00 443

原创 10 个必备的JavaScript 实用技巧和最佳实践！

嘿，各位开发者！准备好了让你的 JavaScript 代码更上一层楼吗？????今天就来聊聊一些必备的 JavaScript 技巧和最佳实践，无论你是初学者还是经验丰富的开发者，这些技巧都能帮你写出更优雅、更强大的代码！准备好你的咖啡，我们一起开始学习吧！ ☕️1. 用Promise.all()取代await还记得我们以前总是让代码一个一个地执行吗？现在有了 Promise.all()，可以让...

2024-06-24 10:00:00 955

原创 2024 年 10 个很实用的 CSS 新特性，你不一定知道！

CSS 既简单又复杂。刚开始学起来很容易，但 CSS 不断更新，设计方法也在变化，总有新的功能和特性出现来解决旧问题。这可真是个让人又爱又恨的家伙！最近几年，CSS 涌现出很多新特性，让网页设计变得更强大、更灵活。今天就来聊聊一些比较实用，并且已经得到广泛支持的新特性，帮助你提升网页设计的技能，做一个更牛的 web 设计师！aspect-ratio: 轻松控制元素比例aspect-ratio属性...

2024-06-23 16:20:48 1099

转载 10个 React 开发避坑指南

说真的，谁还没遇到过这种事？你兴冲冲地加入一家新公司，面试的时候公司吹得天花乱坠，让你毅然决然地辞掉了上一份工作。结果，一周的“假期”过后，你开始正式工作，却发现代码像一团乱麻，各种奇葩的解决方案，缺乏规范，简直让人崩溃！你看着代码心想：这到底是什么鬼？我完全看不懂，也不敢轻易修改，生怕改错一个地方就全盘崩溃。虽然这种情况可能不像你想的那么常见，但其实比你想象的还要普遍。为了避免这种挑战，开发...

2024-06-21 09:08:08 37

转载 12 种 Vue 设计模式

设计模式，说白了就是写代码的“套路”。用好了，你的代码就能更健壮，更易于维护。几乎所有应用都会遇到一些共性问题，设计模式就像一个宝库，提供了很多经过验证的解决方案。可关于 Vue 中的设计模式，很多人都说不清道不明。尤其是 Vue 独有的设计模式，更是少有人提及。今天，我就来给大家分享 12 种 Vue 设计模式，每个模式都附带一个简单的例子，让你快速上手！这只是个开胃菜，想要深入学习，还需要花更...

2024-06-20 22:17:57 145

转载 CSS 秘密武器：25 个小技巧，助你写出更优雅的代码！

大家好！我是宝哥！今天来跟大家分享 25 个 CSS 小技巧，这些可是我多年经验积累下来的宝贵财富，能让你的代码更简洁、更优雅，开发效率蹭蹭蹭地往上飙！1. 垂直水平居中大法还记得以前为了让一个元素在容器里居中，要写一大堆代码吗？现在，使用 Flexbox 就能轻松搞定！.container{display:flex;justify-content:center;/*水平居中...

2024-06-19 10:10:32 56

转载 Vue 3 表单大揭秘：用 ref、组合式 API 和 v-for 打造你的专属表单！

大家好！我是前端宝哥。今天，我们将一起学习如何使用 Vue 3 的新特性构建一个更加灵活、可扩展的动态表单。传统的表单开发通常需要编写大量的重复代码，例如处理用户输入、验证数据、更新 UI 等等。为了简化开发，我们可以借助 Vue 3 的新特性，例如组合式 API 和ref对象。使用ref对象管理表单数据在 Vue 3 中，我们可以使用ref对象来管理表单数据，方便地进行数据绑定和更...

2024-06-18 17:30:49 64

原创 JavaScript 的新技能：5 大技巧，打造更强大的 Web 应用

大家好，我是前端宝哥。JavaScript 在现代 Web 开发中简直是必不可少的工具！它一直在不断变化，为我们带来新玩法。今天就来跟大家聊聊 5 个顶尖的 JavaScript 技术，教你用更酷炫的方式构建 Web 应用！为什么 JavaScript 这么受欢迎？JavaScript 灵活又强大，它可以用来做各种事情，几乎是无处不在！它可以创建那些超级酷炫的动态网页，例如实时更新、各种交互功...

2024-06-17 20:13:06 911

原创程序员必备：9 个超赞的速查表网站，2024 年开发效率翻倍！

大家好，我是前端宝哥。说真的，程序员每天都要查阅各种文档和资料，如果能有一份速查表，那真是太方便了！不用每次都去翻书，也不用到处搜索，效率蹭蹭蹭地就上来了！今天就给大家推荐 9 个超赞的速查表网站，涵盖各种编程语言、框架、工具，你需要的都在这里！1. Quickref：全能速查表网站Quickref 简直是速查表的宝库，它包含了 31 种编程语言、10 个工具包、5 个数据库，几乎你能想到的都有！...

2024-06-16 15:55:45 589

原创 Tailwind CSS v4.0 Alpha 发布：更快、更强大、更现代！

大家好，我是前端宝哥。太棒了！ Tailwind CSS 终于发布了 4.0 版本的 Alpha 版本！还记得去年夏天在 Tailwind Connect 大会上，他们分享了 Oxide 的预告吗？这个全新的高性能引擎是 Tailwind CSS 的全新升级，旨在简化开发体验，并充分利用近年来 Web 平台的发展。原本计划作为 v3.x 版本发布的 Oxide，最终进化成了 v4.0。因为这个...

2024-06-15 22:08:36 745

原创 Vue 状态管理：从Vuex到Pinia，Vue 3官方推荐的状态管理库深度解析

大家好，我是前端宝哥。在编程界有句老话：“命名和缓存失效是世上两大难题。” 我得说，在现代Web应用的状态管理上，这难题得排第三！今天，咱们来深挖一下Vue的状态管理之道，并介绍一个超直观的解决方案——Pinia。Vue状态管理：那些坑和局限性自Vue 2起，我们用data属性来定义组件的状态，就像这样：<template><div>{{user.name}}&l...

2024-06-14 22:46:32 1032

原创一个神奇的变量！CSS 中的 infinity：无限可能？

大家好，我是前端宝哥。最近发现 CSS 中居然有infinity这个神奇的常量，感觉脑洞大开，各种奇思妙想都涌现出来了！ ???? 来，咱们一起研究一下，看看它除了“无限可能”之外，还能带来哪些实际应用吧。小贴士：infinity只能在calc()函数里使用哦。永不败北的z-index之战你有没有遇到过这种情况：你想要一个元素永远在最上面，结果z-index数字越改越大，像是在跟谁比...

2024-06-13 09:21:50 432

转载前端面试，已经开始问AI了？

谁都没想到，今年前端招聘的爆发期不在金三银四，而是在5月之后！前几天跟大厂的朋友也聊起这事，他说5月只是一个开始，6月后放出的岗位会更多，但随之而来是新的岗位要求！对于前端，虽然Vue3.0、React框架技术点和面试题很重要，但现在只懂几个框架源码远远不够了。听朋友说，接下来的前端开发，将围绕「新质生产力」趋势展开，大厂面试会问到好几个新方向：面试题1：企业级前端【低代码开发平台】的应用与实践（...

2024-06-13 09:21:50 36

原创 Nuxt 4：一个更加完善、更加强大的 Vue 全栈框架

大家好，我是前端宝哥。哇！Nuxt 今年真是大丰收！???? 看到 Nuxt 团队分享的回顾和展望，我对 Nuxt 的未来充满了期待！2023 年，Nuxt 3 真的交出了一份亮眼的成绩单：GitHub 上 49,5K 星标，npm 上 2700 万次下载，612 位贡献者…… 这些数字都表明 Nuxt 越来越受欢迎，社区也越来越活跃！Nuxt 3 在过去一年中取得了许多突破，例如推出了 Nuxt Im...

2024-06-12 08:04:17 1183 1

原创尤雨溪又出新品了！VuePress 的升级版，更快、更灵活，构建更强大的网站！

大家好，我是前端宝哥。哇！VitePress 终于发布 1.0 版本了！????一直关注 VitePress 的小伙伴应该都知道，它是一款专门用来构建快速、内容为中心的网站的静态网站生成器 (SSG)，简单来说就是把你的 Markdown 文档变成美观的网页。VitePress 基于 Vite 和 Vue 构建，可以说是 VuePress 的升级版，更强大、更灵活，当然也更现代啦！VitePress 能...

2024-06-11 08:03:54 580 1

原创微软 Edge 推出 "WebUI 2.0"：从 React 到 Web Components + HTML，速度提升了42%

大家好，我是前端宝哥。微软 Edge 最新版本基于 Chromium 浏览器内核，并且进行了重大更新，其中一个重要的改变是减少对 React 的依赖，转而使用以 HTML 为先的 Web Components 技术。结果如何？速度飞升！微软表示，新版 Edge 的浏览器基本功能界面响应速度更快，对于 Edge 用户来说，速度提升了 42%，而对于那些没有 SSD 或者内存小于 8GB 的设...

2024-06-10 10:01:08 869

原创掌握插槽魔法，助你进阶 Vue 开发，赋予组件无限可能！

大家好，我是前端宝哥。插槽，就像一个魔法口袋，可以让你轻松地把内容塞到组件里，不用再费劲地用 props 传递。什么是插槽？在 React 中，你可以用children属性把 JSX 代码塞进组件，但这样操作不太方便。//父组件<blog-list><p>我的文字在这里</p></blog-list>functionBlogList...

2024-06-09 10:02:25 586

原创怎么才能做出一个牛逼的Vue 组件库？

大家好，我是前端宝哥。最近总有人问我： “宝哥，怎么才能做出一个牛逼的组件库？” 其实，打造一个优秀的组件库并不难，你需要关注的重点是：功能、美观、易用、兼容和可维护性。美观很重要，但别忘了功能首先，组件库要好看，要让人眼前一亮。当然，光好看还不够，功能要强大，要能真正解决开发者的痛点。如果你想打造一个独一无二的组件库，记得先想清楚你的目标用户是谁，他们需要什么样的功能，然后才能开始设计和开发...

2024-06-08 10:01:48 825

原创别再用错 localStorage 了！小心踩坑！

大家好，我是前端宝哥。在 Web 应用的客户端存储领域，localStorage API 凭借其简洁性和广泛支持，成为了开发者们的心头好。它就像一个小巧的本地仓库，让你能够直接在用户的浏览器中存储少量数据。这篇文章将带你深入了解 localStorage API 的方方面面，包括它的优势、局限性，以及在现代应用中可用的其他存储选项。localStorage 是什么？localStorage API...

2024-06-07 09:17:51 1021

转载再见了 Vue 3，前端AI已成气候！

谁都没想到，今年前端招聘的爆发期不在金三银四，而是在5月之后！前几天跟大厂的朋友也聊起这事，他说5月只是一个开始，6月后放出的岗位会更多，但随之而来是新的岗位要求！对于前端，虽然Vue3.0、React框架技术点和面试题很重要，但现在只懂几个框架源码远远不够了。听朋友说，接下来的前端开发，将围绕「新质生产力」趋势展开，大厂面试会问到好几个新方向：企业级前端【低代码开发平台】的应用与实践（平台工具）...

2024-06-07 09:17:51 43

原创 Vite 为什么这么火？

大家好，我是前端宝哥。最近，Vite 真是火得不行，几乎每天都能看到关于它的讨论。这个工具到底有多厉害？它为什么这么火？自从 2020 年 4 月发布以来，Vite 的人气一路飙升。在 GitHub 上已经获得了 64k+ 的星标，每周的下载量更是超过了 1200 万次！现在很多热门的框架，比如 Nuxt, SvelteKit, Astro, SolidStart 还有 Remix 等等，都用 ...

2024-06-06 17:42:14 943

原创最新 Vue 生态系统及工具链大盘点

大家好，我是前端宝哥。自2014年2月 Vue 问世以来，它已经成为了JavaScript界的明星，是构建和维护Web应用的顶级框架之一。Vue之所以受到许多开发者的青睐，是因为它简单易学、性能优异，而且非常灵活，非常适合用来搭建各种规模的应用。选择Vue来构建你的应用后，下一步就是挑选合适的工具和库来帮你快速开发。多年来，Vue不断推陈出新，比如引入了Composition API，为开发生态...

2024-06-05 10:10:54 823

转载 2024已过半，Web前端还有机会吗?

最近不少朋友在后台留言抱怨，“前端工程师人太多了，工作太难找了”。现在前端不像前几年，动不动就有新技术的出现，各个大厂都在向着精细化方向做探索。也因此，企业的用人要求越来越高。技能跟上发展，前端不会死。觉得工作不好找，可能要从自身业务水平上找找原因了。谁掌握得更深、应用得更好，谁就更容易脱颖而出。因此，我联系了几位大厂前端技术专家，整理出品了一套非常实用的前端八股——《2024大厂前端进阶面试合集...

2024-06-05 10:10:54 41

原创 Vue 神器，支持自动生成路由，从此告别繁琐的手动路由配置！

大家好，我是前端宝哥。还在为手动配置 Vue.js 路由而烦恼吗？随着项目越来越大，管理路由变得越来越复杂，一不小心就会出错。别担心，现在有了unplugin-vue-router这个神器，可以帮你自动生成路由，轻松搞定路由配置！unplugin-vue-router是什么？unplugin-vue-router是一个 Vue.js 构建时插件，它可以利用 TypeScript 自动生成...

2024-06-04 09:00:39 1172

原创网页加载卡顿？试试 HTML 的新武器 blocking 属性！

大家好，我是前端宝哥。在网页开发的世界里，我们常常把渲染阻塞视作“洪水猛兽”，总想着如何避免它。随便一搜，就能发现大量关于消除渲染阻塞的技巧和建议。但有趣的是，HTML 现在引入了一个名为 blocking 的新属性，它允许我们有意识地控制渲染的阻塞，直到特定的资源加载完毕。通常，如果没有 async 或 defer 属性，<script> 标签会暂停 HTML 的解析，并且阻塞页面渲...

2024-06-03 09:00:21 842 1

转载前端6月面试速刷葵花宝典，689页PDF！

最近正值跳槽热潮，我与一位在大厂做前端开发的技术大牛朋友聊天，他透露今年的面试趋势已经不仅限于考察基本的八股文了，而是越来越多地聚焦于实际项目中所应用的框架和技术、以及相关的算法难题。现在的情况已经和前几年完全不一样了，以前随便写写简历，背诵几周八股文就可以去参加面试，现在估计一面都过不了。为了帮助大家快速了解现在的面试动向，我整理了一份《2024 前端面试通关秘籍》，内含前端八股文+热门大厂真题...

2024-06-03 09:00:21 24

原创 Vue 小技巧：何时使用可组合函数

大家好，我是前端宝哥。在Vue 3中，引入了一种新的API——Composition API，它带来了一种全新的组件编写方式。其中，可组合函数（Composable functions）是Composition API的核心特性之一，它允许开发者以一种可重用的方式封装逻辑。下面，我将通过一个扩展和优化的段落，帮助读者更好地理解何时应该使用可组合函数，以及何时不应该使用。首先，我们需要明确什么是可组...

2024-06-02 10:35:11 395

教学计划编制问题（实验报告）我自己做过，喜欢就下吧

空空如也