阿波blog

基于 Vue 3 的瀑布流布局实现(AI依据代码生成 Blog)背景瀑布流布局是一种广泛应用于图片、内容展示的方式，尤其在展示动态加载内容时。本文将基于 Vue 3 实现一个简易的瀑布流布局，支持动态加载和随机生成图片。 代码实现1. 项目结构组件模板采用 Vue 3 的 <script setup> 形式实现。主要部分包括： 模板结构：定义基本的瀑布流布局框架。 脚本逻辑：计算列数、动态加载内容、监测滚动事件。 样式设计：通过 CSS 实现列和单元的布局。 2. 代码详解模板部分<template> <div id="container" ref="container"> <slot name="empty"></slot> <div class="container-content"> <div class="column-item" v-for="i in get ...

常用网站,工具,等等收藏– 收藏夹好网站😋 俄区TNT-Mac软件 俄区学习版Mac软件 学习版游戏大作😄 PC switch 学习版,你懂得 免费vip视频 可恶爱优腾,看这个免费Vip 效率工具 snipaste 截图+贴图 uTools 可插拔综合工具 fiddler 抓包工具 charles 青花瓷也是抓包工具 parsec 免费无人远程控制工具 LICEcap 古老实用开源录制gif工具 在线工具 cubic-bezier贝塞尔曲线运动预览 easings 贝塞尔曲线预制函数 + 场景预览 tinypng 压缩图片的一哥 css_sprite 根据精灵图生成 css 代码 sprite-generator 散图打包生成精灵图神器 gif-to-jpg 转换 GIF 动画文件的每一帧至 JPG 文件 jsont 在线格式化 json，提供多种展示方式(还是推荐用 uTools 装插件，这个临时用可以) alltoall 在线文件格式转换平台 paletton 配色方案设计师(简单粗暴算法配色) dribbble 设计灵感 sukoutu-ps 在线 PS 小工具 svg ...

作为一个码农, 一台趁手的电脑是必须的, 而敲代码,哪个系统最舒服,还得是 MacOS但是白果果它贵呀, 加个内存固态 , 什么…要1500.我的天, 垃圾佬永不为奴. 初接触初接触到黑苹果, 还是上大学那个时候, 那个时候还是 Mac snow leopard, 真是一转眼好多年过去了, 网上冲浪,误入论坛社区. 从此打开新大陆, 原来还能这么玩.从最开始的 变色龙 到 clover 再到现在的 OpenCore 一路断断续续, 走过来. 真是见证了整个黑苹果的发展. 不过感觉也快接近尾声了, 现在苹果都不用x86的intel CPU以及AMD的显卡了, 以后可能成为绝唱了. 安装我现在工作用的笔记本,还是多年以前的Hp-zhan66八代低压U,这么多年还在服役, 现在用最新Ventura已经开始卡了,一方面可能是CPU确实拉跨, 另一方, 也是跟苹果系统现在负优化有关喽 🐶头保命. 屋里的台式机, 倒是更新换代过, 从7代到10代. 显卡也换过好几张, 从gtx1060 到 rx588 再到 rtx2060s, 当年还是有NVIDIA的web驱动的.可惜随着MacOS的更新 ...

什么是构建 构建工具，最终的目标都是转化开发环境的代码为生产环境中可用的代码。在不同的前端项目中使用的技术栈是不一样的。不同的框架、不同的样式处理方案等，为了生产出生产环境可用的 JS、CSS，构建工具实现了诸如：代码转换、代码压缩、tree shaking、code spliting 等。 Webpack 五个核心概念 Entry 指定 webpack 打包的入口 Output 指定 webpack 打包资源的存放位置 Loader 让 webpack 能够处理非 JavaScript 文件, 用于对模块的代码转换，如将 Typescript 转为 Javascript、将 less、sass 转为 css、将.vue、.tsx 等文件转为 js、css 等。 Plugins可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等, 解决 loader 无法实现的其他事 mode指定 webpack 当前的构建环境类型。设置mode可以自动触发webpack内置的函数，达到优化的效果 Loader和Plugin的区别Loader 模块导出一个运行 ...

基础符号| ：满足左右两边的表达式 []：原子表，只能匹配一个，存在于内，如：[a-z]在a-z的写字母中、[124-5]在1、2、4、-、5中 ()：原子组，存在于内，如：(12|34)在12、34中； ^ $：起始 结束，常配合完整验证(因为正常情况下匹配不到就停止)；单独内部使用^为非，如：[^\d]表示除了数值 {}：位数，如：{3,5}表示3-5位、{3}表示3位 \d：一个数值，\D非数值 \b：元字符，通常原来间隔英文单词，如：/\b adic \b/ \s：空白，\S非空白 \w：字母数字下划线 +：一个或多个 *：没有或多个 ?: 有或者没有 .：除换行外任意字符 i g m u：大小写不敏感 全局 多行匹配 特殊处理 基础方法match(),将字符串根据正则拆分为数组，不会改变字符串本身var str = 'hsakjd55ad4asda645'console.log(str.match(/\d/g))//(6) ["5", "5", "4", & ...