Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Vue.js Event Yönetimi: Kullanıcı Etkileşimleri Nasıl Oluşturulur?

Bu rehberde ne öğreneceksiniz?​

Bu rehberde Vue.js event sistemiyle kullanıcı etkileşimleri oluşturmayı öğreneceksiniz.
Amaç, tıklama ve özel olaylarla etkileşimli bir yönetim paneli geliştirmektir.

Örnek senaryoda bir Sunucu Yönetim Paneli hazırlanır.

🧠 Teknik Özet​

Bu rehber Vue.js olay (event) yönetimini anlatır.
Problem: Kullanıcı etkileşimlerini kontrol etmek.
Çözüm: v-on, modifier ve $emit kullanımı.

Ön Gereksinimler​

  • Node.js v14+ kurulu olmalı
  • Vue CLI yüklü olmalı
  • HTML, CSS ve JavaScript temeli bilinmeli

1️⃣ Projeyi ve Veri Yapısını Hazırlama​

Vue 3 tabanlı proje oluşturun.

vue create rabisu-sunucu-paneli
  • Bu komut Vue 3 yapılandırmasıyla proje oluşturur.
  • Sunucu verilerini tanımlayın.
export default [
  { id: 1, isim: 'İstanbul-Node-01', lokasyon: 'Türkiye', durum: 'Aktif' },
  { id: 2, isim: 'Amsterdam-VDS-04', lokasyon: 'Hollanda', durum: 'Aktif' }
]
  • Bu veri Rabisu veri merkezlerini simüle eder.

2️⃣ Sunucu Kartı Bileşeni Oluşturma​

<template>
  <div class="sunucu-karti">
    <h3>{{ sunucu.isim }}</h3>
    <p>Lokasyon: {{ sunucu.lokasyon }}</p>
    <small>Durum: {{ sunucu.durum }}</small>
  </div>
</template>

<script>
export default {
  props: {
    sunucu: { type: Object, required: true }
  }
}
</script>
  • Bu bileşen veriyi prop ile alır.

3️⃣ v-on ile Olay Dinleme​

<div class="sunucu-karti" @click="sunucuSec(sunucu.isim)">
  • Bu kod tıklama olayını yakalar.
function sunucuSec(isim) {
  alert(`$&#123;isim&#125; inceleniyor.`)
}
  • Bu fonksiyon kullanıcıya geri bildirim verir.

4️⃣ Event Modifier Kullanımı​

Tek Seferlik Çalıştırma​

@click.once="sunucuSec(sunucu.isim)"
  • Event sadece ilk tıklamada çalışır.

Tuş Kombinasyonu​

@click.shift="sunucuSec(sunucu.isim)"
  • Event sadece Shift + Tık ile çalışır.

5️⃣ Custom Event ($emit) Kullanımı​

  1. Child bileşenden parent’a veri gönderin.
@click="$emit('favoriEkle', sunucu)"
  • Bu kod özel bir event tetikler.

6️⃣ Parent Bileşende Event Yakalama​

<sunucu-karti
  :sunucu="item"
  @favoriEkle="listeyeEkle"
/>
function listeyeEkle(sunucu) {
  if (!favoriler.value.includes(sunucu)) {
    favoriler.value.push(sunucu)
  }
}
  • Bu işlem favori listesini günceller.

❓ Sıkça Sorulan Sorular (SSS)​

1. @ ile v-on arasında fark var mı? Hayır. @click, v-on:click kısaltmasıdır.

2. $emit ile birden fazla veri gönderilir mi? Evet. Parametreler virgülle iletilebilir.

3. .prevent ne işe yarar? Varsayılan HTML davranışını engeller.

🎯 Sonuç​

Bu rehberde Vue.js event yönetimini öğrendiniz. Modifier ve custom event kullanımıyla etkileşimli yapı kurdunuz.

Projelerinizi Rabisu Bulut altyapısında güvenle çalıştırabilirsiniz. Kodlarınız kadar hızlı sunucular sizi bekliyor 🚀