Alpine.js Nedir ve Nasıl Kullanırsınız?

Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma yaptığınızda, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Web geliştirme dünyası kaotiktir; çerçeveler aniden ortaya çıkar ve yok olur ve hem yeni hem de deneyimli geliştiriciler için her şey bunaltıcı olabilir.

Çoğu web geliştirme çerçevesinin aksine, Alpine.js mümkün olduğu kadar basit, ancak tepkisellik ve yan etkiler gibi kavramlarla başa çıkacak kadar güçlü olmayı amaçlar.

GÜNÜN MAKALE VİDEOSU İÇERİKLE DEVAM ETMEK İÇİN KAYDIRIN

Alpine.js'ye Başlarken

Alpine.js'yi yüklemek oldukça basittir. Yalnızca aşağıdakileri eklemeniz gerekir senaryo HTML'nizdeki etiket:

 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Alternatif olarak, Alpine.js'yi Düğüm Paket Yöneticisi'ni kullanarak projenize yükleyebilirsiniz:

 npm install alpinejs

Alpine.js'de tepkisellik

Oluşturduğunuz bir index.htm dosyasını açın ve aşağıdaki standart kodu ekleyin:

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Alpine.js</title> 
</head> 
<body> 
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> 
</body> 
</html>

bu ertelemek öznitelik senaryo etiketi, tarayıcıya komut dosyasını yalnızca belgeyi ayrıştırmayı bitirdikten sonra çalıştırmasını söyler.

Alpine.js, aşağıdakiler gibi çeşitli yönergeler sağlar: x-veri veri depolamak için kullandığı ve x-metin ayarlamak için kullandığı iç Metin ekli bileşenin. Bu yönergeleri kullanmak için HTML'nize aşağıdaki kodu ekleyin.

 <div x-data="{name:'David Uzondu', organisation:'Make Use Of'}"> 
    My name is <strong x-text="name"></strong> 
    and <i x-text="organisation"></i> is Awesome 
</div>

x-data yönergesi, anahtarlarla birlikte bir nesne depolar isim Ve organizasyon . Daha sonra bu anahtarları x-text direktifine iletebilirsiniz. Kodu çalıştırdığınızda, Alpine.js değerleri dolduracaktır:

32 veya 64 bit kullanmalı mıyım

Geliştirici araçlarının açık olduğu bir krom sekmesi.

Alpine.js React ile Nasıl Karşılaştırılır?

Alpine.js, onu küçük projeler ve prototipler geliştirmeye uygun hale getiren hafif bir çerçevedir.

React gibi daha büyük çerçevelerde, gibi kancalar useEffect() bileşen yaşam döngüsündeki yan etkilerin üstesinden gelmek için. Bu kanca, bağımlılık dizisinin öğelerinden biri değiştiğinde bir geri arama işlevi çalıştırır:

 import {useEffect} from "React"; 
 
function MyComponent() { 
    useEffect(() => { 
        /* Callback function goes here */ 
    }, [ /* The dependency array is optional */ ]); 
}

Alpine.js'deki yan etkileri işlemek için x etkisi direktif. Örneğin, bir değişkeni izlemek ve her değiştiğinde değeri günlüğe kaydetmek istediğinizi varsayalım:

 <div x-data="{number: 1}" x-effect="console.log(number)"> 
    <h1 x-text="number"></h1> 
    <button @click="number = number + 1">Add new number</button> 
</div>

Fark edebileceğiniz ilk şey, bir bağımlılık belirtmeniz gerekmediğidir. Alpine, iletilen tüm değişkenlerdeki değişiklikleri dinleyecektir. x etkisi . bu @tıklamak yönerge sayı değişkenini 1 artırır.

Alpine.js'de Koşullu İşleme

Öğeleri koşullu olarak oluşturma React gibi çerçevelerde yapabileceğiniz bir şeydir. Alpine.js, öğeleri koşullu olarak oluşturmanıza da olanak tanır. sağlar x-eğer direktif ve özel şablon öğeleri koşullu olarak işlemek için kullanabileceğiniz öğe.

Başka bir tane yarat index.htm dosyasını açın ve öncekiyle aynı standart kodu ekleyin. Aşağıdaki kodu HTML'nin gövdesine ekleyin.

 <div x-data="{shown:true}"> 
    <button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button> 
 
    <template x-if="shown"> 
        <div>The quick brown fox jumped over the dog.</div> 
    </template> 
</div>

bu x-eğer direktifi gönderilir şablon eleman. Bu, Alpine.js'nin sayfaya eklenen veya sayfadan kaldırılan bir öğeyi takip etmesine izin verdiği için önemlidir. bu şablon element bir kök seviyesinde element içermelidir; aşağıdaki kod bu kuralı ihlal eder:

en iyi işletim sistemi nedir

 <template x-if="shown"> 
    <div>This element will be rendered just fine.</div> 
    <div>This element will be ignored by Alpine.js</div> 
</template>

Alpine.js ile Yapılacaklar Uygulaması Oluşturma

Şimdiye kadar öğrendiğiniz her şeyi birleştirmenin ve yerel depolama desteğiyle basit bir yapılacaklar uygulaması oluşturmanın zamanı geldi. İlk olarak, bir klasör oluşturun ve onu bir index.htm dosya ve bir stil.css dosya. Standart kodu index.htm dosyasına ekleyin ve şuna bir başvuru ekleyin: stil.css dosya:

 <link rel="stylesheet" href="style.css">