鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

账号设置退出

前端

2.6w内容

关注

分享前端领域的前沿热点、技术实战、框架应用和使用案例，为开发者学习前端技术提供参考。

文章博文帖子课程

共 715 条

vue3和vue2的比较

最近开始切入vue3的学习，处于在3和2的过渡阶段中，有时候用了3的写法，有时候用了2的写法，走火入魔了属于是，于是想写一篇文章，做一次全面的比较，给自己一个总结，希望经过本文，加一时间沉淀，我可以信誓旦旦说我熟练vue2/3生命周期整体来看，变化不大，只是名字大部分需要+ on，功能上类似。使用上 Vue3 组合式 API 需要先引入，而 Vue2 选项 API 则可直接调用，如下所示。

2022-04-19 00:05:21

Vue基础知识总结(三):快速构建Vue项目

?个人主页：程序员阿红(https://blog.51cto.com/u_13902521)??支持我：点赞?收藏⭐️留言?1.什么是VuecliVuecli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能Vuecli背后集成了现代化开发的诸多功能,通过简单的命令就可以完成"零配置"的项目环境搭建2.安装Vuecli步骤在安

2022-04-15 15:39:35

node.js 服务端 javascript

vue 性能监控分析

我们在浏览网站的时候，不可避免的需要消耗自身计算机资源，比如带宽、cpu、存储等等，这些资源会随着访问时间的延长而产生一定的数据碎片，在我们没有关闭浏览器的时候，这些碎片会一直存在的，那么作为开发者我们开发的网站是否优质，是否对用户计算机负担小，打开是否未低时延这些就是我们用来衡量网站是否卓越的指标了。vue作为一款很卓越的前端开发框架，开发起来很舒服，那性能怎样呢？这个时候就需要使用性能检测相关

2022-04-15 00:12:46

初始化重定向时间戳

在nodejs中事件循环分析

在上一篇文章[在chromev8中的JavaScript事件循环分析]()中分析到，在chrome中的js引擎是通过执行栈和事件队列的形式来完成js的异步操作。然而在node中，事件循环表现出的状态与浏览器中大致相同。不同的是node中有一套自己的模型。node中事件循环的实现是依靠的libuv引擎。我们知道node选择chrome v8引擎作为js解释器，v8引擎将js代码分析后

2022-04-11 22:07:37

事件循环 v8 javascript

在chromev8中的JavaScript事件循环分析

JavaScript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程，JavaScript代码在执行的任何时候，都只有一个主线程来处理所有的任务。非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起pending这个任务，然后在异步任务返回结果的时候再根据一定规

2022-04-09 00:40:10

执行栈主线程任务队列

vue在浏览器中对DOM渲染探究

“世间万物都由分子构成。用气将万物的分子打散，分解眼前事物，再将分子重组，在短暂的瞬间，可以凝成时空停顿，甚至逆转时空。”这句熟悉的电影台词想必大家能猜出是哪一招武林绝学吧？是的，万事万物无时无刻不在变化，譬如与我们息息相关的DOM树，用“气”将树打散，再将树重组，我们的页面就动起来了！Vue渲染流程vuejs有两个阶段：编译时和运行时。编译时我们平常开发时写的.vue文件是无法直接运行在

2022-04-06 23:52:40

css html 重绘

浅析$nextTick和$forceUpdate

vue中提供了数十种api供我们开发者日常使用，而常用的其实也就十多种，比如setup, mount, forceupdate, nextTick, compute, ref等，这些参数有的是在生命周期中进行管理，有的是在页面执行过程中，更新参数，有些是可以用来检测页面数据，这些随着项目的推进或多或少都是会使用到。其中nextTick

2022-04-05 21:30:01

数据事件循环重绘

动态资源技术JSP｜Java与Html的美好相遇

你想要的动态Web资源技术JSP，这里都有，万字长文带你一睹Java与Html的美好相遇！

2022-04-04 17:57:22

jsp页面服务器 JSP

使用APICloud AVM框架开发人事档案管理助手app实战

由于人事档案具有涉密性，所以本应用没有使用后台服务，全部功能都在APP本地实现。开发工具采用　APICloud Studio3，基于VSCode的（PS：比基于Atom的autio2好用太多）；数据库采用sqllite，没有使用UI框架，个人觉得AVM本身支持的flex布局配合自写CSS样式，完全可以实现市面上所有的ＵＩ框架的元素，这个取决于个人功力。一、项目思维脑图二、功能介绍１、人员花名册２、

2022-04-02 14:56:23

app开发 apicloud 项目实战

Vue基础知识总结(二)：进阶篇

1.0 MVVM模式MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。MVVM模式将页面,分层了 M 、V、和VM ,解释为：Model: 负责数据存储View: 负责页面展示View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示<body><div id="app">

2022-03-30 10:50:31

#yyds干货盘点# 一步步教你用taro封装一个公司库的下拉组件

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷前言歌谣歌谣如何封装一个公司库的一个组件需求介绍首先要实现的是1第一步需要在一个input框中输入字符当字符发生变化的时候进行接口的调用2超过两个字符开始

2022-03-24 09:26:02

taro ico 赋值

3分钟带你搞懂Vue双向绑定原理及问题剖析

快速搞懂Vue双向绑定原理~干货满满

2022-03-22 16:44:03

双向绑定 html 数组

使用Node.js、MongoDB、Fastify 构建API服务

文章从零开始介绍如果使用Node.js构建API、通过swagger完善API文档、postman测试API、pm2或者docker服务部署全过程

2022-03-19 22:20:54

mongodb node.js swagger

使用APICloud开发物流仓储app项目实践

一、前端思维导图二、项目原型图（UI图）初版原型地址墨刀原型链接《外贸类》，涉及的页面大概有20+，有兴趣可以去招人做一下UI。三、前端app项目创建1、前端APICloud后台（www.apicloud.com/console）创建app，创建混合的开发的app。2、下载调试工具自定义loader安装包自定义loader是一个安卓或iOS的安装包，可以装到收集端，从而进行js

2022-03-17 16:38:09

apicloud HTML5 vue

使用APICloud平台实现朋友圈功能

一、效果展示二、项目结构图以及用到的模块三、主要功能 1、下拉刷新上啦加载更多（mescroll.js） 2、点赞评论 3、导航背景透明渐变效果 4、图像预览（UIPhotoViewer） 5、图像压缩 6、定位附近地点（aMap） 7、图像批量上传四、功能点详解 1、下拉刷新和上拉加载我用的是 mescroll.js(自带图像懒加载，官方网站有详细使用说明文档) 实

2022-03-16 15:57:32

APICloud HTML5 JavaScript

【7000字】一晚上爆肝浏览器从输入到渲染完毕原理

前言Chromecomic，一本Chrome架构简要概述的漫画，Chrome架构于2008年同Chrome浏览器一起发布。!(https://s4.51cto.com/images/blog/202203/09175402_6228793abfc4d43268.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_F

2022-03-09 17:56:25

浏览器 JavaScript 渲染

JavaScript 数据处理 - 映射表篇

由于 JavaScript 的动态特性，其对象本身就是一个映射表，对象的「属性名⇒属性值」就是映射表中的「键⇒值」

2022-03-06 21:15:15

javascript 键值对数组

一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI

一分钟教会你使用Vuecli创建项目并整合ElementUI，全程高能，速速来看 ~

2022-03-05 21:39:48

node.js 创建项目 json

JavaScript 数据处理 - 列表篇

从 Array 类中提供的实例方法可以看出来，数组涵盖了一般的列表操作，增删改查俱全。除了日常的 CRUD 之外，最重要的就是对列表进行完全或部分遍历，拿到预期的结果。

2022-03-04 22:44:44

数组数据 javascript

浅谈：为什么vue和react都选择了Hooks?

一文带你领略 Hooks 的优点~

2022-03-01 22:54:43

vuejs react hooks

#yyds干货盘点# 内鬼消息：串联高频面试问题，值得一看！

前言开宗明义，本瓜深知汝之痛点：前端面试知识点太杂，卿总为了面试而面试，忘了记，记了又忘，循环往复，为此叫苦不迭。来，让本瓜带领各位都稍稍回顾一下，自己曾经在学生时代记忆元素周期表的光辉岁月。氢、氦、锂、铍、硼、碳、氮、氧、氟、氖、钠、镁、铝、硅、磷、硫、氯、氩、钾、钙、钪、钛、钒、铬、猛、铁、钴、镍、铜、锌......咱当初记这前三十位元素，是死记硬背的吗？答案是否定的，机智的我们用到了&nbs

2022-02-28 09:10:13

缓存服务器客户端

#yyds干货盘点# 前端模块化的全面总结

随着前端功能越来越复杂，前端代码日益膨胀，为了减少维护成本，提高代码的可复用性，前端模块化势在必行。

2022-02-27 23:50:39

#yyds干货盘点# CSS盒子模型

CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。

2022-02-25 08:15:47

盒模型 css 页面布局

前端SSR的落地实践

!图片(https://s4.51cto.com/images/blog/202202/22104833_62144f0151bda52909.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpd

2022-02-22 14:40:08

数据服务端客户端

「VS Code 整活」100行代码，写一个超实用的悬浮翻译插件

要说哪个插件对效率提升最大，可能各有推荐，各有千秋。但我要说对初学者，以及英文有亿点点差的同学来讲：翻译，是日常开发中必不可少的一环。在下找过N个`VSCode` 翻译插件发现一个神器：

2022-02-21 15:06:35

ide 插件开发 VS Code

#yyds干货盘点# 洋哥表单，看了都说好

洋哥表单，看了都说好。表单精心总结，快速掌握

2022-02-17 18:54:19

表单 HTML CSS

#yyds干货盘点#这一次，彻底搞懂Promise

彻底搞定Promise

2022-02-12 09:22:04

数据迭代数组

#yyds干货盘点# SAP UI5 batch 请求的响应解析流程分析

batch请求的回复：!(https://s4.51cto.com/images/blog/202202/10104156_62047b74dba8c78382.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3po

2022-02-10 10:42:29

json 字段数据

JavaScript 之 Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

2022-01-27 23:18:10

前端 JavaScript Proxy

APICloud AVM框架列表组件list-view的使用、flex布局教程

avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。 list-view 定义可复用内容的竖向滚动

2022-01-26 11:40:47

css 列表 avm.js

使用 React 和 Next.js 构建博客

Next.js 是由 Vercel 创建和维护的基于 React 的应用程序框架。本教程将从零开始学习如何使用 Next.js 构建一个小型的博客网站：

2022-01-22 21:18:38

html next.js react

使用APICloud AVM框架开发预约应用

前段时间跟朋友一起搞了一个预约的项目，前端用的APICloud的AVM框架做的，后端用的php开发的，用的tp5框架，没几天就搞出来了。简单跟大家分享一下开发中的一些功能点的实现吧。也欢迎大家一起探讨。一、整理项目脑图二、项目原型图原型是用的码前做的，大家可以通过www.devbefore.com/protomobile/47942983009476608查看三、项目前端本项目中前端采用A

2022-01-21 14:54:17

多端开发 app开发小程序开发

#私藏项目实操分享# SAP 电商云 Spartacus UI 的交货模式 Delivery Mode 设计

本文讨论SpartacusUIcheckout流程时，下图高亮的两种交货模式，DeliveryMode的数据来源：!(https://s4.51cto.com/images/blog/202201/21094219_61ea0f7b7aa0060876.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFF

2022-01-21 09:42:55

TypeScript JavaScript

#私藏项目实操分享# RxJs 操作符 withLatestFrom 在 SAP 电商云 Spartacus UI 中的应用

看下面这段代码：!(https://s4.51cto.com/images/blog/202201/20113916_61e8d964460c987385.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5

2022-01-20 11:39:46

数据数据类型 typescript

从零打造一个Web地图引擎

说到地图，大家一定很熟悉，平时应该都使用过百度地图、高德地图、腾讯地图等，如果涉及到地图相关的开发需求，也有很多选择，比如前面的几个地图都会提供一套js API，此外也有一些开源地图框架可以使用，比如OpenLayers、Leaflet等。那么大家有没有想过这些地图是怎么渲染出来的呢，为什么根据一个经纬度就能显示对应的地图呢，不知道没关系，本文会带各位从零实现一个简单的

2022-01-18 22:34:04

这8个JS 新功能，你应该去尝试一下

本文主要介绍几个已经进入stage4的提案，这几个提案有望在2022年逐步纳入标准。

2022-01-17 11:24:41

github javascript 开发语言

#yyds干货盘点# 数据结构与算法之JavaScript

几个常见JavaScript中的算法

2022-01-15 22:56:24

javascript 数据结构算法

Bootstrap实战 - 响应式布局

响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。

2022-01-12 10:25:30

bootstrap 导航栏 ico

使用APICloud开发app的性能提升实践

一、为什么说这个问题？首先我是一名前端开发者，使用过的开发方式有，APICloud、原生开发、自己混合打包开发。这些都是根据不同的业务需求，用不同的开发方式，有的只需要安卓开发的需求，有需要安卓和iOS开发的需求，还有一些要h5和安卓等等。根据这些就做了相应的研究。二、性能分析两个平台上代码,安卓原生代码。本次测试所用机型是XiaoMi Redmi K30 (1)安卓代码 MainAct

2022-01-04 17:42:31

APICloud Android App开发

#yyds干货盘点#7个场景让你深入理解min/max - width/height

创作不易，点个赞再看呗! 前言日常开发的时候，大家有么有遇到下面这种情况：设置一个盒子，但是我们不知道有没有内容，并且有多少内容我们也不能确定，而且又不想出现滚动条，这个时候我们就不能设置具体高度，但是我们可以设置min-height来用最小的高度撑开盒子，并且随着内容的多少，盒子的高度可以动态调整，这样是不是就满足了我们的要求。min/max 宽高这个我们不常用的属性，在某些时候还是能发挥奇效

2021-12-31 22:58:36

最小宽度属性值默认值

原生JavaScript灵魂拷问(二)，你能全部答对吗？#yyds干货盘点#

前言JavaScript之运算符篇16.你知道与&&的返回值规则吗？+短路效应：&&和都会发生短路+&&只有在两个操作数都为true时，条件判断的结果才为true，如果操作数一为false，不会判断操作数二。+两个操作数只要有一个为true，条件判断的结果就为true，因此操作数一为true时，不会判断操作数二。+返回值规则+和&&首先会对操作数一执行条件判断，如果不是布尔值就先强制转换为布尔类型

2021-12-31 14:43:25

灵魂拷问 JavaScript 基础

CSS实现一只自由飞翔的鸟儿?#yyds干货盘点#

?前言前几天在逛社区时，偶然发现一个非常赏心悦目得小鸟飞翔效果，并且是纯css实现的，具体可以看一下效果。!flybird.gif(https://s2.51cto.com/images/20211230/1640850656820522.gif)这不由让我大感惊奇，css的世界可谓是渊博如海，让人又爱又恨。我是一只小小小小鸟，想要飞呀飞却飞也飞不高，我寻寻觅觅寻寻觅觅一个，温暖的怀抱?????进

2021-12-30 15:51:38

css 飞翔的小鸟q 前端

原生JavaScript灵魂拷问，你能答上多少(一)#yyds干货盘点#

前言当下的前端开发，三大框架三分天下，框架的简单、强大让我们欲罢不能，使用原生JavaScript越来越少。但我认为JavaScript作为每一个前端工程师的立身之本，不止要学会，还要学好、学精，学再多遍都不为过。另一方面，前端面试中，越来越重视原生JavaScript的考察，其所占比例也越来越高。我抓取了牛客上今年的线上面试题和面经，大约500左右道题，原生JavaScript的难点(闭包，ev

2021-12-30 15:42:47

javascript 基础前端

#yyds干货盘点#Console 3000字完整指南，让你不只会用console.log !

创作不易，求一个免费的赞，谢谢啦！！！。前言为啥会突然想起写一篇关于console的文章？笔者接触JS也不少时间了，除了用vscode的debuger，其实大部分时间都在使用console.log()方法来输出一些或者调试程序，我相信很多刚开始接触JS的同志，应该也都习惯使用console.log()。但是log的能力是有限的，并不能满足所有的场景。比如我们相用表格数据对象。下面这张图

2021-12-29 23:39:58

数组 chrome 火狐浏览器

小程序自定义配置顶部栏#yyds干货盘点#

app.json "window": { "navigationStyle": "custom"//自定义需要配置的内容 },app.jsApp({ onLaunch: function () { // 获取顶部栏信息 wx.getSystemInfo({ success: res => { //导航高度 this.globalD

2021-12-29 18:42:25

自定义 ico xml

#私藏项目实操分享# Angular Change Detection 的学习笔记

Angular变化检测机制(https://blog.angularuniversity.io/howdoesangular2changedetectionreallywork/)比AngularJs中的等效机制更透明且更易于推理。但是在某些情况下（例如在进行性能优化时），我们确实需要知道幕后发生了什么。因此，让我们通过以下主题深入了解变更检测：如何实施变更检测？Angular变化检测器是什么样子

2021-12-29 11:05:01

typescript 变化检测应用程序

前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）

页面为何会卡？等待时间长？看起来卡？特别是对于首屏资源加载中的白屏时间，用户等待的时间就越长，用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出，“人类将被动等待高估了 36%”。这意味着用户感觉到的等待时间比开发工具记录的长得多。

2021-12-28 15:30:11

JavaScript 体验性能

《2w字大章 38道面试题》彻底理清JS中this指向问题 #yyds干货盘点#

前言当一个函数调用时，会创建一个执行上下文，这个上下文包括函数调用的一些信息(调用栈，传入参数，调用方式)，this就指向这个执行上下文。this不是静态的，也并不是在编写的时候绑定的，而是在运行时绑定的。它的绑定和函数声明的位置没有关系，只取决于函数调用的方式。本篇文章有点长，涉及到很多道面试题，有难有简单，如果能耐心的通读一编，我相信以后this都不成问题。学习this之前，建议先学习以下知识

2021-12-28 15:17:19

javascript 作用域 this

DevTools 实现原理与性能分析实战

本文通过分析 Chrome 的 DevTools 的技术实现，特别是在浏览器内核中的实现部分，来展示这款被万千开发者所喜爱的开发工具背后的秘密。本文适合阅读对象主要有前端开发者、有志于开发 Hybrid 应用调试工具或重写 webdriver 实现对 Chrome 或 WebView 控制的应用工程师。

2021-12-27 10:14:05

chrome javascript Web

#yyds干货盘点#还在用JS计数吗？来试试纯CSS计数器！！！

创作不易，点个赞再看呗! 关注专栏，让你走进CSS世界的深处前言不知道有多少人做过自己的博客，在生成文章目录的时候，有没有人是下图样式的：会在标题前面加上数字编号的，大部分的实现方案是什么呢？我一开始是在遍历的时候加上数字编号的，不过这样的JS代码很多。需要判断层级数很麻烦。直到我发现纯css的counter属性！计数器CSS的计数器通过在 content 上应用 counter() 或 cou

2021-12-26 23:23:00

重置 css 嵌套

上一页 1 ··· 5 6 7 8 9 ··· 15 下一页

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区 AI.x社区

教育

51CTO学堂精培企业培训 CTO训练营