SuperAPI AI 工具集

alpinejs

前端与建站

查看项目

更新于 10-15 15:51

技能介绍

用途:提供 Alpine.js 的编码最佳实践与模式,帮助在编写含 Alpine 指令的 HTML 时避开常见错误,尤其是避免把复杂逻辑塞进属性里。核心准则是保持属性简短:若 x-data、x-init 或任何指令超过约 50 个字符,就应提取出来。

主要能力:资料给出指令速查表(x-data、x-init、x-show、x-if、x-for、x-bind/ :、x-on/@、x-model、x-text、x-html、x-ref、x-cloak、x-transition、x-effect、x-ignore、x-teleport、x-modelable)、魔法属性($el、$refs、$store、$watch、$dispatch、$nextTick、$root、$data、$id)、事件修饰符(.prevent、.stop、.outside、.window、.document、.once、.debounce、.throttle、按键修饰符)与过渡修饰符。

用法与模式:简单状态可直接内联,如 x-data="{ open: false }";含方法或复杂逻辑时提取为函数组件(如 itemList())并配合 x-init 调用;跨页复用用 Alpine.data('name', ...);共享全局状态用 Alpine.store('name', ...),并在 alpine:init 事件中注册。表单校验、下拉菜单等示例均给出脚本与模板分离写法。x-cloak 需配合 CSS [x-cloak]{display:none;}。

限制:资料未提供版本、安装方式、收费或平台信息,暂未提供。