Beyanda Rendering

Editörde gördüğünüz şey, bir Vue Tek Dosya Bileşeni (SFC)dir. Bir SFC, bir arada bulunan HTML, CSS ve JavaScript'i kapsayan, yeniden kullanılabilir bir kendine yeterli kod bloğudur ve bir .vue dosyası içinde yazılmıştır.

Vue'nun temel özelliği beyan edici renderlemedir: HTML'yi genişleten bir şablon sözdizimi kullanarak, HTML'nin JavaScript durumu temelinde nasıl görünmesi gerektiğini tarif edebiliriz. Durum değiştiğinde, HTML otomatik olarak güncellenir.

Değiştirildiğinde güncellemeleri tetikleyebilen durum reaktif olarak kabul edilir. Vue'un reactive() API'sini kullanarak reaktif durumu bildirebiliriz. reactive() kullanılarak oluşturulan nesneler, normal nesneler gibi çalışan JavaScript Proxy'lerdir:

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

reactive() yalnızca nesneler (diziler ve Map ve Set gibi yerleşik türler dahil) üzerinde çalışır. Öte yandan, ref(), herhangi bir değer türünü alabilir ve iç değerini .value özelliği altında açığa çıkaran bir nesne oluşturabilir:

import { ref } from 'vue'

const message = ref('Merhaba Dünya!')

console.log(message.value) // "Merhaba Dünya!"
message.value = 'Değiştirildi'

bilgi

reactive() ve ref() detayları Reaktivite Temelleri Rehberi'nde ele alınmaktadır.

Bileşenin `bloğunda bildirilen reaktif durum, şablonda doğrudan kullanılabilir. Bu,counternesnesinin değeri vemessage` ref'ine dayalı dinamik metin renderlemenin nasıl yapılacağıdır; mustache sözdizimi kullanarak:

createApp()'e geçirilen nesne bir Vue bileşenidir. Bir bileşenin durumu, setup() fonksiyonu içinde bildirilmalı ve bir nesne kullanılarak döndürülmelidir:

setup() {
  const counter = reactive({ count: 0 })
  const message = ref('Merhaba Dünya!')
  return {
    counter,
    message
  }
}

Döndürülen nesnedeki özellikler şablonda kullanılabilir hale gelecektir. Bu, message değerine dayalı dinamik metin renderlemenin nasıl yapılacağıdır; mustache sözdizimi kullanarak:

<h1>{{ message }}</h1>
<p>Count: {{ counter.count }}</p>

message ref'ine şablonlarda erişirken .value kullanmamıza gerek olmadığını unutmayın: Bu, daha özlü kullanım için otomatik olarak açılır.

Değiştirildiğinde güncellemeleri tetikleyebilen durumlar reaktif olarak kabul edilir. Vue'da, reaktif durum bileşenlerde tutulur. Örnek kodda, createApp()'e geçirilen nesne bir bileşendir.

Reaktif durumu, bir işlev döndüren data bileşen seçeneği kullanarak bildirebiliriz:

export default {
  data() {
    return {
      message: 'Merhaba Dünya!'
    }
  }
}

createApp({
  data() {
    return {
      message: 'Merhaba Dünya!'
    }
  }
})

message özelliği şablonda kullanılabilir hale gelecektir. Bu, message değerine dayalı dinamik metin renderlemenin nasıl yapılacağıdır; mustache sözdizimi kullanarak:

<h1>{{ message }}</h1>

Mustache içindeki içerik yalnızca tanımlayıcılar veya yollarla sınırlı değildir - geçerli herhangi bir JavaScript ifadesini kullanabiliriz:

<h1>{{ message.split('').reverse().join('') }}</h1>

Artık kendi reaktif durumunuzu oluşturmaya çalışın ve bunu şablondaki `` için dinamik metin içeriği renderlemek için kullanın.

Artık bir data özelliği oluşturmaya çalışın ve bunu şablondaki `` için metin içeriği olarak kullanın.

Beyanda Rendering​

Beyanda Rendering