前端 on Somnia

Alpine.js 从入门到精通 3 全局与其他

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 09:00:00 +0800

Alpine.js 提供了一些全局方法和对象，可以在任何地方使用。

解读：Alpine.data() 用于定义可复用的数据逻辑，类似于 Vue 的 setup() 或 React 的自定义 Hook。

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 08:00:00 +0800

Alpine.js 提供了一些以 $ 开头的魔法属性，可以在组件中直接访问。

解读：$el 指向当前 Alpine 组件的根 DOM 元素。

示例代码：

<div x-data="{}">
 <button @click="console.log($el)">查看根元素</button>
 <button @click="$el.style.backgroundColor = 'yellow'">改变背景</button>
</div>

html

适用范围：

0@ftls.xyz (恐咖兵糖) — Wed, 01 Jan 2025 07:00:00 +0800

Alpine.js 是一个轻量级的 JavaScript 框架，它借鉴了 Vue.js 和 Angular 的思想，但更加精简，可以直接在 HTML 中通过指令来管理状态和行为，非常适合需要少量交互的静态网站或增强渐进式应用。