引入和初始化
在 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>