找到
7
篇与
教程
相关的结果
-
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 切换效果👉 不动手 = 没学会
-