AlpineJS, HTML içinde kullanabilen, reaktif olarak DOM işlemleri yapabileceğiniz ufak bir framework.
Şunu sayfaya dahil edip başlayabilirsiniz:
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
- Örnek:
<div x-data="{message: 'Hello world!'}">
<h1 x-text="message"></h1>
<input type="text" x-model="message">
</div>
-
Örnek:
<div x-data="{items: ['first', 'second']}"> <template x-for="item in items" :key="item"> <div> <span x-text="item"></span> </div> </template> </div>
-
Örnek:
<div x-data="{open: false, toggle() { this.open = !this.open }}"> <button @click="toggle()"> <span x-text="open ? 'Kapat' : 'Aç'"></span> </button> <div x-show="open"> Görüntülenecek olan içerik </div> </div>
Daha detaylı kullanımına dökümantasyonundan göz atabilirsiniz. Bazı eksiklikleri var yeni olmasından dolayı ama bu haliyle bile birçok şeye çözüm olabiliyor.