找到
70
篇与
星野梦璃
相关的结果
-
《专注力受损的五大元凶与提升策略》文章解读 《专注力受损的五大元凶与提升策略》文章解读这篇文章基于科学实证，系统分析了当代人专注力受损的原因及相应的提升策略。一、专注力受损的五大元凶元凶影响机制应对策略手机即使静音，物理存在也会占用认知资源物理隔离，出视线范围（Out of sight, out of mind）成瘾社交媒体成瘾源于多巴胺驱动的"想要"而非"喜欢"增加获取难度，替换为高质量活动多任务大脑不擅长并行处理，频繁切换消耗精力避免共用同一认知通道情绪焦虑会挤占工作记忆识别情绪并积极解决ADHD属于神经发育障碍需专业诊断，切勿自我用药二、提升专注力的有效手段1. 基础健康运动、充足睡眠和抗炎饮食（多蔬菜、少加工食品）是最根本有效的方法2. 正念冥想训练对走神的觉察和纠偏能力需长期练习以改变大脑结构3. 辅助技巧嚼口香糖：可短期缓解警觉衰退听音乐：需视任务而定，深度阅读时应避免歌词4. 避坑指南舒尔特方格等商业训练缺乏迁移效果证据三、核心结论专注力受"人、事、场"三大因素影响，关键在于照顾好"人"——包括身心健康、习惯和情绪管理，而非依赖外部捷径。真正的专注力提升是系统性的生活方式改变，而非某个"神技巧"就能解决的。注：以上内容来源于对 https://sspai.com/post/108977 原文的分析。 -
daisyUI 常用组件速查（按使用频率排序） daisyUI 常用组件速查（按使用频率排序）基于：daisyUI🔥 第一梯队（高频核心组件）👉 后台 / 表单 / 页面核心1️⃣ Button（按钮）<button class="btn">默认按钮</button> <button class="btn btn-primary">主要按钮</button> <button class="btn btn-success">成功</button> <button class="btn btn-error">错误</button>常用组合<button class="btn btn-primary btn-sm">小按钮</button> <button class="btn btn-outline">描边按钮</button> <button class="btn btn-ghost">幽灵按钮</button> <button class="btn loading">加载中</button>2️⃣ Input（输入框）<input class="input input-bordered" placeholder="请输入内容">常用组合<input class="input input-primary" placeholder="主要输入框"> <input class="input input-error" placeholder="错误状态"> <input class="input input-bordered w-full" placeholder="全宽">3️⃣ Select（下拉框）<select class="select select-bordered"> <option>选项1</option> <option>选项2</option> </select>4️⃣ Textarea（多行输入）<textarea class="textarea textarea-bordered" placeholder="输入内容"></textarea>5️⃣ Checkbox / Radio（选择）<input type="checkbox" class="checkbox"> <input type="radio" class="radio">6️⃣ Card（卡片）<div class="card bg-base-100 shadow"> <div class="card-body"> <h2 class="card-title">标题</h2> <p>内容</p> <button class="btn btn-primary">操作</button> </div> </div>7️⃣ Alert（提示）<div class="alert alert-success">成功提示</div> <div class="alert alert-error">错误提示</div>8️⃣ Badge（标签）<span class="badge">默认</span> <span class="badge badge-primary">主要</span>9️⃣ Table（表格）<table class="table"> <thead> <tr><th>姓名</th><th>年龄</th></tr> </thead> <tbody> <tr><td>张三</td><td>18</td></tr> </tbody> </table>🔟 Modal（弹窗）<dialog id="my_modal" class="modal"> <div class="modal-box"> <h3 class="font-bold text-lg">标题</h3> <p>内容</p> <div class="modal-action"> <form method="dialog"> <button class="btn">关闭</button> </form> </div> </div> </dialog> <button class="btn" onclick="my_modal.showModal()">打开弹窗</button>⚡ 第二梯队（常用辅助组件）1️⃣ Navbar（导航栏）<div class="navbar bg-base-100"> <div class="flex-1">Logo</div> <div class="flex-none"> <button class="btn">登录</button> </div> </div>2️⃣ Drawer（侧边栏）<div class="drawer"> <input id="drawer-toggle" type="checkbox" class="drawer-toggle"> <div class="drawer-content"> <label for="drawer-toggle" class="btn btn-primary">打开菜单</label> </div> <div class="drawer-side"> <ul class="menu p-4 w-80 bg-base-200"> <li><a>首页</a></li> <li><a>用户</a></li> </ul> </div> </div>3️⃣ Menu（菜单）<ul class="menu bg-base-200 w-56"> <li><a>首页</a></li> <li><a>用户</a></li> </ul>4️⃣ Dropdown（下拉菜单）<div class="dropdown"> <label tabindex="0" class="btn">菜单</label> <ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 shadow w-52"> <li><a>选项1</a></li> <li><a>选项2</a></li> </ul> </div>5️⃣ Tabs（标签页）<div role="tablist" class="tabs tabs-boxed"> <a role="tab" class="tab tab-active">Tab1</a> <a role="tab" class="tab">Tab2</a> </div>6️⃣ Progress（进度条）<progress class="progress progress-primary w-56" value="50" max="100"></progress>7️⃣ Loading（加载动画）<span class="loading loading-spinner"></span>8️⃣ Tooltip（提示）<button class="btn" data-tip="提示内容">悬停</button>9️⃣ Divider（分割线）<div class="divider">分割</div>💀 最实用总结核心组件： button / input / table / modal / card 后台结构： drawer / menu / navbar 增强组件： alert / badge / loading / tooltip🚀 使用建议不需要死记组件多复制官方示例多组合 class多做页面练习👉 实战优先，记忆其次📌 推荐练习登录页（input + button）表格列表（table）弹窗操作（modal）后台布局（drawer + menu）👉 做完这些基本就能上手项目下面是 daisyui+alpinejs的示例<html lang="en" data-theme="bumblebee-custom"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Not Found</title> <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" /> <script src="https://unpkg.com/alpinejs" defer></script> </head> <body class="bg-base-200 min-h-screen p-6"> <div x-data="" class="max-w-5xl mx-auto"> <div class="flex justify-end"> <div class="dropdown dropdown-end"> <div tabindex="0" role="button" class="btn m-1 gap-2 group"> <div class="bg-base-100 group-hover:border-base-content/20 border-base-content/10 grid shrink-0 grid-cols-2 gap-0.5 rounded-md border p-1 transition-colors"> <div class="bg-base-content size-1 rounded-full"></div> <div class="bg-primary size-1 rounded-full"></div> <div class="bg-secondary size-1 rounded-full"></div> <div class="bg-accent size-1 rounded-full"></div> </div> <span>Theme</span> <svg width="12px" height="12px" class="inline-block h-2 w-2 fill-current opacity-60 transition-transform group-hover:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"> <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path> </svg> </div> <ul tabindex="-1" class="dropdown-content bg-base-300 rounded-box z-1 h-96 w-56 overflow-y-auto p-2 shadow-2xl"> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Light" value="light" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dark" value="dark" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Cupcake" value="cupcake" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Bumblebee" value="bumblebee" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Emerald" value="emerald" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Corporate" value="corporate" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Synthwave" value="synthwave" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Retro" value="retro" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Cyberpunk" value="cyberpunk" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Valentine" value="valentine" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Halloween" value="halloween" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Garden" value="garden" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Forest" value="forest" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Aqua" value="aqua" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Lofi" value="lofi" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Pastel" value="pastel" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Fantasy" value="fantasy" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Wireframe" value="wireframe" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Black" value="black" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Luxury" value="luxury" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dracula" value="dracula" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="CMYK" value="cmyk" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Autumn" value="autumn" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Business" value="business" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Acid" value="acid" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Lemonade" value="lemonade" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Night" value="night" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Coffee" value="coffee" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Winter" value="winter" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Dim" value="dim" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Nord" value="nord" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Sunset" value="sunset" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Caramellatte" value="caramellatte" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Abyss" value="abyss" /></li> <li><input type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block btn-ghost justify-start" aria-label="Silk" value="silk" /></li> </ul> </div> </div> <section class="card bg-base-100 shadow mt-4"> <div class="card-body"> <h2 class="card-title">弹窗示例</h2> <p class="text-base-content/70">点击按钮打开弹窗，测试不同主题下的视觉效果。</p> <div> <button class="btn btn-primary" @click="open = true">打开弹窗</button> </div> </div> </section> <div class="modal" :class=""> <div class="modal-box"> <h3 class="font-bold text-lg">Hello!</h3> <p class="py-4">这就是 daisyUI + Alpine</p> <div class="modal-action"> <button class="btn" @click="open = false">关闭</button> </div> </div> </div> </div> <div x-data="" class="max-w-5xl mx-auto mt-6"> <div class="card bg-base-100 shadow"> <div class="card-body"> <h2 class="card-title">Alpine 控制子菜单</h2> <p class="text-base-content/70"> 通过 Alpine 添加/删除 <code>menu-dropdown-show</code> 类来控制子菜单展开状态。 </p> <ul class="menu bg-base-200 rounded-box w-72"> <li><a>Item 1</a></li> <li> <span class="menu-dropdown-toggle cursor-pointer" :class="" @click="subMenuOpen = !subMenuOpen"> Parent </span> <ul class="menu-dropdown" :class=""> <li><a>Submenu 1</a></li> <li><a>Submenu 2</a></li> </ul> </li> </ul> </div> </div> </div> <section class="max-w-5xl mx-auto mt-6" x-data="{ currentTheme: 'bumblebee-custom', themes: ['light','dark','cupcake','bumblebee','emerald','corporate','synthwave','retro','cyberpunk','valentine','halloween','garden','forest','aqua','lofi','pastel','fantasy','wireframe','black','luxury','dracula','cmyk','autumn','business','acid','lemonade','night','coffee','winter','dim','nord','sunset','caramellatte','abyss','silk'], applyTheme(theme) { this.currentTheme = theme; document.documentElement.setAttribute('data-theme', theme); } }" x-init="currentTheme = document.documentElement.getAttribute('data-theme') || 'light'"> <div class="card bg-base-100 shadow"> <div class="card-body"> <h2 class="card-title">主题预览网格</h2> <p class="text-base-content/70">点击任意卡片即可切换页面主题。</p> <div class="rounded-box grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"> <template x-for="theme in themes" :key="theme"> <button type="button" class="border-base-content/20 hover:border-base-content/40 overflow-hidden rounded-lg border outline-2 outline-offset-2 outline-transparent transition" :class="" @click="applyTheme(theme)"> <div :data-theme="theme" class="bg-base-100 text-base-content w-full cursor-pointer font-sans text-left"> <div class="grid grid-cols-5 grid-rows-3"> <div class="bg-base-200 col-start-1 row-span-2 row-start-1"></div> <div class="bg-base-300 col-start-1 row-start-3"></div> <div class="bg-base-100 col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 p-2"> <div class="font-bold" x-text="theme"></div> <div class="flex flex-wrap gap-1"> <div class="bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-primary-content text-sm font-bold">A</div></div> <div class="bg-secondary flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-secondary-content text-sm font-bold">A</div></div> <div class="bg-accent flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-accent-content text-sm font-bold">A</div></div> <div class="bg-neutral flex aspect-square w-5 items-center justify-center rounded lg:w-6"><div class="text-neutral-content text-sm font-bold">A</div></div> </div> </div> </div> </div> </button> </template> </div> </div> </div> <div class="overflow-x-auto"> <table class="niah-table"> <!-- head --> <thead> <tr> <th></th> <th>Name</th> <th>Job</th> <th>Favorite Color</th> </tr> </thead> <tbody> <!-- row 1 --> <tr> <th>1</th> <td>Cy Ganderton</td> <td>Quality Control Specialist</td> <td>Blue</td> </tr> <!-- row 2 --> <tr> <th>2</th> <td>Hart Hagerty</td> <td>Desktop Support Technician</td> <td>Purple</td> </tr> <!-- row 3 --> <tr> <th>3</th> <td>Brice Swyre</td> <td>Tax Accountant</td> <td>Red</td> </tr> </tbody> </table> </div> </section> <div class="max-w-5xl mx-auto mt-6" x-data="{ expanded: , rows: [ , , , , ], hasChildren(id) { return this.rows.some((row) => row.parentId === id); }, isExpanded(id) { return !!this.expanded[id]; }, toggle(id) { this.expanded[id] = !this.isExpanded(id); }, isVisible(row) { if (!row.parentId) return true; let parent = this.rows.find((item) => item.id === row.parentId); while (parent) { if (!this.isExpanded(parent.id)) return false; if (!parent.parentId) return true; parent = this.rows.find((item) => item.id === parent.parentId); } return true; } }"> <div class="card bg-base-100 shadow"> <div class="card-body"> <h2 class="card-title">Tree Table 示例</h2> <p class="text-base-content/70">点击箭头可展开/收起子节点。</p> <div class="overflow-x-auto rounded-box border border-base-content/5 bg-base-100"> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Job</th> <th>Favorite Color</th> </tr> </thead> <tbody> <template x-for="row in rows" :key="row.id"> <tr x-show="isVisible(row)"> <th x-text="row.id"></th> <td> <div class="flex items-center gap-2" :style="`padding-left: $rem`"> <button type="button" class="btn btn-ghost btn-xs" x-show="hasChildren(row.id)" @click="toggle(row.id)"> <span x-text="isExpanded(row.id) ? '▾' : '▸'"></span> </button> <span x-show="!hasChildren(row.id)" class="w-5 inline-block"></span> <span x-text="row.name"></span> </div> </td> <td x-text="row.job"></td> <td x-text="row.color"></td> </tr> </template> </tbody> </table> </div> </div> </div> </div> </body> </html>
-
Alpine.js 第五阶段学习笔记（插件 Plugins）（按需使用） Alpine.js 第五阶段学习笔记（插件 Plugins）基于：Alpine.js🧠 第五阶段核心插件 = 官方扩展功能（按需使用）👉 Alpine 本体只提供核心能力👉 插件用于补充常见功能（避免重复造轮子）⚠️ 使用原则不用不用不用 需要再用👉 插件不是必须👉 只在有需求时引入1️⃣ Persist（本地存储）👉 作用自动将数据保存到 localStorage，刷新页面不丢失✅ 示例<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/alpinejs" defer></script> <script src="https://unpkg.com/@alpinejs/persist" defer></script> </head> <body> <div x-data=""> <button @click="count++">+1</button> <span x-text="count"></span> </div> </body> </html>💡 对比（传统写法）localStorage.setItem(...) localStorage.getItem(...)2️⃣ Intersect（滚动监听）👉 作用元素进入视口时触发（类似懒加载 / 滚动动画）✅ 示例<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/alpinejs" defer></script> <script src="https://unpkg.com/@alpinejs/intersect" defer></script> </head> <body style="height:2000px"> <div style="margin-top:800px" x-data x-intersect="alert('进入视口')"> 滚动到这里触发 </div> </body> </html>💡 用途懒加载滚动动画曝光统计3️⃣ Collapse（折叠动画）👉 作用实现更流畅的展开 / 收起动画✅ 示例<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/alpinejs" defer></script> <script src="https://unpkg.com/@alpinejs/collapse" defer></script> </head> <body> <div x-data=""> <button @click="open = !open">切换</button> <div x-show="open" x-collapse> 折叠内容 </div> </div> </body> </html>💡 优势自动处理高度动画比 x-transition 更自然4️⃣ Focus（焦点管理）👉 作用自动管理焦点（适用于弹窗 / 表单）✅ 示例<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/alpinejs" defer></script> <script src="https://unpkg.com/@alpinejs/focus" defer></script> </head> <body> <div x-data=""> <button @click="open = true">打开</button> <div x-show="open" x-trap="open"> <input placeholder="自动聚焦"> <button @click="open = false">关闭</button> </div> </div> </body> </html>💡 用途模态框输入体验优化5️⃣ Mask（输入格式）👉 作用限制输入格式（手机号 / 日期 / 编号等）✅ 示例<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/alpinejs" defer></script> <script src="https://unpkg.com/@alpinejs/mask" defer></script> </head> <body> <input x-mask="999-9999" placeholder="格式：123-4567"> </body> </html>💡 用途手机号身份证日期格式💀 第五阶段总结Persist → 本地存储 Intersect → 滚动监听 Collapse → 折叠动画 Focus → 焦点管理 Mask → 输入限制🔥 推荐组合（实用）Persist + Collapse👉 已足够应对大多数后台系统需求🧠 阶段总结阶段能力第一阶段数据绑定第二阶段控制DOM第三阶段响应式逻辑第四阶段组件复用第五阶段功能扩展🚀 学习建议插件按需引入优先掌握核心（前四阶段）遇到需求再查插件👉 不要为了“学插件”而学插件
-
Alpine.js 第四阶段学习笔记（组件化与复用） Alpine.js 第四阶段学习笔记（组件化与复用）基于：Alpine.js🧠 第四阶段核心组件化 + 逻辑复用👉 从“写页面”升级为“写组件”1️⃣ Alpine.data()（组件定义）👉 作用将一段逻辑封装为可复用组件✅ 完整示例<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/alpinejs" defer></script> </head> <body> <script> document.addEventListener('alpine:init', () => { Alpine.data('counter', () => ({ count: 0, inc() { this.count++ } })) }) </script> <div x-data="counter"> <button @click="inc()">+1</button> <span x-text="count"></span> </div> <div x-data="counter"> <button @click="inc()">+1</button> <span x-text="count"></span> </div> </body> </html>💡 特点每个组件实例独立数据互不影响可重复使用2️⃣ 组件参数（可配置组件）👉 作用像函数一样给组件传参数✅ 示例<script> document.addEventListener('alpine:init', () => { Alpine.data('counter', (init = 0) => ({ count: init, inc() { this.count++ } })) }) </script> <div x-data="counter(5)"> <button @click="inc()">+1</button> <span x-text="count"></span> </div>💡 理解counter(5)3️⃣ 逻辑拆分（函数封装）👉 作用避免 HTML 中逻辑过多✅ 示例<script> function userForm() { return { name: '', submit() { alert("提交：" + this.name) } } } </script> <div x-data="userForm()"> <input x-model="name"> <button @click="submit()">提交</button> </div>💡 优势逻辑清晰易维护易扩展4️⃣ 多组件独立👉 作用页面多个模块互不干扰✅ 示例<div x-data=""> <span x-text="msg"></span> </div> <div x-data=""> <span x-text="msg"></span> </div>💡 特点每个组件独立作用域不会污染其他组件5️⃣ 全局状态（Alpine.store）👉 作用多个组件共享数据✅ 示例<script> document.addEventListener('alpine:init', () => { Alpine.store('user', { name: '张三' }) }) </script> <div> <span x-text="$store.user.name"></span> </div> <div> <input x-model="$store.user.name"> </div>💡 类似Vuex / Pinia（但更轻量）💀 第四阶段核心总结Alpine.data() → 定义组件 参数传递 → 提高复用 函数封装 → 拆逻辑 多组件 → 页面结构 store → 全局状态🔥 能力提升阶段能力第一阶段数据绑定第二阶段控制DOM第三阶段响应式逻辑第四阶段组件复用🧠 本质变化之前：写页面 现在：写组件🚀 实战建议练习一个小项目：👉 用户管理页面输入用户名（x-model）点击添加（x-on）列表展示（x-for）删除数据（事件处理）👉 用 Alpine.data 封装📌 学习建议少看文档，多写代码每个组件自己改一遍尝试复用组件👉 不动手 = 学不会
-
Alpine.js 第三阶段学习笔记（对比 jQuery） Alpine.js 第三阶段学习笔记（对比 jQuery）基于：Alpine.jsjQuery1️⃣ x-transition（动画）👉 作用给 x-show / x-if 增加过渡动画✅ Alpine 完整示例<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/alpinejs" defer></script> </head> <body> <div x-data=""> <button @click="open = !open">切换</button> <div x-show="open" x-transition style="padding:20px;background:#4ade80;"> 动画内容 </div> </div> </body> </html>🔁 jQuery 对比<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <button id="btn">切换</button> <div id="box" style="display:none;">动画内容</div> <script> $("#btn").click(function() { $("#box").fadeToggle(); }); </script>2️⃣ $refs（操作 DOM）👉 作用直接获取 DOM 元素（替代 querySelector / $）✅ Alpine 示例<div x-data> <input x-ref="input"> <button @click="$refs.input.focus()">聚焦</button> </div>🔁 jQuery 对比<input id="input"> <button id="btn">聚焦</button> <script> $("#btn").click(function() { $("#input").focus(); }); </script>3️⃣ $watch（监听数据变化）👉 作用监听变量变化，自动执行逻辑✅ Alpine 示例<div x-data="" x-init="$watch('count', val => alert(val))"> <button @click="count++">+1</button> </div>🔁 jQuery 对比（本质不支持）let count = 0; $("#btn").click(function() { count++; alert(count); });👉 jQuery 无法真正“监听变量”4️⃣ x-effect（自动副作用）👉 作用数据变化时自动执行代码✅ Alpine 示例<div x-data=""> <div x-effect="document.title = 'Count: ' + count"></div> <button @click="count++">+1</button> </div>🔁 原生 / jQuery 对比let count = 0; function update() { document.title = "Count: " + count; } $("#btn").click(function() { count++; update(); });👉 必须手动调用5️⃣ x-init（初始化）👉 作用页面加载时执行逻辑✅ Alpine 示例<div x-data="" x-init="msg = '页面加载完成'"> <span x-text="msg"></span> </div>🔁 jQuery 对比$(document).ready(function() { $("#text").text("页面加载完成"); });💀 第三阶段核心总结x-transition → 动画 $refs → 操作DOM $watch → 监听数据 x-effect → 自动执行逻辑 x-init → 初始化🔥 本质区别方式思维jQuery操作 DOMAlpine操作 数据🧠 核心理解传统写法： 点击 → 操作 DOM Alpine： 修改数据 → DOM 自动更新🚀 学习建议建议你做一个练习：点击按钮打开弹窗（x-show）带动画（x-transition）输入框自动聚焦（$refs）输入变化自动打印（$watch）👉 做完这个，第三阶段就通了
-
Alpine.js 第二阶段学习笔记 Alpine.js 第二阶段学习笔记📦 引入 Alpine<script src="https://unpkg.com/alpinejs" defer></script>1️⃣ x-show（显示 / 隐藏）<div x-data=""> <button @click="open = !open">切换</button> <div x-show="open"> 这是可显示/隐藏的内容 </div> </div>👉 特点：控制 displayDOM 一直存在2️⃣ x-if（创建 / 销毁）<div x-data=""> <button @click="open = !open">切换</button> <template x-if="open"> <div>这是动态创建的内容</div> </template> </div>👉 特点：不存在时 DOM 中完全没有性能更优（适合复杂组件）⚠️ x-show vs x-if项目x-showx-ifDOM 是否存在一直存在会销毁切换速度快稍慢动画支持✅❌👉 选择建议：频繁切换 → x-show不常用内容 → x-if3️⃣ x-for（列表渲染）<div x-data=""> <template x-for="item in items" :key="item"> <div x-text="item"></div> </template> </div>👉 带索引<template x-for="(item, index) in items" :key="index"> <div x-text="index + ':' + item"></div> </template>👉 动态增删<div x-data=""> <button @click="items.push('新项')">添加</button> <button @click="items.pop()">删除</button> <template x-for="item in items" :key="item"> <div x-text="item"></div> </template> </div>🧠 第二阶段总结指令作用x-show控制显示隐藏x-if控制是否存在x-for渲染列表🔥 实战建议练习这些场景：下拉菜单（x-show）弹窗（x-show）条件模块（x-if）列表渲染（x-for）动态添加删除数据（x-for）👉 这些就是后台系统的核心交互💀 核心理解x-show = 控制可见性 x-if = 控制DOM存在 x-for = 控制DOM数量👉 Alpine 的本质：用数据驱动 DOM🚀 下一步建议学习：x-transition（动画）$refs（操作DOM）$watch（监听数据）👉 进入“交互增强阶段”
-
Alpine.js 第一阶段学习笔记 Alpine.js 第一阶段学习笔记📦 引入 Alpine<script src="https://unpkg.com/alpinejs" defer></script>1️⃣ x-data（定义状态）<div x-data=""> <span x-text="count"></span> </div>👉 作用：定义组件的数据一切的起点2️⃣ x-text（渲染数据）<div x-data=""> <span x-text="msg"></span> </div>👉 作用：把数据渲染到页面（文本）3️⃣ x-on（事件）<div x-data=""> <button @click="count++">+1</button> <span x-text="count"></span> </div>👉 说明：@click = x-on:click用于绑定事件4️⃣ x-bind（动态属性）<div x-data=""> <button @click="active = !active">切换</button> <p :class=""> 文字颜色变化 </p> </div>👉 说明：:class = x-bind:class用于动态绑定属性（class / style / disabled 等）5️⃣ x-model（双向绑定）<div x-data=""> <input type="text" x-model="name"> <span x-text="name"></span> </div>👉 作用：输入框数据 ↔ 状态 自动同步🧠 第一阶段总结指令作用x-data定义数据x-text显示数据x-on事件处理x-bind动态属性x-model双向绑定🔥 学习建议不要只看，自己改：把 count 改成倒计时把 input 改成登录表单给按钮加 class 切换效果👉 不动手 = 没学会
-
IntelliJ IDEA Maven 编译输出乱码问题解决方案 原文作者： iminifly原文链接： https://www.cnblogs.com/iminifly/p/190576911.打开 idea, 点击 File -> Settings 搜索 encoding, 将搜索结果出现的位置 全部设置为 UTF-82.设置 maven 编译参数打开 idea, 点击 File -> Settings -> Build,Execution,Deployment -> Build Tools -> Maven -> Runner(也可以在操作系统的环境变量里设置)Name=MAVEN_OPTS Value=-Dsun.stdout.encoding=UTF-8 -Dstderr.encoding=UTF-8 -Dconsole.encoding=UTF-8 -Dfile.encoding=UTF-8
-
-
社会规律｜我发现了一些，让自己很容易感觉幸福的小方法 🧩 1. 找到自己的人生舒适区制作电子表格，对以下内容进行梳理：人际关系：记录自己与他人的互动质量，尤其是那些消耗自己和提供积极力量的人。职场偏好：清晰明确自己在工作中的优先事项。多巴胺分泌点：识别和记录能带给自己愉悦的事物。性格的敏感点与禁忌：了解自己容易受到伤害的地方。复盘过往经历：交友经历：列出自己交往过的朋友，哪些让自己充满能量，哪些让自己耗尽精力。职场经历：总结曾经做对的事和犯的错，给自己打分。消耗自己的人：设立标准，低于及格线的就拉黑。断舍离不健康关系：远离那些负能量、消耗自己的亲戚、朋友等。住在一起不舒服、一起旅游也不适合的人，应该保持距离。建立健康的亲密关系，认识更多温暖、善良、心态积极的人。🧩 2. 找到你的多巴胺分泌点记录自己的喜好：多回忆哪些场景让自己特别开心，记录下这些“多巴胺分泌点”。举例：喜欢看演唱会、Live House演出，喜欢一个人沉浸影院观看电影。喜欢逛饰品店、购买小物件。喜欢与心地善良、温柔搞笑的朋友交流，享受温馨互信的关系。听吃播ASMR、制作视频、精致旅行视频等。对抗创伤性事件：遇到困难时，可以通过 国内外脱口秀、搞笑影片、卡通片等，迅速调整心情，消解不开心。推荐的搞笑节目：阿金卡卡、Fluffy、黄阿丽，《摩登家庭》，《搞笑一家人》，周星驰电影等。警惕危险的多巴胺来源：避免酗酒、赌博、危险驾驶、滥交等行为，这些虽然能刺激多巴胺分泌，但后果严重，可能毁掉人生。职业规划：对感兴趣的工作和爱好进行打分，找出最适合自己的方向。例如，有个朋友特别爱数学，现在做数学老师非常开心。🧩 3. 找到让自己放松的方法身体和心理放松：压力和不快乐有时源于身体紧绷和焦虑感，要学会放松。冥想和按摩是常见的舒缓焦虑的方法。特别推荐按摩椅、专门SPA。也可以在自然环境中放松，如安静的湖边、瀑布旁、海边等。简化生活：每天接收的信息太多，要尽量清除杂念，保持生活简化。如果遇到创伤，可以尝试心理咨询或阅读心理学书籍，帮助疏解情感。避免过度安排：不要把自己的时间表排得满满的，简化日程，只做最关键的事，避免不必要的压力。🧩 4. 吃一些营养补剂维生素D和镁片：这两种补剂有助于舒缓身心，提升情绪。桂圆干（鲜龙眼）：可以煮汤喝，效果特别好，帮助保持平静，甚至能在别人发火时依然保持冷静。🧩 5. 自我接纳接纳自己：不幸福的感觉往往来源于对自己不够接纳、挑剔。这可能与童年创伤、过度焦虑有关。若情绪问题严重，可以考虑寻求专业帮助。心理健康的状态：处于健康心理状态下的人会爱自己，给予自己安全感。建议远离负能量的媒体和社会新闻，避免无意义的情绪消耗。简化思维：改变不了的事就不再多想，过好每一天。不要陷入无用的内耗。🧩 总结：如何轻松快乐尽量让舒适和快乐的感觉占据大部分时间。主宰自己的情绪和生活，避免受到外界无关因素的干扰。提升自己的主体性，学会不忍受他人的不良影响，维护自己的情绪健康。这篇文章总结了许多实用的技巧，帮助作者找到自己生活的方向，通过自我接纳和管理来提升生活质量。总体方法很具体、可操作，也可以应用到任何人身上，尤其适合在情绪和心理上有负担的人。
-
自然规律｜我发现，高频表达可以与自己建立更紧密的联系 ➡️事件：十分钟表达练习我做10分钟表达练习一年了，练习形式很简单，每天打开录音机，张嘴讲话10分钟。我经常讲述的主题是，今天经历的生活小事，冒出来的情绪和想法。本质上，这就是在练习讲述自己，是高频次的自我表达。这一年下来，我最大的感受是，我和自己的联系、连接、感知更紧密了。这种紧密，不是虚无缥缈的感觉，它带来了两个实实在在的变化。➡️变化一：自我边界更清晰了①以前跟人相处时，我非常痛恨自己反应慢。和别人相处时，如果当下发生一件事，我心里可能隐约觉得不对，但就是琢磨不清楚，反应不过来。必须等到事情结束，回家想想后，才能意识到是哪里不对劲。当时觉得是自己天生反应慢，想训练又不知怎么练。②现在懂了，当时反应不过来，问题在于：我感知自己情绪和想法的能力太弱。事情发生时，内心只有一团模糊的感受，根本没法支撑我做出及时判断。③而开始高频讲述自己后，我就跟自己的想法、情绪的联系变紧密了。再遇到事，变化发生了。事情发生的当下，脑海里会立刻冒出声音说，这人干嘛xxxxx呀，这事怎么xxxxxxx呢，这应该xxxxxxx吧。于是我就知道了，这件事情给我带来了什么样的感受，这件事情给我带来了什么样的情绪，这件事情我有什么样的想法。有了这些具体的内部信号做依据，大脑自然就能更快的产生反应或行动。因此，跟自己联系更紧密之后，跟人相处的时候，我们更能意识到自己的边界被碰触了，并且可以迅速做出反应。➡️变化二：写作不再文字失语，有话可说①有段时间，我出现了文字失语的问题。刷了很多帖子，发现很多人也一样：遇到美好的事，觉得很幸福、很治愈，但就是描述不出来，脑袋里只剩yyds这类网络词。②当时我以为是词汇量不够。现在明白了，我们义务教育积累的日常词汇，用来描述日常生活和感受，其实是够用的。问题其实在于：我们太少主动表达自己的情绪和想法，这导致我们很少去细细感知自己的情绪与想法失。所以遇到事情时，心里只有一个模糊的感受，抓不住具体的东西。③后来在10分钟表达练习里，我天天讲述自己每天遇到的事情、产生的想法和情绪。讲得多了，感知能力就强了。我就越来越能看清，自己在每个当下，浮现出来的想法和情绪具体是什么了。因此，我的想法、感受开始源源不断，写作内容也就跟着源源不断了。
-
闲话日常｜对“人需要三个爱好”的一点小看法 之前看到一个帖子大概是这样的：一个人最好有三个爱好一个运动型爱好，跑步，舞蹈，爬山...可以消耗一下多余的体力，也可以锻炼自己的意志力，让身体更健康一个手工型爱好，画画，书法...就是把自己投进去，什么都不用想，感受大脑逐渐放空，情绪逐渐流通。一个精神型爱好，读书，写作，音乐，电影…能让自己的精神世界更加的丰富。对照一下这三个的话，我觉得我的运动型爱好是比较少的，因为我真的是一个低精力人。不过这一方面的爱好真的非常重要，我现在也提醒自己每天都要尽量的去运动，就算是很微小做几分钟也无所谓，只要坚持就可以。平时的话我会去散步，但是有时候天气不好，我也没有办法。不运动的话身体给人的反馈是很明显的：肠胃消化不好，晚上睡不踏实，有时候但凡做3、4分钟的跟练运动，或者是散散步都会觉得身体会好很多。因为运动的时候，整个身体是热起来的，肠胃会加快蠕动，这对我们上班久坐党是很好的。所以我现在就是保持着散步，外加举杠铃，做一些肩颈训练。手工型爱好的话，我真的非常推荐做饭！因为我平时下班之后，其实也没有很多的时间静下心去搞一些手工创作啥的，而且我家的空间比较有限，也没有办法去做一些很要材料的爱好。做饭这个就可以完美的，把我们生活本身所需要的事务变成一个爱好。同理！还有收纳和整理～虽然这些事情好像听起来一点都不高大上，不像一个爱好，但是我觉得它可以带来和其他的爱好一样的正能量反馈，甚至这种反馈是更明显的。我每次在切菜的时候都感觉我在做手工哈哈，对着菜谱把菜完美地烹制出来给我成就感是很大的！ps：有人可能觉得收纳和整理家里是一件非常麻烦的事情，这里我想说的是我们不一定要做很大范围的家务整理，你可能今天整了一个小桌子，明天整理一个小台子就会有明显的成就感。楼主是一个极简主义者。之前，家里东西多的时候也会觉得很烦，不过极简是一个很漫长的过程，培养爱好也是一个漫长的过程，所以大家可以先从小且一点的事情开始，慢慢地就会渐入佳境。有一种说法说可以把这种手工型的兴趣扩大一下 定义为：只要动身体而不太费脑子的类型，区别于运动型爱好之处是这种动身体的程度是非常小的，不会消耗很大的体力。那么我觉得唱歌和练字这两个爱好也可以归类于此，因为我在唱歌和练字的时候，大脑也都是放空的，肌肉记忆跟着做，很舒缓～第三个精神类的爱好，我觉得可以分为输入和输出两个方面。阅读观影听音乐这些的我觉得是输入，写作和玩游戏我认为是输出。一个小建议：我觉得输入的爱好一天之内不要做太多，一天输入太多的信息真的会觉得整个脑子好爆炸……有可能会囫囵吞枣而没有心思去好好品鉴。对于玩游戏这个爱好我其实有点不知道他到底是什么类型的，因为我打游戏的时候是真的一直要动脑，打完三把也会觉得有点疲惫，但是很爽。所以我将这个归类为精神类爱好。最后希望大家都能在下班找到自己喜欢的爱好，充实自己的生活，感受幸福☺️
