Giriş
Büyük bir uygulama geliştirirken, kodun okunmasını, yapılandırılmasını ve bakımını kolaylaştırmak için onu daha küçük bileşenlere ayırmak her zaman iyi bir fikirdir. Vue'ya yeni başlayanların çoğu, en azından kavramsal olarak hangi bileşenlerin ne olduğunu anlar, ancak neleri yapıp neyi yapamadıklarını tam olarak anlamayabilirler.
Bu kılavuzda, Vue'daki bir bileşenin ne olduğuna, nasıl çalıştığına, bunlar aracılığıyla veri ve olayların nasıl iletileceğine ve çok daha fazlasına göz atacağız.
Vue Bileşeni nedir?
Bileşenler şablonlar, stiller ve JavaScript öğeleri içeren Vue öğelerinin yeniden kullanılabilir örnekleridir. Her bir HTML öğesinin nasıl "kendine ait bir şey" olduğuna benzer şekilde, her bileşen de "kendine ait bir şeydir" ve hem Vue bileşenleri hem de HTML öğeleri, bunları web sayfaları için yapı taşları olarak kullanmamıza izin verir.
Vue bileşenlerini, kendi tanımlayabileceğiniz ve değiştirebileceğiniz, JavaScript ile doldurulmuş HTML öğeleri olarak düşünebilirsiniz.
Tipik bir Vue uygulaması, gerektiği kadar tekrar kullanılabilen çok sayıda bileşenden oluşur.
Örneğin, normal bir web sitesinde tüm sayfalarda görünen bölümler bulunur - gezinti çubuğu, üst bilgi, alt bilgi vb. Bu nedenle, her birini ayrı bir bileşen haline getirmek iyi bir uygulama olarak kabul edilir. Bu şekilde, iyi yapılandırılmış, okunabilir, yeniden kullanılabilir ve bakımı kolay bir kod oluşturuyoruz:
Vue Bileşeni Nasıl Oluşturulur
Projemizin nasıl oluşturulduğuna bağlı olarak bir Vue bileşeni oluşturmanın iki temel yolu vardır – yapı kurulumu olan veya olmayan. İlk durumda, her bileşen ayrı bir dosyada saklanır. İkinci durumda, tek bir dosyada birden çok bileşen olabilir.
Not: nedir açıklamak kurulum kurulumu ve nasıl gerçekleştirileceği bu kılavuzun kapsamının çok ötesindedir. Vue temelleri hakkında daha fazla bilgi edinmek istiyorsanız, başlamak için iyi bir yer "Hızlı başlangıç" resmi Vue belgelerinden makale.
Derleme Kurulumuyla Vue Bileşenleri Oluşturma
Çoğu proje kullanılarak oluşturulur kurulum kurulumuTek Dosya Bileşenleri oluşturmamızı sağlayan (SFC'ler) – özel bileşen dosyaları ile .vue
eklenti. Bu, bir Vue bileşeninin şablonunu, mantığını ve stilini tek bir dosyada özetlememize olanak tanır:
<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>
Not: Mevcut ve gelecekteki HTML öğeleriyle çakışmaları önlemek için, bileşenlerimizi adlandırırken tek sözcüklü adlar yerine çok sözcüklü adlar kullanmak her zaman en iyisidir. Bu, kök bileşen gibi yerleşik bileşenler için geçerli değildir (App
, Transition
, ve benzeri).
Derleme Kurulumu Olmadan Vue Bileşenleri Oluşturma
Herhangi bir nedenle aşağıdaki gibi bir paket yöneticisi kullanamıyorsanız: npm
Vue'yu makinenize kurmak için uygulamanızda Vue'yu kullanmaya devam edebilirsiniz. Vue kullanarak binaya bir alternatif npm
aracılığıyla Vue yüklemektir. CDN (İçerik Dağıtım Ağı) doğrudan uygulamanızda. Bir Vue bileşeni oluşturmanın bu yolunu hızlıca gözden geçirelim.
Vue'yu oluşturmadan yüklemek, düz JavaScript'te yaptığımız gibi Vue'ye özgü işlevleri kullanmamızı sağlayacaktır. Sözdizimi, olağan SFC'lerde gördüğümüze biraz benzer:
export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}
Bu kılavuzda, kullanacağız SFC sözdizimi, bileşen oluşturmanın en yaygın kullanılan yöntemi olduğu için.
Bileşenleri Vue'da Kaydetme
Şimdiye kadar, Vue.js'de bileşenlerin nasıl oluşturulacağını gördük. Bir sonraki adım, bu bileşenleri başka bir bileşen içinde kullanmak olacaktır. (ebeveyn-çocuk hiyerarşisi).
Bunu yapmak için önce kullanmak istediğimiz bileşenleri kaydetmemiz gerekir. Bu kayıt, bileşenlerin içe aktarılmasını ve ardından kaydedilmesini gerektirir. Bunu yapmak için iki seçenek vardır – global ve yerel kayıt.
Vue Bileşenleri – Küresel Kayıt
Global olarak kayıtlı bileşenler, adından da anlaşılacağı gibi, global olarak mevcuttur, yani uygulamamızın herhangi bir bileşeninde onları tekrar almak zorunda kalmadan kullanılabilirler. Bu, kullanılarak bir bileşenin kaydedilmesiyle gerçekleştirilir. app.component()
yöntem:
import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)
Birçok bileşene sahip olduğumuz bir durumda, zincir onları bu şekilde:
app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)
Bileşenlerimizi kaydettikten sonra, bunları aşağıdaki sözdizimini kullanarak bu uygulamadaki herhangi bir bileşenin şablonunda kullanabiliriz:
<ChildComponent/>
<ProfileComponent/>
Vue Bileşenleri – Yerel Kayıt
Çoğu durumda yerel kaydı kullanacağız çünkü bu, kayıtlı bileşenlerimizin kullanılabilirliğini kapsamamıza izin veriyor. Bu bileşenleri içe aktarma ve ardından bunları components
seçeneği bunu gerçekleştirir:
<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>
Bileşenleri adlandırırken, CamelKılıf bunun şablonlardaki yerel bir HTML öğesinden ziyade bir Vue bileşeni olduğunu netleştirmek için. Bu, JavaScript'te bileşenlerin içe aktarılmasını ve kaydedilmesini de kolaylaştırır.
Not: Şablon içindeki kayıtlı bileşenimize başvurmak için genellikle şunu kullanırız: CamelKılıf or kebap durum etiketler – <MyComponent />
or <my-component />
, Sırasıyla.
Vue Bileşenleri Üzerinden Veri Aktarma
Bileşen oluşturmanın faydalarından biri, kodu modüler hale getirerek yeniden kullanabilme yeteneğidir.
Her öğrencinin verilerini profil sayfasından alması gereken bir kullanıcı profili bileşeni oluşturduğumuzu varsayalım; bu durumda, bu verileri profil bileşeninden (ana bileşen) kullanıcı profili bileşenine (alt bileşen) iletmeliyiz ve props kullanacağız.
destekler
Prop'lar, bir bileşene kaydedebileceğimiz özel niteliklerdir, böylece ana bileşenden alt bileşene veri aktarabiliriz. props
komut dosyası etiketi içindeki seçenek:
<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>
Not: Donanımlar ve farklı türdeki verilerin ana bileşenden alt bileşene nasıl aktarılacağı hakkında daha fazla bilgiyi şurada bulabilirsiniz: “Vue Props Rehberi”.
yuvaları
Vue yuvaları, her türlü içeriği bir bileşenden diğerine geçirmemize izin veren ayrılmış alanlardır. Bu, donanımlardan daha merkezi bir kontrol sağlar çünkü donanımlardan farklı olarak ana bileşen, alt bileşenin içindeki içeriği kontrol eder. Örneğin, aşağıdaki düğmeyi yapabiliriz:
<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>
Daha sonra bu bileşeni istediğimiz yerde kullanabilir ve ona istediğimiz içeriği verebiliriz. Bir içerik verilmemesi, ona verdiğimiz varsayılan değeri kullanacağı anlamına gelir (Beni Tıklayın):
<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>
Olayları Vue Bileşenlerinden Yayma
Propların ana bileşenden alt bileşene veri göndermek için kullanıldığını öğrendik. Ancak alt bileşenden üst bileşene bir şey göndermenin bir yolu olup olmadığını merak edebiliriz. Ve cevap Evet, olaylar alt bileşenden üst bileşene de gönderilebilir.
En iyi uygulamalar, endüstri tarafından kabul edilen standartlar ve dahil edilen hile sayfası ile Git'i öğrenmek için uygulamalı, pratik kılavuzumuza göz atın. Googling Git komutlarını durdurun ve aslında öğrenmek o!
Bir üst bileşenimiz olduğunu varsayalım (App.vue
) tek bir alt bileşen içeren (MyBlogPost.vue
). Ayrıca alt bileşen, başlığı değiştirmesi beklenen bir düğme içerir.
Bir düğme tıklandığında sayfamızın başlığını değiştirmek istediğimizi varsayalım, böylece bir işlev tetiklenir:
<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>
Ve alt bileşen şöyle görünecektir:
<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>
Sonuç
Bu kılavuzda, Vue kullanan herkes için gerekli olan Vue'daki bileşenlerle nasıl çalışılacağını öğrendik. Ayrıca nasıl veri gönderilip alınacağını ve olayların nasıl yayılacağını da öğrendik.
- SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
- Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
- Kaynak: https://stackabuse.com/introduction-to-vue-components/
- 1
- 10
- 7
- 9
- a
- kabiliyet
- Hakkımızda
- başarılı
- aslında
- Uyarmak
- Türkiye
- veriyor
- alternatif
- her zaman
- ve
- Başka
- cevap
- kimse
- hiçbir yerde
- uygulamayı yükleyeceğiz
- görünmek
- Uygulama
- Tamam
- göre
- öznitelikleri
- kullanılabilirliği
- mevcut
- temel
- Temeller
- Çünkü
- Yeni Başlayanlar
- faydaları
- İYİ
- Ötesinde
- Blokları
- sınır
- mola
- inşa etmek
- bina
- yerleşik
- düğmesine tıklayın
- yapamam
- dava
- durumlarda
- merkezi
- değişiklik
- çocuk
- açık
- kod
- çoğunlukla
- bileşen
- bileşenler
- kavramsal olarak
- sonuç
- kabul
- içeren
- içerik
- kontrol
- kontroller
- olabilir
- yaratmak
- çevrimiçi kurslar düzenliyorlar.
- Oluşturma
- CSS
- görenek
- veri
- adanmış
- Varsayılan
- teslim
- bağlı
- gelişen
- farklı
- direkt olarak
- belgeleme
- yapıyor
- aşağı
- dropbox
- her
- kolay
- kolayca
- elemanları
- etkinleştirmek
- sağlar
- gerekli
- olaylar
- Her
- örnek
- mevcut
- açıklayan
- uzatma
- Başarısızlık
- fileto
- dosyalar
- Ad
- odak
- takip etme
- Airdrop Formu
- itibaren
- tamamen
- işlev
- işlevsellikleri
- Ayrıca
- gelecek
- Git
- Vermek
- verir
- Küresel
- Küresel
- Go
- Tercih Etmenizin
- rehberlik
- hands-on
- sahip olan
- hiyerarşi
- duraksamak
- Ne kadar
- Nasıl Yapılır
- HTML
- HTTPS
- ICON
- Fikir
- ithalat
- ithal
- in
- dahil
- dahil
- kurmak
- Giriş
- IT
- JavaScript
- büyük
- ÖĞRENİN
- öğrendim
- öğrenme
- LG
- yerel
- Bakın
- gibi görünmek
- makine
- yapılmış
- korumak
- Sürdürülebilir
- yapmak
- YAPAR
- Yapımı
- müdür
- çok
- anlamına geliyor
- yöntem
- olabilir
- modüler
- Daha
- çoğu
- çoklu
- isim
- isimleri
- adlandırma
- yerli
- ihtiyaçlar
- ağ
- yeni
- sonraki
- sayısız
- resmi
- ONE
- seçenek
- Opsiyonlar
- kendi
- paket
- Yapmak
- yer
- Sade
- Platon
- Plato Veri Zekası
- PlatoVeri
- Pratik
- uygulama
- Profil
- proje
- Projeler
- Hızlı
- hızla
- Okumak
- neden
- teslim almak
- Kırmızı
- kayıt olmak
- kayıtlı
- kayıt
- kayıtlar
- ayrılmış
- yeniden kullanılabilir
- Yüzük
- kök
- kapsam
- İkinci
- bölümler
- ayrı
- gölge
- benzer
- tek
- durum
- yuvaları
- daha küçük
- So
- bir şey
- biraz
- alanlarda
- standartlar
- başlama
- adım
- Yine
- dur
- saklı
- yapı
- Öğrenci
- sunmak
- böyle
- sözde
- SVG
- sözdizimi
- TAG
- Bizi daha iyi tanımak için
- şablon
- şablonları
- The
- bu nedenle
- şey
- İçinden
- zamanlar
- Başlık
- için
- çok
- geçiş
- tetiklenir
- gerçek
- türleri
- tipik
- tipik
- anlamak
- us
- kullanım
- kullanıcı
- değer
- Ve
- üzerinden
- vue
- yolları
- ağ
- Web sitesi
- Ne
- Nedir
- hangi
- irade
- içinde
- olmadan
- İş
- çalışır
- Dünya
- XML
- Sen
- kendiniz
- zefirnet