Alpine.js 第一阶段学习笔记

📦 引入 Alpine

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

1️⃣ x-data（定义状态）

<div x-data="{ count: 0 }">
  <span x-text="count"></span>
</div>

👉 作用：

• 定义组件的数据
• 一切的起点

2️⃣ x-text（渲染数据）

<div x-data="{ msg: 'Hello Alpine' }">
  <span x-text="msg"></span>
</div>

👉 作用：

• 把数据渲染到页面（文本）

3️⃣ x-on（事件）

<div x-data="{ count: 0 }">
  <button @click="count++">+1</button>
  <span x-text="count"></span>
</div>

👉 说明：

• @click = x-on:click
• 用于绑定事件

4️⃣ x-bind（动态属性）

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

  <p :class="{ active: active }">
    文字颜色变化
  </p>
</div>

👉 说明：

• :class = x-bind:class
• 用于动态绑定属性（class / style / disabled 等）

5️⃣ x-model（双向绑定）

<div x-data="{ name: '' }">
  <input type="text" x-model="name">

  <span x-text="name"></span>
</div>

👉 作用：

• 输入框数据 ↔ 状态 自动同步

🧠 第一阶段总结

🔥 学习建议

不要只看，自己改：

• 把 count 改成倒计时
• 把 input 改成登录表单
• 给按钮加 class 切换效果

👉 不动手 = 没学会