Alpine.js使用笔记

引入和初始化 §

在 bundle 中初始化通直接将 Alpine 对象存入 window 对象即可。 同时在改过程中可以执行添加 data 、 store 等操作。

import Artalk from "./ArtalkLite";
 
window.Alpine = Alpine;
Alpine.data('theme', () => ({
    themeName:localStorage.name,
    changeTheme:changeTheme,
    setName: function(){
        this.themeName = localStorage.name
    }
}))
Alpine.start();

前端使用 §

x-data 相关 §

前端通过给标签增加 x-data 标记该标签为 alpinejs 标签，写法可以直接写一个 x-data 或 x-data="theme"，如下方的示例就使用了我在 bundle 中添加的 theme 数据组。

<ul class="book-languages"   x-data="theme" @load="setName();"  >
  <li>
    <input type="checkbox" id="theme" class="toggle">
    <label for="theme" class="flex justify-between">
      <a  role="button" class="flex align-center">
        <img src="{{ '/assets/svg/theme.svg' | absoluteUrl | cacheBust }}" class="book-icon" alt="change theme">
        <span x-text="themeName"></span>
        <button @click="setName()" />
      </ a>
    </label>
  </li>
</div>

父级标签添加了 x-data 后所有的子集标签都可以使用。

如需实现同步某一个变量在当前 x-data 域内的所有变动，需使用同一 x-data。

如：点击按钮触发 setName 函数，并在函数内对 themeName 变量进行修改，并同步更新到 span 标签上。

其他 §

• click 可以同时调用多个 data 中定义的函数，如：

  <a  @click="changeTheme('auto','自适应');setName();">
    自适应
  </a>