26 Şubat 2020 Çarşamba günü JavaScript başlığında

JavaScript'te Reaktiviteye Pratik Alternatif: Alpine.js

Laravel ile ön yüz işlemlerimde normal şartlarda VueJS kullanırım fakat bu yeni tanıştığım ufak framework elbette bir Vue kadar olmasa da bir çok işimi görüyor.

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/alpine@v2.0.1/dist/alpine.js" defer></script>
  1. Örnek:

    <div x-data="{message: 'Hello world!'}">
    <h1 x-text="message"></h1>
    <input type="text" x-model="message">
    </div>
  2. Örnek:

    <div x-data="{items: ['first', 'second']}">
    <template x-for="item in items" :key="item">
        <div>
            <span x-text="item"></span>
        </div>
    </template>
    </div>
  3. Ö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.


Yorumlar