Olay Dinleyicileri

Olay Dinleyicileri

DOM olaylarını v-on direktifi ile dinleyebiliriz:

<button v-on:click="increment">{{ count }}</button>

Sık kullanıldığı için, v-on ayrıca bir kısayol sözdizimine de sahiptir:

<button @click="increment">{{ count }}</button>

Burada, increment methods seçeneği kullanılarak tanımlanan bir fonksiyonu referans alır:

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // bileşen durumunu güncelle
      this.count++
    }
  }
}

createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // bileşen durumunu güncelle
      this.count++
    }
  }
})

Bir yöntem içinde, bileşen örneğine this kullanarak erişebiliriz. Bileşen örneği, data ile tanımlanan veri özelliklerini açığa çıkarır. Bu özellikleri değiştirerek bileşen durumunu güncelleyebiliriz.

Burada, increment `` içinde tanımlanan bir fonksiyonu referans alır:

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  // bileşen durumunu güncelle
  count.value++
}
</script>

Burada, increment setup()'dan dönen nesnedeki bir yöntemi referans alır:

setup() {
  const count = ref(0)

  function increment(e) {
    // bileşen durumunu güncelle
    count.value++
  }

  return {
    count,
    increment
  }
}

Fonksiyon içinde, refs'i değiştirerek bileşen durumunu güncelleyebiliriz.

ipucu

Olay yöneticileri, satır içi ifadeleri kullanabilir ve değiştiricilerle yaygın görevleri basitleştirebilir. Bu detaylar Kılavuz - Olay Yönetimi'nde ele alınmıştır.

Şimdi, increment yönteminifonksiyonunu kendiniz uygulamaya çalışın ve bunu butona v-on ile bağlayın.