Loading...
最近，我看到很多前端开发者用纯CSS重现各种经典Logo，这简直是太酷了！这些作品不仅展示了CSS的强大功能，更体现了前端开发者的创意和技巧。微软LogoMicrosoftLogo非常简单，非常适合刚开始学习CSS的新手。image.png<bodytranslate="no"><divclass="logo"><divclass=...
Vue 如何防止 XSS 攻击？
作为前端开发者，我们不仅致力于创造视觉吸引且交互性强的应用界面，还必须将应用安全放在首位。跨站脚本攻击（XSS）是网络安全的重大威胁之一，它允许攻击者将恶意脚本注入到我们的应用中，这可能导致用户数据被盗、用户被重定向到诈骗网站，甚至我们的用户界面遭到破坏。理解XSS攻击设想一个社交媒体平台，用户可以发布动态和评论。一个看似无害的评论，包含有趣的文本或表情符号，可能隐藏着恶意脚本。这就是XSS攻击的...
Vue 中的三种 Props：模板 Props、配置 Props 和 状态 Props
Vue里有个很重要的东西，就是Props。Props是用来在Vue组件之间传递数据的，就像你把东西从一个盒子搬到另一个盒子一样，从父组件传到子组件。但你知道吗？Props也有不同的类型，它们的功能可不一样呢！主要有三种类型：模板Props配置Props状态Props（也叫数据Props）接下来，我们就来详细了解一下这三种Props，看看它们到底有什么区别，以及在什么情况下应该...
一学就会，教你创建和使用 CSS 变量！
作为一名Web开发者，我一直致力于寻找提高代码质量和效率的方法。最近，我迷上了CSS变量，它让我的样式表焕然一新，也让我对CSS的理解更上一层楼。相信很多开发者都遇到过这样的情况：随着网站或Web应用规模的增长，样式表也越来越庞大，各种颜色、字体大小、间距等值在不同的样式规则中重复出现，维护起来简直是噩梦。为了解决这个问题，我尝试过Sass、Less和CSS模块等工具，它们...
JavaScript 字符串处理：trim()和replace()
字符串操作是编程的基础技能。在JavaScript中，你经常需要处理字符串，其中一项常见任务就是修剪字符。修剪指的是移除字符串开头和/或结尾的特定字符，例如空格、制表符、换行符或逗号。你可能还想移除程序中不需要的特定字符，并用其他字符替换它们。本文将介绍一些在JavaScript中修剪和移除字符串字符的方法。使用trim()方法移除空格trim()方法是JavaScript内置的...
Vue Router 结合组合式API：构建流畅单页应用的利器
哈喽大家好，今天来聊聊VueRouter，它是Vue.js官方的路由引擎，能让你的单页应用（SPA）拥有丝滑般的导航体验。为什么用单页应用？在开始之前，先简单说说为啥现在都流行用单页应用(SPA)。传统的多页应用(MPA)每次跳转页面都要重新加载整个网页，速度慢，体验差，就像看幻灯片一样，一卡一卡的。image.png而单页应用(SPA)只在第一次加载时加载所有资源，之后就只...
HTML DOM 是如何影响性能的？
你用Lighthouse测量过网站性能吗？你可能见过“避免过多的DOM节点”的警告，就像下面这样：image.pngLighthouse提醒我们，DOM节点太多会增加内存使用量，还会导致样式计算很耗时。再加上网站上其他各种操作，这会显著影响用户体验，尤其是那些使用低端设备的用户。前几天，我在看自己网站的性能报告时，就注意到了这个警告。不过，吸引我注意的不是DOM元素的总数，而是它下...
Vue 开发者必备技能：深入理解 Composition API ！
作为一名Vue开发者，你可能也曾纠结过：到底应该使用CompositionAPI还是继续使用OptionsAPI呢？毕竟，Vue3已经发布了，CompositionAPI也成为了官方推荐的写法。我的答案和Vue官方文档的说法一致：除非你的项目非常小或者简单，否则请使用CompositionAPI而不是OptionsAPI。为什么这么说呢？这篇文章会带你深入了...
Nuxt2 即将停止更新！倒计时5天！
哎，有点伤感，Nuxt2就要告别了！虽然它陪伴我们走过了很长时间，见证了各种网站的诞生，但技术都在进步嘛，它也到了该“退休”的时候了。记得2018年Nuxt2发布的时候，一下子就成了主流框架，很多开发者都用它做了很多很棒的网站，我当时也是其中一员。不过，时间过得真快，现在Vue2都已经停止维护了，Nuxt3已经很成熟了，生态系统也发展起来了，所以Nuxt团队决定把主要精...
10 个 必备的JavaScript 实用技巧和最佳实践！
嘿，各位开发者！准备好了让你的JavaScript代码更上一层楼吗？????今天就来聊聊一些必备的JavaScript技巧和最佳实践，无论你是初学者还是经验丰富的开发者，这些技巧都能帮你写出更优雅、更强大的代码！准备好你的咖啡，我们一起开始学习吧！☕️1.用Promise.all()取代await还记得我们以前总是让代码一个一个地执行吗？现在有了Promise.all()，可以让...
2024 年 10 个很实用的 CSS 新特性，你不一定知道！
CSS既简单又复杂。刚开始学起来很容易，但CSS不断更新，设计方法也在变化，总有新的功能和特性出现来解决旧问题。这可真是个让人又爱又恨的家伙！最近几年，CSS涌现出很多新特性，让网页设计变得更强大、更灵活。今天就来聊聊一些比较实用，并且已经得到广泛支持的新特性，帮助你提升网页设计的技能，做一个更牛的web设计师！aspect-ratio:轻松控制元素比例aspect-ratio属性...
10个 React 开发避坑指南
说真的，谁还没遇到过这种事？你兴冲冲地加入一家新公司，面试的时候公司吹得天花乱坠，让你毅然决然地辞掉了上一份工作。结果，一周的“假期”过后，你开始正式工作，却发现代码像一团乱麻，各种奇葩的解决方案，缺乏规范，简直让人崩溃！你看着代码心想：这到底是什么鬼？我完全看不懂，也不敢轻易修改，生怕改错一个地方就全盘崩溃。虽然这种情况可能不像你想的那么常见，但其实比你想象的还要普遍。为了避免这种挑战，开发...
12 种 Vue 设计模式
设计模式，说白了就是写代码的“套路”。用好了，你的代码就能更健壮，更易于维护。几乎所有应用都会遇到一些共性问题，设计模式就像一个宝库，提供了很多经过验证的解决方案。可关于Vue中的设计模式，很多人都说不清道不明。尤其是Vue独有的设计模式，更是少有人提及。今天，我就来给大家分享12种Vue设计模式，每个模式都附带一个简单的例子，让你快速上手！这只是个开胃菜，想要深入学习，还需要花更...
CSS 秘密武器：25 个小技巧，助你写出更优雅的代码！
大家好！我是宝哥！今天来跟大家分享25个CSS小技巧，这些可是我多年经验积累下来的宝贵财富，能让你的代码更简洁、更优雅，开发效率蹭蹭蹭地往上飙！1.垂直水平居中大法还记得以前为了让一个元素在容器里居中，要写一大堆代码吗？现在，使用Flexbox就能轻松搞定！.container{display:flex;justify-content:center;/*水平居中...
Vue 3 表单大揭秘： 用 ref、组合式 API 和 v-for 打造你的专属表单！
大家好！我是前端宝哥。今天，我们将一起学习如何使用Vue3的新特性构建一个更加灵活、可扩展的动态表单。传统的表单开发通常需要编写大量的重复代码，例如处理用户输入、验证数据、更新UI等等。为了简化开发，我们可以借助Vue3的新特性，例如组合式API和ref对象。使用ref对象管理表单数据在Vue3中，我们可以使用ref对象来管理表单数据，方便地进行数据绑定和更...
JavaScript 的新技能：5 大技巧，打造更强大的 Web 应用
大家好，我是前端宝哥。JavaScript在现代Web开发中简直是必不可少的工具！它一直在不断变化，为我们带来新玩法。今天就来跟大家聊聊5个顶尖的JavaScript技术，教你用更酷炫的方式构建Web应用！为什么JavaScript这么受欢迎？JavaScript灵活又强大，它可以用来做各种事情，几乎是无处不在！它可以创建那些超级酷炫的动态网页，例如实时更新、各种交互功...
程序员必备：9 个超赞的速查表网站，2024 年开发效率翻倍！
大家好，我是前端宝哥。说真的，程序员每天都要查阅各种文档和资料，如果能有一份速查表，那真是太方便了！不用每次都去翻书，也不用到处搜索，效率蹭蹭蹭地就上来了！今天就给大家推荐9个超赞的速查表网站，涵盖各种编程语言、框架、工具，你需要的都在这里！1.Quickref：全能速查表网站Quickref简直是速查表的宝库，它包含了31种编程语言、10个工具包、5个数据库，几乎你能想到的都有！...
Tailwind CSS v4.0 Alpha 发布：更快、更强大、更现代！
大家好，我是前端宝哥。太棒了！TailwindCSS终于发布了4.0版本的Alpha版本！还记得去年夏天在TailwindConnect大会上，他们分享了Oxide的预告吗？这个全新的高性能引擎是TailwindCSS的全新升级，旨在简化开发体验，并充分利用近年来Web平台的发展。原本计划作为v3.x版本发布的Oxide，最终进化成了v4.0。因为这个...
Vue 状态管理：从Vuex到Pinia，Vue 3官方推荐的状态管理库深度解析
大家好，我是前端宝哥。在编程界有句老话：“命名和缓存失效是世上两大难题。”我得说，在现代Web应用的状态管理上，这难题得排第三！今天，咱们来深挖一下Vue的状态管理之道，并介绍一个超直观的解决方案——Pinia。Vue状态管理：那些坑和局限性自Vue2起，我们用data属性来定义组件的状态，就像这样：<template><div>{{user.name}}&l...
前端面试，已经开始问AI了？
谁都没想到，今年前端招聘的爆发期不在金三银四，而是在5月之后！前几天跟大厂的朋友也聊起这事，他说5月只是一个开始，6月后放出的岗位会更多，但随之而来是新的岗位要求！对于前端，虽然Vue3.0、React框架技术点和面试题很重要，但现在只懂几个框架源码远远不够了。听朋友说，接下来的前端开发，将围绕「新质生产力」趋势展开，大厂面试会问到好几个新方向：面试题1：企业级前端【低代码开发平台】的应用与实践（...
