Alpine.js 第三阶段学习笔记（对比 jQuery）
基于：
- Alpine.js
- jQuery
1️⃣ 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="{ open: false }">
<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="{ count: 0 }"
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="{ count: 0 }">
<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="{ msg: '' }"
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 | 操作 DOM |
| Alpine | 操作 数据 |
🧠 核心理解
传统写法：
点击 → 操作 DOM
Alpine：
修改数据 → DOM 自动更新🚀 学习建议
建议你做一个练习：
- 点击按钮打开弹窗（x-show）
- 带动画（x-transition）
- 输入框自动聚焦（$refs）
- 输入变化自动打印（$watch）
👉 做完这个，第三阶段就通了
评论 (0)