title: Vue.js 动画与过渡效果实战 date: 2024/6/4 updated: 2024/6/4 description: 这篇文章介绍了如何在网页设计中使用过渡动画和组件效果，以及如何利用模式和列表展示信息。还提到了使用钩子实现组件间通信的方法。 categories: 前端开发 ...

以用户为中心的性能指标是理解和改进站点体验的关键点 一、以用户为中心的性能指标 1. 指标是用来干啥的？ 指标是用来衡量性能和用户体验的 2. 指标类型 感知加载速度：网页可以多快地加载网页中的所有视觉元素并将其渲染到屏幕上 加载响应速度：页面加载和执行组件快速响应用户互动所需的 JavaScrip... ...

背景：原先电脑上安装了vue2.0和node 14.17.6版本，后面新项目使用的是vue3.0和node 16.6.1。通过nvm 安装node 16.6.1的时候，不小心把原来的2.0环境给搞坏了。 目的：本文将通过文字描述(都是cmd命令，截图感觉没啥意义)的方式，讲述卸载和安装多版本node ...

随着Web应用变得越来越复杂，而jQuery的功能却显得过于简单，难以应对这些复杂的需求。比如，对于一些需要大量动态交互的应用程序，jQuery的功能并不足够强大。此外，由于jQuery所写应用的代码结构较为混乱，其中包含了大量的全局变量和函数，例如，全局变量"$"和"jQuery"都指向了jQue... ...

基于React的SSG静态站点渲染方案 静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用CDN等方案以更低的成 ...

传统实现方式 当前文章的gif文件较大，加载的时长可能较久 这里我拿小红书的首页作为分析演示 可以看到他们的实现方式是传统做法，把每个元素通过获取尺寸，然后算出left、top的排版位置，最后在每个元素上设置偏移值，思路没什么好说的，就是算元素坐标。那么这种做法有什么缺点？请看下面这张图的操作 容器 ...

title: Vue渲染函数与JSX指南 date: 2024/6/3 下午6:43:53 updated: 2024/6/3 下午6:43:53 categories: 前端开发 tags: Vue渲染 JSX基础 性能优化 组件对比 React JSX 大项目 测试策略 第1章：Vue.js入门 ...

使用 Vite 快速搭建脚手架 命令行选项直接指定项目名称和想要使用的模板，Vite + Vue 项目，运行（推荐使用yarn） # npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, 需要额外的双横线： npm init ...

Vue3简单项目流程分享——工作室主页 零、写在最前 以下是项目相关的一些链接： 源代码GitHub仓库（需要魔法上网）：仓库 网页示例（需要魔法上网）：网页示例 UI图（来源@设计师杨贺）：MasterGo主页 补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。 如果你 ...

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定 FormCreate官网：https://www.form-create.com ...

初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。具体来说，虚拟滚动只渲染用户浏览器视口部分的文档数据，而不是整个文档结构，其核心实现根据可见区域高度和容器的滚动位置计算出需要渲染的列表项，同时不渲染额外的视图内容。虚拟滚动 ...

title: Vue.js 动态组件与异步组件 date: 2024/6/2 下午9:08:50 updated: 2024/6/2 下午9:08:50 categories: 前端开发 tags: Vue概览 动态组件 异步加载 性能提升 路由管理 状态控制 工具生态 第1章 Vue.js 简介 ...

从零学习Vue.js 目录 引言 准备工作 Vue.js 基础 3.1 Vue 实例 3.2 模板语法 3.3 数据绑定 3.4 计算属性和侦听器 3.5 Class 与 Style 绑定 3.6 条件渲染 3.7 列表渲染 3.8 事件处理 3.9 表单输入绑定 Vue.js 组件 4.1 组件基 ...

title: Vue插槽与作用域插槽 date: 2024/6/1 下午9:07:52 updated: 2024/6/1 下午9:07:52 categories: 前端开发 tags: VueSlot ScopeSlot 组件通信 Vue2/3插槽 作用域API 动态插槽 插槽优化 第1章：插槽 ...

一、背景 在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 两栏布局 两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器 这里称宽度较小的列父元素为 ...

XML Web服务是基于WSDL、SOAP、RDF和RSS等标准的网络应用程序组件技术。WSDL描述服务接口和消息格式，SOAP用于结构化信息交换，RDF描述网络资源，RSS则用于发布网站更新。Web服务特点是自包含、自描述，基于开放协议，可重用且能连接现有软件。WSDL文档包含`types`、`m... ...

title: vue3组件通信与props date: 2024/5/31 下午9:00:57 updated: 2024/5/31 下午9:00:57 categories: 前端开发 tags: Vue3组件 Props详解 生命周期 数据通信 模板语法 Composition API 单向数据 ...

一、是什么 单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建 在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象，如下图所示： ...

为什么会突然想到写这么一个大杂烩的博文呢，必须要从笔者几年前的一次面试说起。当时的我年轻气盛，在简历上放了自己的博客地址，而面试官应该是翻了我的博客，好几道面试题都是围绕着我的博文来提问。其中一个问题，直接使得空气静止了五分钟，也是自从那次面试，我告诉自己，工作实战中总结的经验，一定要知其然知其所以... ...

Unix 时间戳是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数，不考虑闰秒。 以下2个方法源自于时间工具包：time utils 效果展示：在线时间戳转换工具 时间转时间戳 /** * 将某个时间转化成时间戳 * 时间格式：2019-05-20 00:00:00 或 2019年5月1 ...