Alpine.js Kullanımı ve Örnekleri

Neredeyse her hafta yeni bir JavaScript frameworkü veya kitaplığı çıkıyor. Her biri kendi benzersiz özellikleriyle birlikte geliyor. Burada, Alpine.js adında başka bir JavaScript kitaplığına bakacağız. Vue.js ve jQuery’ye oldukça benzer.

Aşağıda paylaşılan alpinejs örnekleri vscode idesinde alpine@v2.x.x ile test edilmiştir. Bu içeriği alpinejs örnekleri olarak da kullanabilirsiniz.

Bu yazıda neler ele alınacak?

Alpine.js nedir? 2. Alpine ne kadar iyidir?
- Alpine.js dosya yapısı nedir?
- Bu framework benim için mi?
- JQuery ve Alpine.js arasındaki fark nedir?
- Bu frameworkü jQuery gibi kullanabilir miyiz?
- Bunu TailwindCSS’de mi kullanıyorlar?
API’si Vue.js’ye eşdeğer olmasına rağmen Alpine.js nasıl daha hafif hale gelebilir?
Kullanım Örnekleri
- Yükleme
- x-data
- x-init
- x-show
- x-bind
- x-bind class
- x-bind boolean
- x-text
- x-html
- x-if
- x-for
- x-on
- x-on modifiers
- x-model
- x-model modifiers
- x-ref
Sihirli Özellikler
- $el
- $refs
- $event
- $nextTick
- $dispatch
- $watch
Component özelliği nasıl izlenir?
Alpine.js kullanarak Film arama uygulaması oluşturun
Demo

Alpine.js Nedir?

Alpine.js, reaktif ve bildirimsel yapısı ile JavaScript uygulamalarımızı geliştirmemizi sağlayan bir JavaScript frameworküdür. SPA’lar oluşturmak için kullanılmaz, sadece şablonlarınızı güçlendirmek için Angular.js’nin doğasını kullanır.

Alpine.js’nin ana gücü reaktif doğasıdır. Verileri bağlamak için yönergelerini kullanırsınız ve üzerinde yapılan herhangi bir değişiklik, yayılma düzeyine bakılmaksızın tüm uygulamada çalışır. Alpine.js daha çok bir kullanıcı arayüzü etkileşim frameworkü gibidir. Eğer Vue.js veya Angular.js kullandıysanız, özellikle Alpine.js, Angular.js ile aynı sözdizimine sahip olduğundan, kavramak kolaydır.

Alpine.js de bir DOM işleme kitaplığıdır. DOM ile daha az kodla açıklayıcı bir şekilde etkileşim kurmamızı kolaylaştırır. Vanilya JavaScript veya jQuery kullanarak elde edebileceğimizden çok daha azını yaparsınız. Aynı şey, React, Angular çerçeveleriyle de yapılabilir, ancak bu çerçevelerin boyutu uygulamamızı şişirir ve aşırıya kaçmasına neden olur.

Alpine ne kadar iyidir? Gücü Nereden Gelir?

Bağlama ve Sorgulama: Bu, Alpine.js’nin en büyük gücüdür. Alpine.js’de verileri bağlamak ve sorgulamak için x-data, x-show direktiflerini kullanıyoruz, bu direktifler reaktiviteyi verileri bağlamak ve uygulamadaki herhangi bir seviyede verilerde yapılan değişiklikleri yansıtmak için kullanır.

Olaylar: Alpine.js’de click, mouse, key event gibi olaylar oluşturulabilir ve bunları mükemmel bir şekilde yönetir. Ayrıca, özel etkinlikler oluşturulabilir ve tetiklenebilir.

Boyut: Alpine.js, büyük çerçevelerin gücüne sahiptir ve yine de çok küçük paket boyutu 7.1kB gzip ile sıkıştırılmıştır (21.9kB küçültülmüş). jQuery 32.5kB gzip’lenmiş (92.4kB küçültülmüş); Vue.js 22,8kB gzip’lenmiş (63,5kB küçültülmüş); 5kb gzip’lenmiş tepkime; React-Dom 39.4kB gzip’lenmiş (121.1kB küçültülmüş); React + React-Dom 31.8kB gzip’lenmiş (133kB küçültülmüş).

Alpine.js dosya yapısı nedir?

Alpine.js CLI gibi bir dosya yapısına sahip değildir. Gelecekte, bize hızlı bir Alpine.js projesini iskele haline getirmek için kullanabileceğimiz bir CLI aracı verebileceklerini bekleyebiliriz. Tıpkı Vue.js’nin CLI’ı yaptığı gibi.

Şimdilik, dosyaları ve şablonları manuel olarak oluşturuyor ve Alpine.js kitaplığını ekliyoruz. Alpine.js ve Vue.js söz diziminde benzer olduğundan, Alpine.js projelerimizde Vue.js dosya yapısını taklit edebiliriz.

Bu framework benim için mi?

Evet diyebilirim, bu çerçeve kesinlikle size göre. Angular.js, jQuery veya Vue.js dünyasından geliyorsanız, bu çerçevenin onlarla aynı ve çok süper reaktif çalıştığını görürsünüz.

İkinci olarak, Alpine.js diğer çerçevelerden farklı olarak derleme gerektirmez, sadece kitaplığı ekleyin ve başlayın. Sözdiziminin Angular.js, Vue.js ve jQuery’ye aşina olması da büyük bir avantajdır.

JQuery ve Alpine.js arasındaki fark nedir?

Hem Alpine.js hem de jQuery, DOM manipülasyonu için API’ler sağlar.

jQuery, paket boyutu açısından Alpine.js’den daha ağırdır. jQuery 32.5kB gzip’lenmiş, Alpine.js ise 7.1kB gzip’lenmiş. jQuery 92.4kB küçültülmüş, Alpine.js ise 21.1kB’dir. Burada Alpine.js’nin jQuery’den daha hafif çıktığını görüyoruz.

Paket boyutları nedeniyle farklı indirme sürelerine sahiptirler.

Bu frameworkü jQuery gibi kullanabilir miyim?

Alpine.js, projemizdeki DOM işlemlerini basitleştiren bir çerçevedir, bu nedenle jQuery gibi kullanılamaz. Hem Alpine.js hem de jQuery aynı şeyi yapar, ancak Alpine.js HTML şablonu üzerinde çalışırken jQuery JavaScript’ten çalışır.

Alpine.js ve jQuery’de oluşturulan aynı uygulamayı görelim.

Alpine.js versiyonu:


<div class="" x-data="{ sayac: 0 }" x-init="sayac = $refs.saydir.value.length">
    <textarea
        name="body"
        class="char-limiter"
        rows="3"
        maxlength="140"
        x-ref="saydir"
        x-on:input="sayac = $refs.saydir.value.length"
    ></textarea>
    
    <div class="">
        <span x-html="sayac"></span> - 
        <span x-html="$refs.saydir.maxLength"></span>
    </div>
</div>

<textarea

name="body"

class="char-limiter"

rows="3"

maxlength="140"

x-ref="saydir"

x-on:input="sayac = $refs.saydir.value.length"

></textarea>

<span x-html="sayac"></span> -

</div>

Jquery versiyonu:


<div class="">
  <textarea
    name="body"
    class="txt"
    rows="3"
    maxlength="140"
  ></textarea>

  <div id="sayacPanel" class="">
    <span id="mevcut"></span> / <span id="limit"></span>
  </div>
</div>
<script>

    $(function(){
        var element = $(".txt");
        var max_length = $(element).attr("maxlength");

        //sayac sıfırlama
        $("#mevcut").text(0);
        $("#limit").text(max_length);

        $(element).bind("input",function(){
            var sayac = $(this).val().length
            $("#mevcut").text(sayac)
        })
    })
</script>

<textarea

name="body"

class="txt"

rows="3"

maxlength="140"

></textarea>

</div>

$(function(){

var element = $(".txt");

var max_length = $(element).attr("maxlength");

//sayac sıfırlama

$("#mevcut").text(0);

$("#limit").text(max_length);

$(element).bind("input",function(){

var sayac = $(this).val().length

$("#mevcut").text(sayac)

})

</script>

Bu uygulama, anahtar değiştirme input olaylarını dinler ve tetiklendiğinde yazılan karakter sayısını günceller.

Alpine.js sürümünde her şeyin HTML şablonunda yapıldığını, tüm JavaScript kodlarının satır içi ifadeler olduğunu görebiliriz.

JQuery sürümünde, kitaplıktaki API’ler DOM’u sorgulamak ve HTML’yi güncellemek için kullanılır. HTML yazılır, ardından jQuery metotlarını kullanarak JavaScript’ten DOM’yi işleriz.

Alpine.js’yi jQuery gibi kullanamayacağımızı görüyoruz.

Bunu TailwindCSS’de mi kullanıyorlar?

Tam olarak değil, ancak Alpine.js ve TailwindCSS ortak teknikleri paylaşıyor.

Alpine.js, TailwindCSS’den ilham aldı, aslında daha önce “JavaScript için Tailwind” olarak adlandırılıyordu.

Alpine.js, TailwindCSS gibi çalışır, TailwindCSS, yazmak için CSS dosyalarına ihtiyaç duymaz senin tarzların oluştur.

Doğrudan biçimlendirmenizde herhangi bir tasarım oluşturmak için oluşturulabilen yardımcı program sınıflarıyla zaten doludur.


    <!--tailwincss örnek-->
    <div>
        <dt class="sr-only">Title</dt>
        <dd class="group-hover:text-white leading-6 font-medium text-black">
            {item.title}
        </dd>
    </div>

<div>

<dt class="sr-only">Title</dt>

{item.title}

</dd>

</div>

Bu nedenle, Alpine.js bundan bir ilham aldı ve bunu, JavaScript şablonları üzerinde çalışmaya gerek kalmadan JS uygulamaları oluşturmak için kullanabileceğimiz yardımcı program yönergelerini sağlayacak şekilde tasarladı.

API’si Vue.js’ye eşdeğer olmasına rağmen Alpine.js nasıl daha hafif olabilir?

Alpine.js ve Vue.js API’leri eşdeğerdir. Örneğin, bunu x-bind: attribute="express" yaparak Alpine.js’deki bir ifadeye bir öznitelik bağlayabiliriz, bunu x-data="express" yaparak Alpine.js’de veri değişkenini ayarlayabiliriz.

Vue.js’de x-‘yi v- ile değiştirmemiz neredeyse aynıdır.

Attribute bağlanma :v-bind:attribute="express" Veri bağlama: v-data="express"

Dolayısıyla, tüm bunlara rağmen Alpine.js çok daha hafiftir çünkü bildirimseldir ve veri değişikliklerini izlerken reaktiviteden yararlanır. Çok fazla kod çıkarıldı ve bu da onu daha hafif hale getirdi.

Yükleme

Alpine.js’yi kullanmaya başlamak kolaydır. CDN bağlantısını kullanarak hızlıca öğreticiye geçebiliriz.


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

Yukarıdaki 2.x.x sürümüdür. Bir projede kullanacaksanız beklenmeyen davranışları önlemek için sabit bir sürüm numarasını tercih etmenizi tavsiyederim.


<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>

NPM kullanarak alpine.js’yi kitaplığa kurmak için;


npm i alpinejs

npm i alpinejs

Ardından scripti dahil ederek kullanabilirsiniz.


import 'alpinejs'

import 'alpinejs'

Alpine.js 14 yerleşik yönergeye sahiptir. Aşağıdaki bölümlerde temel direktifleri öğreneceğiz.

x-data

Bu yönerge, bir component kapsamındaki verileri bildirmek için kullanılır. Veriler, bildirildiği öğenin alt öğeleri tarafından kullanılabilen özellikleri olan bir nesnedir.

Söz dizimi:


<div x-data="[JSON data object]">...</div>

Örnek:


<html>
<head>
    <title>Tasarım Kodlama</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>

    <div x-data="{ad:'Hayri', soyad:'KOÇ',yas:38}">
        <div>
            <strong x-text="ad"></strong>
            <strong x-text="soyad"></strong>
            <strong x-text="yas"></strong>
        </div>
    </div>

</body>
</html>

<html>

<head>

<title>Tasarım Kodlama</title>

</head>

<body>

<div>

</div>

</body>

</html>

Burada, dış gövdedeki DIV içinde bildirilmiş verilerimiz var. x-data direktifindeki nesne değişmezi, div öğesi kapsamında bir veri oluşturur. Bu veri içinde ad, soyad ve yas değerleri vardır.

DIV öğesi içindeki strong etiketi içinde öğlerimizi görüntüledik. DOM çıktısı aşağıdaki gibi değiştirildi.


<div>
    <strong x-text="ad">Hayri</strong>
    <strong x-text="soyad">KOÇ</strong>
    <strong x-text="yas">38</strong>
</div>

<div>

<strong x-text="ad">Hayri</strong>

</div>

x-data değerine, bildirildiği öğenin dışındaki öğelerden erişilemez. Yani, sadece bir elemanın çocukları, eleman üzerinde bildirilen x-data değerine erişebilir. Kardeş öğeler, bitişik öğeler ona erişemez.

Başka bir örnek:


<html>
<head>
    <title>Tasarım Kodlama</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
    <!-- x-data altındaki öğeleri etkiliyor-->
    <div x-data="{ad:'Hayri', soyad:'KOÇ',yas:38}">
        <div>
            <strong x-text="ad"></strong>
            <strong x-text="soyad"></strong>
            <strong x-text="yas"></strong>
        </div>
    </div>

    <!--ad değeri burada görünmeyecek-->
    <div>
        <strong x-text="ad"></strong>
    </div>
</body>
</html>

<html>

<head>

<title>Tasarım Kodlama</title>

</head>

<body>

<div>

</div>

<div>

</div>

</body>

</html>

İkinci DIV içine component kapsamındaki ad özelliğini yazdırmayı denedik. x-data componenti kapsamı dışında olduğu için burada ad çalışmayacaktır.

Verileri yeniden kullanılabilir fonksiyonlara çıkarabiliriz. Bu, HTML dosyamızın script bölümünde bir fonksiyon oluşturabileceğimiz anlamına gelir, fonksiyon bir nesne değişmezi döndürür. Nesne, çağrıldığı bileşen kapsamında bildirilecek özellikleri içerecektir.

Bir örnek görelim:


    <div x-data="init()">
        <div>
            <strong x-text="ad"></strong>
        </div>
        <button @click="setAd('Ahmet')">Ahmet Yaz</button>
    </div>
    <script>
        function init(){
            return{
                ad:null,
                setAd:function (ad){
                    this.ad=ad
                },
            }
        }
    </script>

<div>

</div>

<button @click="setAd('Ahmet')">Ahmet Yaz</button>

</div>

function init(){

return{

ad:null,

setAd:function (ad){

this.ad=ad

}

</script>

Bakın, init fonksiyonu ad ve setAd adında iki tane özelliği olan bir nesne döndürür. Bu özellikler çağrılan elementin componenti kapsamında tanımlanmıştır.

DIV elementindeki x-data direktifinin init() fonksiyonunu aldığına dikkat edin. Artık özellikler artık div elementinde kullanılabilir duruma gelmiş oldu.

See in the div element, we called the init function in the x-data directive. Now, the properties name and setName are visible to all elements inside the div element.

Alpine.js birden fazla nesneyi karşıltırmak için birden fazla fonksiyonu bir arada kullanmayı desteklemektedir.

Aşağıdaki örneğe bakalım:


    <div x-data="{...init(), ...init2()}">
        <div>
            <strong x-text="ad"></strong>
            <strong x-text="yas"></strong>
        </div>
        <button @click="setAd('Ahmet')">Ahmet Yaz</button>
        <button @click="setYas('42')">Yaş Yaz</button>
    </div>
    <script>
        function init(){
            return{
                ad:null,
                setAd:function (ad){
                    this.ad=ad
                },
            }
        }

        function init2(){
            return{
                yas:null,
                setYas:function (yas){
                    this.yas=yas
                },
            }
        }
    </script>

<div>

</div>

<button @click="setAd('Ahmet')">Ahmet Yaz</button>

</div>

function init(){

return{

ad:null,

setAd:function (ad){

this.ad=ad

}

function init2(){

return{

yas:null,

setYas:function (yas){

this.yas=yas

}

</script>

Bir nesne oluşturduk, sonra üç noktayı(spread operatör) kullanarak içeriği yok eden iki işlevi çağırdık …. Çalışıyor !!

x-init

Bileşen (component) başlatıldığında bir ifadeyi çalıştırır.

Söz dizimi:


<div x-data="..." x-init="[ifade]"></div>

Örneği görelim:


    <div x-data="{ durum:true }" x-init="setDurum">
        Durum ?: <strong x-text="durum"></strong> 
    </div>

    <script>
        function setDurum(){
            this.durum=false
        }
    </script>

Durum ?: <strong x-text="durum"></strong>

</div>

function setDurum(){

this.durum=false

}

</script>

Burada, x-init, div öğesi başlatıldığında veya oluşturulduğunda setDurum() fonksiyonunu çalıştırır. Fonksiyon, div öğesindeki x-data nesnesi değişmez değerindeki durum özelliğini false olarak ayarlar. Bu, div öğesinin oluşturulmasında durum verilerin her zaman false olmasını sağlar.

Kod, bileşen bağlandıktan ve DOM’a ilk güncellemeler yapıldıktan sonra da çalıştırabiliriz.

Bu, x-init yönergesinde bir callback döndürülerek yapılır. Bu callback, Alpine.js DOM için ilk güncellemeleri yaptıktan sonra çalıştırılacaktır.


    <div x-data="init()" x-init="()=>{ guncelle() }">
        <div>
            <strong x-text="ad"></strong>
        </div>
        <button @click="setAd('Ahmet')">Ahmet Yaz</button>
    </div>
    <script>
        function init(){
            return{
                ad:null,
                setAd:function (ad){
                    this.ad=ad
                },
                guncelle(){
                    this.ad="Hayri"
                }
            }
        }
    </script>

<div x-data="init()" x-init="()=>{ guncelle() }">

<div>

</div>

<button @click="setAd('Ahmet')">Ahmet Yaz</button>

</div>

function init(){

return{

ad:null,

setAd:function (ad){

this.ad=ad

guncelle(){

this.ad="Hayri"

}

</script>

x-show

x-show ifadenin (true or false) olup olmamasına göre elemente display: none; özelliği ekler veya çıkarır.

Söz dizimi:


<div x-show="[ifade]"></div>

Örneğe bakalım:


    <div x-data="init()">
        <div x-show="durum">TASARIM KODLAMA</div> <!--ilk durumda gizlenecek-->
        <button @click="gizleGoster">Gizle / Göster</button>
    </div>

<script>

    function init(){
        return {
            durum:false,
            gizleGoster:function(){
                this.durum = !this.durum
            },
        }
    }
</script>

<div x-show="durum">TASARIM KODLAMA</div>

<button @click="gizleGoster">Gizle / Göster</button>

</div>

function init(){

return {

durum:false,

gizleGoster:function(){

this.durum = !this.durum

}

</script>

Veri içeren başka bir örnek:


    <div x-data="{ad:'Ahmet',mezun:false}">
        <p x-text="ad"></p>
        <p x-show="mezun">Mezuniyet Vardır</p>
    </div>

<p x-show="mezun">Mezuniyet Vardır</p>

</div>

İlk örnekte gizleGoster fonksiyonu durum değerini değiştirdiği için butona tıkladıkça değer değişecektir. İkinci örnekte componenteki verinin durumu false olduğu için mezuniyet bilgisi görünmeyecektir.

x-bind

Bu direktif, bir öğenin niteliğinin değerini belirlemek için kullanılır. JavaScript ifadesi değerlendirilir ve değerlendirmenin sonucu, belirtilen niteliğin değeri olur.

x-bind ifadesinin bağımlılıkları değiştiğinde, ifade yeniden çalıştırılır, böylece niteliğin değeri yeni değişiklikleri yansıtır.

Söz dizimi:


<div x-bind:[nitelik]="[ifade]">...</div>

Örneği inceleyelim:


    <div x-data="{durum:true}">
        <button x-bind:disabled="durum">Tıkla</button>
    </div>

<button x-bind:disabled="durum">Tıkla</button>

</div>

Butonun disabled özelliğine durum değeri verildiğinde durumun true yada false olmasına bağlı olarak butonu pasifleştirecektir.

DOM içinde şu şekilde oluşacaktır.


<button x-bind:disabled="durum" disabled="disabled">Tıkla</button>

<button x-bind:disabled="durum" disabled="disabled">Tıkla</button>

Şimdi, durum değerini false olarak değiştirirsek. button nesnesinind disabled özellik değeri false olacaktır.

İfadenin bağımlılıkları değişiklikler için dinlenir, herhangi bir (bağımlılık değerleri değiştiğinde), ifade yeniden değerlendirilir ve bağlı özniteliğin değeri güncellenir.

Alpine.js, binding sınıfı boolean değer nitelikleri için x-bind niteliği sağlar. Bunları aşağıda görelim:

Sınıf özellikleri için `x-bind`

bu, sınıf özelliklerini bir elemana bağlamak için kullanılır. Bunun değeri, temel özellikleri bağlanacak sınıfların isimleri olan bir nesne ifadesidir. Değerler boolean değerleridir ve true oluyorsa uygulanacağı false oluyorsa uygulanmayacağı anlamına gelir.

Örnek: Bir CSS sınıfımız var:


.gizle {  display: none !important; }

.gizle { display: none !important; }

Alpine.js kodu:


    <div x-data="{'sakla': true}">  
        <div x-bind:class="{ 'gizle': sakla }"> Tasarım Kodlama</div>
    </div>

<div x-bind:class="{ 'gizle': sakla }"> Tasarım Kodlama</div>

</div>

Boolean özellikler için `x-bind`

x-bind değer özellikleriyle aynı şekilde boolean özelliklerini de destekler. Bunlar bir değişkenin şartlı durum olarak kullanılması veya herhangi bir Javascript ifadesinin true or false olarak döndürülmesidir.


<div>  <video x-bind:autoplay="true" /> </div>

Video öğesinin autoplay özelliği true olarak ayarlandı. çıktı şu olacaktır:


<div>  <video autoplay="true" /> </div>

x-text

Örnek: <span x-text="foo"></span>

Söz dizimi: <span x-text="[ifade]"

x-text direktifi x-bind ile benzer şekilde çalışır. Tek fark, x-text bir özelliğin değerini güncellemek yerine, bir elementin innerText özelliğini günceller.

Alpine.js örneğine bakalım:


    <div x-data="{ site: 'www.tasarimkodlama.com' }">
        <p x-text="site"></p>
    </div>

</div>

<P> öğesinde, metni div verilerinde bildirilen text özelliğinin değeri olacaktır.

x-html

Örnek: <span x-html="foo"></span>

Yapı: <span x-html="[expression]"

x-html direktifi x-bind ile benzer şekilde çalışır. Tek fark, x-text bir özelliğin değerini güncellemek yerine, bir elementin innerHTML özelliğini günceller.

:uyarı: Yalnızca güvenilir içerikte kullanın ve asla kullanıcı tarafından sağlanan içerikte kullanmayın. :uyarı:
Üçüncü şahıslardan gelen HTML’ in dinamik olarak işlenmesi açıkça XSS zaaflarına yol açabilir.

Örneğe bakalım:


    <div x-data="{ html: '<strong><u>Tasarım Kodlama</u></strong>' }">
        <span x-html="html"></span>
    </div>

<div x-data="{ html: '<strong><u>Tasarım Kodlama</u></strong>' }">

</div>

html özelliği bir HTML dizesi içerir ve biz bunun span öğesinin HTML içeriği olmasını isteriz. Span öğesi üzerinde ayarlanan x-html yönergesi, html özelliğindeki HTML dizesini span öğesinin iç HTML’si olacak şekilde ayarlar.

DOM’daki çıktı şu olacaktır:


<div x-data="{ html: '<strong><u>Tasarım Kodlama</u></strong>' }">
        <span x-html="html"><strong><u>Tasarım Kodlama</u></strong></span>
    </div>

<div x-data="{ html: '<strong><u>Tasarım Kodlama</u></strong>' }">

<span x-html="html"><strong><u>Tasarım Kodlama</u></strong></span>

</div>

x-if

`x-if`

Örnek: <template x-if="true"><div>Some Element</div></template>

Söz dizimi: <template x-if="[expression]"><div>Some Element</div></template>

x-show ‘in yetersiz olduğu durumlarda (x-show değeri false ise elemente display: none özelliği ekler), bir elementi tamamıyla DOM ‘dan silmek için x-if kullanılabilir.

Örnek:


    <div x-data="{ site: true }">
        <template x-if="site">
            <div>
                <a href="https://www.tasarimkodlama.com">
                    Tasarım Kodlama
                </a>
            </div>
        </template>
    </div>

<div>

Tasarım Kodlama

</a>

</div>

</template>

</div>

DOM çıktısı şu şekilde olacaktır.


    <div>
        <a href="https://www.tasarimkodlama.com">
            Tasarım Kodlama
        </a>
    </div>

<div>

Tasarım Kodlama

</a>

</div>

x-for

`x-for`

Örnek:


<template x-for="item in items" :key="item">
     <div x-text="item"></div> 
</template>

</template>

Not: :key ile atama isteğe bağlıdır ama Note: the :key binding is optional, ama ŞİDDETLE tavsiye edilir.

Bir dizinin her bir elemanı için yeni bir DOM düğümü oluşturmak istediğiniz durumlar için x-for vardır. Bu Vue ‘deki x-for etiketine benzerdir. Tek fark, Alpine bu direktifi normal bir DOM elementi üzerinde kullanamaz. Bunun için bir template etiketinin varlığına ihtiyaç duyar.

Örneğe bakalım:


    <div x-data="{ konular: ['Web Tasarım', 'HTML', 'CSS','C#','Python' ] }">
        <h3>Konular</h3>
        <ul>
            <template x-for="konu in konular">
                <li x-text="konu"></li>
            </template>
        </ul>
    </div>

<h3>Konular</h3>

<ul>

</template>

</ul>

</div>

Kod çalıştırıldığında DOM ağacını şu şekilde güncelleyecektir.


<div x-data="{ konular: ['Web Tasarım', 'HTML', 'CSS','C#','Python' ] }">

        <h3>Konular</h3>
        <ul>
            <template x-for="konu in konular">
                <li x-text="konu"></li>
            </template>
        
                <li x-text="konu">Web Tasarım</li>
            
                <li x-text="konu">HTML</li>
            
                <li x-text="konu">CSS</li>
            
                <li x-text="konu">C#</li>
            
                <li x-text="konu">Python</li>
            </ul>
    </div>

<h3>Konular</h3>

<ul>

</template>

<li x-text="konu">Web Tasarım</li>

<li x-text="konu">Python</li>

</ul>

</div>

x-on

Not: Daha kısa sentaksı “@” kullanabilirsiniz: @click="...".

Örnek: <button x-on:click="foo = 'bar'"></button>

Söz dizimi: <button x-on:[event]="[expression]"></button>

x-on tanımlandığı elemente bir olay dinleyici ekler. Bu olay tetiklendiği zaman, değeri olarak atanan Javascript ifadesi çalıştırılır. x-on özelliğini üzerine eklediğiniz elementin desteklediği bütün olayla için kullanabilirsiniz. Olayların tüm listesine ve muhtemel değerleri için the Event reference on MDN adresine bakınız.

Javascript ifadesinde herhangi bir data güncellenirse o dataya bağlı diğer element özellikleri de güncellenir.

Örnek 1.1:


    <div x-data="init()">
        <div>
            <strong x-text="aciklama"></strong>
        </div>
        <button x-on:click="tikla('https://www.tasarimkodlama.com')">Siteye git</button>
    </div>
    <script>
        function init(){
            return{
                aciklama:"siteye gitmek için tıklayın!",
                tikla:function (site){
                    location.assign(site)
                },
            }
        }
    </script>

<div>

</div>

<button x-on:click="tikla('https://www.tasarimkodlama.com')">Siteye git</button>

</div>

function init(){

return{

aciklama:"siteye gitmek için tıklayın!",

tikla:function (site){

location.assign(site)

}

</script>

x-on yönergesini kullanarak bir öğeye bir olay eklemek için, olay adı, x-on özelliğine, iki nokta(:) ile bağlanır. Yukarıda, butona bir tıklama olayı ayarlayın, x-on’daki ifade :click bir fonksiyon ifadesidir. Butona tıklandığında tikla fonksiyonu çalıştırılır.

Örnek 1.2: Yukarıdaki örneği özellik ile de yapabilirsiniz.


    <div x-data="init()">
        <div>
            <strong x-text="aciklama"></strong>
        </div>
        <button x-on:click="tikla">Siteye git</button>
    </div>
    <script>
        function init(){
            return{
                aciklama:"siteye gitmek için tıklayın!",
                link:"https://www.tasarimkodlama.com",
                tikla:function (site){
                    location.assign(this.link)
                },
            }
        }
    </script>

<div>

</div>

<button x-on:click="tikla">Siteye git</button>

</div>

function init(){

return{

aciklama:"siteye gitmek için tıklayın!",

link:"https://www.tasarimkodlama.com",

tikla:function (site){

location.assign(this.link)

}

</script>

Örnek 2:


    <div x-data="init()">
        <button x-on:click="tikla($event)">TIKLA</button>
    </div>
    <script>
        function init(){
            return{
                tikla:function (e){
                    console.log(e)
                },
            }
        }
    </script>

<button x-on:click="tikla($event)">TIKLA</button>

</div>

function init(){

return{

tikla:function (e){

console.log(e)

}

</script>

Örnek 3:


    <style>
        .active {
    background-color: red;
    }
    </style>
    <div x-data="{ show: false }">
        <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'" :class="{ 'active': show }">
      Toggle Button
        </button> 
    </div>

<style>

.active {

background-color: red;

}

</style>

Toggle Button

</button>

</div>

Örnek 4:


    <div x-data="{ sayac: 0 }">
        <button @click="sayac--">Azalt</button>
        <code>sayaç: </code><code x-text="sayac"></code>
        <button @click="sayac++">Arttır</button>
      
        <p x-show="sayac === 1">
          Sayaç 1 olduğunda görünür  <code>sayac === 1</code>
        </p>
        <p x-show="sayac >= 0">
          Sayac 0 ve üzerinde olunca görünür. <code>sayac >= 0</code>
        </p>
        <p x-show="sayac === 2">
          Sayaç 2 olduğunda görünür <code>sayac === 2</code>
        </p>
      </div>

<button @click="sayac--">Azalt</button>

<code>sayaç: </code><code x-text="sayac"></code>

<button @click="sayac++">Arttır</button>

Sayaç 1 olduğunda görünür <code>sayac === 1</code>

</p>

Sayac 0 ve üzerinde olunca görünür. <code>sayac >= 0</code>

</p>

Sayaç 2 olduğunda görünür <code>sayac === 2</code>

</p>

</div>

Örnek 5:


    <div
    x-data="{ select : 1 }">
      <div>
          <button x-on:click="select = 1">Elma</button>
          <button x-on:click="select = 2">Armut</button>
          <button x-on:click="select = 3">Karpuz</button>
      </div>
  
      <div>
          <select name="test" x-model="select">
              <option value="1">Elma</option>
              <option value="2">Armut</option>
              <option value="3">Karpuz</option>
          </select>
      </div>   
  </div>

<div

x-data="{ select : 1 }">

<div>

<button x-on:click="select = 2">Armut</button>

<button x-on:click="select = 3">Karpuz</button>

</div>

<div>

<option value="2">Armut</option>

<option value="3">Karpuz</option>

</select>

</div>

Tuş Kontrolleri

x-on direktifi ile klavye kontrolleri de kullanabilirsiniz. Aşağıdaki örneklerde ENTER ve YÖN TUŞLARI kullanımına örnekler mevcuttur.

Örnek : ENTER tuşu kullanımı


    <div x-data="init()">
        <input x-on:keydown.enter="uyari"  placeholder="enter tuşuna basın"/>
    </div>
    <script>
        function init(){
            return{
                uyari:function (e){
                    window.alert("Tasarım Kodlama")
                },
            }
        }
    </script>

</div>

function init(){

return{

uyari:function (e){

window.alert("Tasarım Kodlama")

}

</script>

Örnek : Yön tuşu kullanımı


    <div x-data="init()">
        <input x-on:keydown.arrow-up="uyari"  placeholder="enter tuşuna basın"/>
    </div>
    <script>
        function init(){
            return{
                uyari:function (e){
                    window.alert("Tasarım Kodlama")
                },
            }
        }
    </script>

</div>

function init(){

return{

uyari:function (e){

window.alert("Tasarım Kodlama")

}

</script>

Örnek : Klavye tuşları kullanımı (a harfine basınca uyarı verme)


    <div x-data="init()">
        <input x-on:keydown.a="uyari"  placeholder="enter tuşuna basın"/>
    </div>
    <script>
        function init(){
            return{
                uyari:function (e){
                    window.alert("Tasarım Kodlama")
                },
            }
        }
    </script>

</div>

function init(){

return{

uyari:function (e){

window.alert("Tasarım Kodlama")

}

</script>

x-model

Örnek: <input type="text" x-model="foo">

Söz dizimi: <input type="text" x-model="[data item]">

x-model özelliği elemente “çift yönlü bağlama” ekler. Yani, input elementinin değeri bileşenin veri öğesiyle senkronize tutulur.

Not: x-model metin girişleri, onay kutuları, radyo düğmeleri, metin alanları, seçimler ve çoklu seçimler üzerindeki değişiklikleri tespit edecek kadar zekidir. Bu how Vue would adresindeki senaryolara uygun çalışması gerekir.

.number belirteci Örnek: <input x-model.number="age">

number belirteci girişin değerini bir numaraya çevirir. Eğer giriş değeri geçerli bir numaraya çevrilemeyecekse, orjinal değer döndürülür.

.debounce belirteci Example: <input x-model.debounce="search">

The debounce belirteci bir değer güncellemesine bir “dalgalı tıklama engelleyici” ekler. Başka bir deyişle, olay yakalayıcısı, son olayın tetiklenmesi üzerinden belli bir zaman geçmedikçe çalışmaz. Yakalayıcı tekrar çağrılmaya hazır olduğunda, en son ki yakalayıcı cağrısı çalışır.

Varsayılan engelleme süresi 250 milisaniyedir.


    <div x-data="{ site: 'Tasarım Kodlama' }">
        <input type="text" x-model="site" />
    </div>

</div>

x-model değiştirici

Bir girdiye uygulandığında .number değiştiricisi, girdinin değerini bir sayıya dönüştürür.

Örnek:


    <div x-data="init()">
        <input type="text" 
                x-model.number="yas" 
                x-on:input="kontrol" 
        >
    </div>
    <script>
        function init(){
            return {
                yas:null,
                kontrol:function(){
                    console.log(typeof this.yas)
                }
            }
        }
    </script>

<input type="text"

x-model.number="yas"

x-on:input="kontrol"

</div>

function init(){

return {

yas:null,

kontrol:function(){

console.log(typeof this.yas)

}

</script>

Bir diğeri de .debounce değiştiricisi, bu harika. Bu, kodumuza kolayca geri bildirim eklememize yardımcı olur. Bu değiştirici, işleyicinin bağlı olduğu işleyiciyi belirli bir süre geçene kadar çalıştırmamasını sağlar. Yani, işleyici çalışmadan önce belirli bir süre bekleyecektir.

Örnek:


    <div x-data="{veri:null}">
        <input type="text" x-model.debounce="veri">
        <p x-text="veri"></p>
    </div>

</div>

Şimdi, text kutusuna yazdığımızda, text kutusunun değeri veri özelliğine atanacak. .debounce değiştiricisini eklediğimizden, veri özelliği text değeri girdiğinde almayacak, atanmadan önce 250ms bekleyecek. Yani eğer zaman geçmeden veri’ye erişmeye çalışırsak verinin eski değerini alacağız.

Not: 250ms, Alpine.js tarafından ayarlanan .debounce değiştiricisi için varsayılan zamandır. Zamanı kendimiz ayarlayabiliriz.


    <div x-data="{veri:null}">
        <input type="text" x-model.debounce.500ms="veri">
        <p x-text="veri"></p>
    </div>

</div>

x-ref

Bu yönerge, uygulandığı öğelerin DOM’una erişmek ve almak için kullanılır. x-ref‘i bir öğede ayarlamak için şunu yaparız:


    <div x-data="init()">
        <div x-ref="aciklama"><span>Tasarım Kodlama</span></div>
        <button x-on:click="mesaj">Kodu Gör</button>
    </div>
    <script>
        function init(){
            return {
                mesaj:function(){
                   this.$refs.aciklama.innerHTML="<h1>Hoşgeldiniz</h1>"
                }
            }
        }
    </script>

<div x-ref="aciklama"><span>Tasarım Kodlama</span></div>

</div>

function init(){

return {

mesaj:function(){

this.$refs.aciklama.innerHTML="<h1>Hoşgeldiniz</h1>"

}

</script>

Şimdi, x-ref direktifini iki bölüme ayarlıyoruz. x-ref direktifinin değeri Alpine.js tarafından $refs nesnesine ayarlanacaktır. $refs nesnesinden, DOM’a erişmek istediğimiz elemana x-ref yönergesindeki değerle başvurabiliriz. Direktif ile özelliğe iki şekilde ulaşabiliriz. İçerideki değeri değiştirmek için innerText kullanılırken HTML düzenlemesi için innerHTML ifadesini kullanabiliriz.

Sihirli Özellikler

Bu özelliklerin Alpine.js projemiz üzerinde büyülü bir etkisi var. Projemizde ve yerleşik olarak global değişkenler olarak bulunurlar Aşağıdaki bölümlerde göreceğiz.

$el

Bu sihirli özellik, kök bileşen kapsamının DOM’una erişir ve onu alır.


    <div x-data="init()">
        <button x-on:click="mesaj">Kodu Gör</button>
    </div>
    <script>
        function init(){
            return {
                mesaj:function(){
                   console.log(this.$el)
                }
            }
        }
    </script>

</div>

function init(){

return {

mesaj:function(){

console.log(this.$el)

}

</script>

$refs

Üzerinde x-ref yönergesi bulunan öğelerin DOM referansını tutar.


    <div x-data="init()">
        <div x-ref="aciklama"><span>Tasarım Kodlama</span></div>
        <button x-on:click="mesaj">Kodu Gör</button>
    </div>
    <script>
        function init(){
            return {
                mesaj:function(){
                   this.$refs.aciklama.innerHTML="<h1>Hoşgeldiniz</h1>"
                }
            }
        }
    </script>

<div x-ref="aciklama"><span>Tasarım Kodlama</span></div>

</div>

function init(){

return {

mesaj:function(){

this.$refs.aciklama.innerHTML="<h1>Hoşgeldiniz</h1>"

}

</script>

Yada daha kısa şekilde @click metodu içine kodları yazabiliriz.


    <div x-data="{}">
        <div x-ref="aciklama"><span>Tasarım Kodlama</span></div>
        <button @click="$refs.aciklama.innerHTML='<h1>Merhaba Dünya</h1>'">Değiştir</button>    
    </div>

<div x-ref="aciklama"><span>Tasarım Kodlama</span></div>

<button @click="$refs.aciklama.innerHTML='<h1>Merhaba Dünya</h1>'">Değiştir</button>

</div>

$event

$event, tarayıcıların yerel Olay Nesnesine erişmek için kullanılır. Bu, normal JS uygulamalarında olay işleyicilerinde aldığımız varsayılan e gibi çalışır.


    <div x-data="{}">
        <button @click="console.log($event)">Olay Kontrolü</button>    
    </div>

<button @click="console.log($event)">Olay Kontrolü</button>

</div>

Bir nesne içinde kullanmak için de this anahtarını kullanabilirsiniz.


    <div x-data="init()">
        <button @click="olay($event)">Olay Kontrolü</button>    
    </div>
    <script>
      function init(){
        return{
          olay:function(e){
            console.log(e)
          }
        }
      }
    </script>

<button @click="olay($event)">Olay Kontrolü</button>

</div>

function init(){

return{

olay:function(e){

console.log(e)

}

</script>

Bakın, olay fonksiyonuna $event‘ı parametre olarak gönderiyoruz, bu durumda, ifadede olay içinde çağrılır ve $event magic özelliğini iletir.

$nextTick

Bir callback’e geçirilen bu sihirli özellik,callback fonksiyonu yalnızca Alpine.js güncellemelerini yaptığında çağrılır.


  <div x-data="{ meyve: 'Elma' }">
    <button
        x-on:click="
            meyve = 'Armut';
            $nextTick(() => { console.log($event.target.innerText) });
        "
        x-text="meyve"
    ></button>
  </div>

<button

x-on:click="

meyve = 'Armut';

$nextTick(() => { console.log($event.target.innerText) });

x-text="meyve"

></button>

</div>

Yukarıdaki koda bakın, kapsamımızda başlangıç değeri ‘Elma’ olan bir metin özelliğimiz var.

Butona metni, x-text yönergesi kullanılarak text özelliğinin değerine göre belirlenir.

Butonun içinde ona eklenmiş bir tıklama olayımız vardır. İşleyici tıklandığında text özelliğinin değerini “Armut” olarak ayarlar ve $nextTick magic özelliğini çağırır. Şimdi, $nextTick‘teki callback, buton metnini günlüğe kaydeder. Buton tıklandığında, $ içindeki callback text = ‘Armut’ tarafından yapılan DOM güncellemesi tamamlanana kadar nextTick asla çağrılmaz. Bu nedenle, buton metni olarak “Elma” yerine “Armut” ifadesini göreceğiz.

$dispatch

Bu sihirli özellik, Alpine.js’de özel olayları sevk etmek, tetiklemek veya yıkmak için kullanılır.

Aşağıdaki gibi çağrılır.


$dispatch('custom-olay', yuklenen)

$dispatch('custom-olay', yuklenen)

Örnek kullanım:


  <div x-data="{}">
      <div @c-olay="console.log('Ben özel bir olayım.')">
        <button @click="$dispatch('c-olay', 90)">Tıkla</button>
      </div>
    </div>
  </div>

<button @click="$dispatch('c-olay', 90)">Tıkla</button>

</div>

Örnek 2:

Bu örnekte, bu @c olayını yaparak div üzerinde özel bir olay ayarladık, bu, tetiklendiğinde bir metni günlüğe kaydeden bir işleyiciye sahip bir olay haline gelir. olay adında c-event ve olay işleyici olay işleyici argümanlarına erişmek için $event.detail nesnesini kullanıyoruz. $dispatch özelliği tarafından gönderilen değiştirgeleri içerir.


  <div x-data="">
    <div @custom-event="console.log($event.detail)">
      <button @click="$dispatch('custom-event', { foo: 'bar' })">TIKLA</button>
      <!-- Tıklandığında console.log "bar" durumuna dönüşecek -->
    </div>
  </div>

<button @click="$dispatch('custom-event', { foo: 'bar' })">TIKLA</button>

</div>

Örnek 3:


  <div x-data="init()">
    <div @custom-event="olay($event)">
      <button @click="$dispatch('custom-event', { foo: 'bar' })">TIKLA</button>
      <!-- Tıklandığında console.log "bar" durumuna dönüşecek -->
      <h1 x-text="mesaj"></h1>
    </div>
  </div>
  <script>
    function init(){
      return{
        mesaj:"foo",
        olay:function(e){
          console.log(e.detail)
          this.mesaj=e.detail.foo
        }
      }
    }
  </script>

<button @click="$dispatch('custom-event', { foo: 'bar' })">TIKLA</button>

</div>

function init(){

return{

mesaj:"foo",

olay:function(e){

console.log(e.detail)

this.mesaj=e.detail.foo

}

</script>

Tüm bunlar, $dispatch’e Alpine.js ifadeleri aracılığıyla erişirken. Buna JavaScript’te, bir fonksiyon çağırsı iletirken arg olarak ileterek erişebiliriz.


  <div x-data="init()">
    <div @custom-event="console.log($event.detail)">
      <button @click="olay($dispatch)">TIKLA</button>
      <!-- Tıklandığında console.log "bar" durumuna dönüşecek -->
    </div>
  </div>
  <script>
    function init(){
      return{
        olay:function(dispatch){
          dispatch("custom-event", { foo: 'bar' });
        }
      }
    }
  </script>

<button @click="olay($dispatch)">TIKLA</button>

</div>

function init(){

return{

olay:function(dispatch){

dispatch("custom-event", { foo: 'bar' });

}

</script>

$watch

Bu sihirli yöntem, bir bileşen özelliğindeki değişiklikleri “izlemek” veya “dinlemek” için kullanılır.

Söz dizimine buradan bakın:


$watch('COMPONENT_PROP', (value) => {...})

$watch('COMPONENT_PROP', (value) => {...})

Basit bir örneği inceleyelim:


<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Aç Kapa</button>
</div>

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">

</div>

x-data direktifindeki open özelliği @click yöntemi ile değişmektedir. x-init direktifine geçirdiğimiz @watch sihirli özelliği ile open özelliğinin değişen durumu kontrol edilmekte ve her değişimde console içindeki değer yazdırılmaktadır. Burada $wacth özelliği verilerin değişimlerini kontrol edip bir fonksiyon çalıştırmak için kullanılmaktadır.

Bileşen Özellikleri Nasıl İzlenir?

Alphie.js, yeni bir bileşen kapsamı bildirmek için x-data direktifini kullanır. Alpine.js bileşen kapsamındaki bir özelliği “izlemek” için x-model direktifini kullanırız.


  <div x-data="{ad:''}">  
    <label for="ad">İsim:</label> 
      <input id="ad" type="text" x-model="ad" />  
      <p x-text="ad"></p> 
    </div>

</div>

x-data yönergesi, div öğesinde yeni bir bileşen kapsamı bildirir. Bileşenin boş bir dizge olan bir “name” özelliği vardır.

x-modeli, bileşen kapsamındaki name özelliği olan izlenecek özelliğin adına atanır. x-model, ad özelliğini girdi alanına bağlar, böylece girdi alanı değeri “ad” özelliği buna göre değişir ve özelliği yansıtan UI da değişiklikleri yansıtır.

Alpine.js Örnek Uygulama

Örnek uygulama albüm kapaklarını isimlerini listeleyen basit bir uygulamadan oluşacaktır. Uygulamada alpine.js ile tailwindcss kütüphaneleri CDN olarak dışarıdan yüklenmiştir.

Uygulamadaki JSON dosyası ise https://jsonplaceholder.typicode.com/ adresinden alınarak kullanılmıştır.

Örnek uygulamanın kodları:


<html>
<head>
    <title>Tasarım Kodlama</title>
    <meta charset="UTF-8">
    <!--Alpine.js-->
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    <!--tailwindCSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" integrity="sha512-RntatPOhEcQEA81gC/esYoCkGkL7AYV7TeTPoU+R9zE44/yWxVvLIBfBSaMu78rhoDd73ZeRHXRJN5+aPEK53Q==" crossorigin="anonymous" />
</head>
<body class="bg-gray-200">
  <div class="flex flex-col">
    <header class="flex flex-col">
      <h1 class=" text-center text-2xl p-5 bg-blue-700 text-white">Tasarım Kodlama</h1>
    </header>

    <!-- alpine.js uygulaması-->
    <main x-data="init()">
      <p class=" text-center text-lg p-1.5 bg-blue-500 text-white">AlpineJS ile Albüm Kapakları Listeleme Uygulaması(Demo Uygulama)</p>
      <div id="arama-panel" class="flex max-w-md mx-auto my-4 bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <input 
          type="text"
          placeholder="ID girin (Ör:3)"
          x-model="q"
          class="flex flex-grow shadow appearance-none border rounded mr-2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        >
        <button 
            @click="arama()"
            class="flex flex-none bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Getir</button>
      </div>
      <div id="liste" class="grid gap-5 grid-cols-4 max-w-6xl mx-auto">
        <template  x-for="sonuc in sonuclar">
          <div class="bg-white shadow-md rounded px-8 pt-6 pb-8">
              <img x-bind:src="sonuc.thumbnailUrl" class="rounded w-full" alt="">
              <div x-text="sonuc.title" class="text-lg font-semibold"></div>
          </div>
        </template>
      </div>
    </main>
    <footer class="fixed bottom-0 p-4 text-center bg-gray-900 text-white w-full underline">
      <a href="https://www.tasarimkodlama.com">Tasarım Kodlama</a>
    </footer>
  </div>
  <script>

    function init(){
      return {
        sonuclar:[],
        q:"",
        arama:function(){
          let adres=""
          if(this.q!=""){
            fetch("https://jsonplaceholder.typicode.com/albums/"+this.q+"/photos")
            .then((res)=>res.json())
            .then((res)=>{ this.sonuclar =res
            console.log()}) //diziye çevirdim
            .catch((err)=>console.log(err))
            
          }
        }
      }
    }
  </script>
</body>
</html>

<html>

<head>

<title>Tasarım Kodlama</title>

</head>

<h1 class=" text-center text-2xl p-5 bg-blue-700 text-white">Tasarım Kodlama</h1>

</header>

<p class=" text-center text-lg p-1.5 bg-blue-500 text-white">AlpineJS ile Albüm Kapakları Listeleme Uygulaması(Demo Uygulama)</p>

<input

type="text"

placeholder="ID girin (Ör:3)"

x-model="q"

class="flex flex-grow shadow appearance-none border rounded mr-2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

<button

@click="arama()"

class="flex flex-none bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Getir</button>

</div>

</div>

</template>

</div>

</main>

<a href="https://www.tasarimkodlama.com">Tasarım Kodlama</a>

</footer>

</div>

function init(){

return {

sonuclar:[],

q:"",

arama:function(){

let adres=""

if(this.q!=""){

fetch("https://jsonplaceholder.typicode.com/albums/"+this.q+"/photos")

.then((res)=>res.json())

.then((res)=>{ this.sonuclar =res

console.log()}) //diziye çevirdim

.catch((err)=>console.log(err))

}

</script>

</body>

</html>

Uygulamada init() fonksiyonunu x-data direktirifine iletttik. ardından butona tıklandığında text kutusundaki değeri almak için text kutusunu x-modal=”q” ile q özelliğine bağladık. Butona tıklandığında da arama() fonksiyonu çalışması için @click=”arama()” işlevini ilettik.

Arama işlemini gerçekleştirmek için fetcth fonksiyonu ile JSON dosyamızın alınacağı adresi belirtip dönen değeri sonuclar özelliğine atadık.

HTML kısmında verileri göstermek için <template x-for=”sonuc in sonuclar”> direktifini kullanarak verileri listeledik.

Uygulamanın kodlarını kopyalayıp çalıştırdığınızda ekran çıktısı aşağıdaki gibi olacaktır.

Sonuç Olarak

Alpine.js hakkında çok şey öğrendik. Alpine.js kullanmanın avantajlarıyla başladık. Daha sonra, Alpine.js lib’nin CDN ve NPM’den nasıl kurulacağını öğrendik. Daha sonra, temel Alpine.js direktiflerini öğrendik, her birini nasıl çalıştıklarına dair bir demo örnekleri ile öğrendik.

Eğer bununla veya eklemem gereken, düzeltmem veya kaldırmam gereken herhangi bir sorunuz varsa, yorum yapmaktan, veya bana mesaj atmaktan çekinmeden mesaj atabilirsiniz.

Kaynak:

https://github.com/alpinejs/alpine/blob/master/README.tr.md#x-bind

https://codepen.io/smashingmag/pen/QWbMBJj

https://codewithhugo.com/alpinejs-x-on/

https://stackoverflow.com/questions/62963333/trigger-change-event-after-click-event-in-alpine-js

EtiketlerAlpine.js Alpine.js Örnekleri

Bu yazıda neler ele alınacak?

Alpine.js Nedir?

Alpine ne kadar iyidir? Gücü Nereden Gelir?

Alpine.js dosya yapısı nedir?

Bu framework benim için mi?

JQuery ve Alpine.js arasındaki fark nedir?

Bu frameworkü jQuery gibi kullanabilir miyim?

Bunu TailwindCSS’de mi kullanıyorlar?

API’si Vue.js’ye eşdeğer olmasına rağmen Alpine.js nasıl daha hafif olabilir?

Yükleme

x-data

x-init

x-show

x-bind

Sınıf özellikleri için x-bind

Boolean özellikler için x-bind

x-text

x-html

x-if

x-if

x-for

x-for

x-on

Tuş Kontrolleri

x-model

x-model değiştirici

x-ref

Sihirli Özellikler

$el

$refs

$event

$nextTick

$dispatch

$watch

Bileşen Özellikleri Nasıl İzlenir?

Alpine.js Örnek Uygulama

Sonuç Olarak

Kaynak:

Bunları da beğenebilirsiniz

Yorum Yap

Sınıf özellikleri için `x-bind`

Boolean özellikler için `x-bind`

`x-if`

`x-for`