Alpine.js 第二阶段学习笔记

📦 引入 Alpine

<script src="https://unpkg.com/alpinejs" defer></script>

1️⃣ x-show（显示 / 隐藏）

<div x-data="{ open: false }">
  <button @click="open = !open">切换</button>

  <div x-show="open">
    这是可显示/隐藏的内容
  </div>
</div>

👉 特点：

• 控制 display
• DOM 一直存在

2️⃣ x-if（创建 / 销毁）

<div x-data="{ open: false }">
  <button @click="open = !open">切换</button>

  <template x-if="open">
    <div>这是动态创建的内容</div>
  </template>
</div>

👉 特点：

• 不存在时 DOM 中完全没有
• 性能更优（适合复杂组件）

⚠️ x-show vs x-if

👉 选择建议：

• 频繁切换 → x-show
• 不常用内容 → x-if

3️⃣ x-for（列表渲染）

<div x-data="{ items: ['苹果', '香蕉', '橘子'] }">

  <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="{ items: ['A', 'B'] }">

  <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-show）
• 条件模块（x-if）
• 列表渲染（x-for）
• 动态添加删除数据（x-for）

👉 这些就是后台系统的核心交互

💀 核心理解

x-show = 控制可见性
x-if   = 控制DOM存在
x-for  = 控制DOM数量

👉 Alpine 的本质：
用数据驱动 DOM

🚀 下一步

建议学习：

• x-transition（动画）
• $refs（操作DOM）
• $watch（监听数据）

👉 进入“交互增强阶段”