Vue Academy · Ders

Bileşen Oluşturma ve Kaydetme

Bileşenleri genel ve yerel olarak tanımlayın ve kaydedin.

Bileşen Oluşturma ve Kaydetme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Component'ler Neden Kullanılır?

component yapıları, bir kullanıcı arayüzünü bağımsız ve yeniden kullanılabilir parçalara ayırmanızı sağlar.

Her biri kendi şablonunu, mantığını ve stilini yönetir
Bunları daha büyük yapılar hâlinde birleştirirsiniz
Kodu düzenli ve bakımı kolay hâle getirirler

Tek Dosyalı Component'ler

Tek Dosyalı Component (.vue), üç bloğu tek bir dosyada bir araya getirir.

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

Component Tanımlama

Şablon bloğu işaretlemeyi içerir. Betik bloğu mantığı barındırır. Stil bloğu CSS'i barındırır.

Kapsamla sınırlı stiller yalnızca bu component'e uygulanır
Şablonların öğeler için net bir yapıya ihtiyacı vardır

Component Adları

Geleneksel olarak component dosyalarında ve kullanımlarında PascalCase kullanılır.

Dosya: UserCard.vue
Şablonlarda: <UserCard />
PascalCase, component'leri yerel HTML öğelerinden ayırır

Component İçe Aktarma

Bir component'i kullanmak için ihtiyacınız olan yere içe aktarın.

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

Yerel Kayıt (betik kurulumu)

Betik kurulumu ile bir component'i içe aktarmanız, onu şablonda kullanılabilir hâle getirir. Ek bir kayıt adımı gerekmez.

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

Yerel Kayıt (Seçenekler API'si)

Seçenekler API'si ile component'leri components seçeneğine kaydedersiniz.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Genel Kayıt

Genel kayıt, app.component kullanılarak bir component'in içe aktarmadan her yerde kullanılabilmesini sağlar.

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

Genel ve Yerel Kayıt

Kayıt kapsamını seçme:

Genel kullanım açısından kolaydır; ancak paketi büyütür ve kullanımı izlemeyi zorlaştırır
Yerel açık içe aktarmalar, daha iyi ağaç budama ve daha anlaşılır bağımlılıklar sağlar

Gerçekten her yerde kullanılacak birkaç temel component dışında yerel kaydı tercih edin.

Bir Component'i Yeniden Kullanma

Aynı component birçok kez kullanılabilir. Her örnek bağımsızdır.

<template>
  <UserCard />
  <UserCard />
  <UserCard />
</template>

<!-- three separate instances,
     each with its own state -->

Component'leri İç İçe Yerleştirme

Component'ler bir ağaç oluşturur. Bir üst component, kendi alt component'lerini içerebilir; bu alt component'ler de kendi alt component'lerini içerebilir.

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

Hızlı Kontrol

Component kaydı hakkındaki anlayışınızı sınayın.

Özet: Component Oluşturma

Component oluşturmayı ve kaydetmeyi öğrendiniz:

.vue dosyaları şablon, betik ve stil içerir
PascalCase adlarını kullanın
Betik kurulumu, içe aktarılan component'leri otomatik olarak kaydeder
Seçenekler API'si components seçeneğini kullanır
app.component() genel kayıt yapar

Sırada: props ve özel olaylar.

Sıkça Sorulan Sorular

“Bileşen Oluşturma ve Kaydetme” dersi ücretsiz mi?

Evet — “Bileşen Oluşturma ve Kaydetme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Bileşen Oluşturma ve Kaydetme” dersinde ne öğreneceğim?

Bileşenleri genel ve yerel olarak tanımlayın ve kaydedin. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“Bileşen Oluşturma ve Kaydetme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön