Önceki

Sonraki

Vue bileşenlerini kullanmaya başlama

Tamamlandı

Tanım gereği, bileşen "daha büyük bir bütüne ait bir parça veya öğedir." Uygulama oluşturmayı düşünürken genellikle daha küçük parçalar ile çalışır ve bunları daha büyük bir bütün halinde birleştirirsiniz: uygulamanız. Vue, daha sonra tam bir uygulama oluşturmak için kullanabileceğiniz bileşenler oluşturmanıza olanak tanır.

Vue bileşenleri

JavaScript dosyalarını kullanarak bileşenler oluşturabilmenize rağmen, en yaygın yöntem bir .vue dosyasının içindeki Vue söz dizimini kullanarak tek dosyalı bileşenler oluşturmaktır. Tek dosyalı bileşenler daha temiz bir yapıya ve daha bağımsız bir kuruluma olanak sağlar. Hatta Pug veya Stylus gibi çeşitli ön işlemcileri kullanmanıza bile olanak sağlar.

Bileşenler oluşturduğunuzda, temelde uygulamanızda normal HTML etiketlerine benzer şekilde kullanabileceğiniz yeni etiketler oluşturursunuz. Bu anlam etiketleri biçimi, sayfada görüntülenenleri net bir şekilde açıklar. Gibi <booking-form></booking-form> bir etiket büyük olasılıkla rezervasyon oluşturmak için bir form görüntüler ve <booking-list></booking-list> büyük olasılıkla bir rezervasyon listesi görüntüler.

Vue bileşen yapısı

Vue bileşenleri üç ana bölüm içerir: style, scriptve template.

stili

bölümü style , kullanmakta olduğunuz herhangi bir geçerli CSS veya ön işlemcinin söz dizimini içerebilir.

Ayrıca, özniteliğini kullanarak CSS'nizin kapsamını belirli bir bileşene göre de ayarlayabilirsinizscoped. Stiller yalnızca bu bileşene uygulanır, böylece sayfanın diğer bölümlerini yanlışlıkla değiştirme konusunda endişelenmeden sınıflar ve diğer ayarlar oluşturabilirsiniz.

<style>
.demo {
    font-family: Verdana
}
</style>

betiğini çalıştırın

script bölümünde bileşen için kullanılan betik depolanmıştır. Vue JavaScript bileşeninde olduğu gibi, , methodsve gibi data()çeşitli Vue özelliklerini ve componentsyöntemlerini dışarı aktarabilirsiniz.

<script>
export default {
    data() {
        return {
            product: {
                name: 'Cruise to the moon',
                description: 'A cool cruise to the moon!'
            }
        }
    }
}
</script>

şablonu

template bölümünde, bilgileri görüntülemek ve kullanıcının verilerle etkileşim kurmasına izin vermek için kullanmak istediğiniz HTML şablonu bulunur. JavaScript tabanlı bir bileşen kullandığınızda, template genellikle .html dosyasının içindedir veya JavaScript dosyasında dize değişmez değeridir.

içinde template kullanılan HTML söz dizimi, verileri görüntülemek için tanıtıcı çubukları ({{}}) kullanma dahil olmak üzere JavaScript tabanlı bileşenlerle aynıdır.

<template>
  <div id="product">
    <div>{{ product.name }}</div>
    <div>{{ product.description }}</div>
  </div>
</template>

Dekont

Şablonların bir kök öğesi olması gerekir. Diğer bir ifadeyle div , ile productid öğesi hiçbir eşdüzey öğeye sahip olamaz. Önceki kodda gösterildiği gibi yalnızca alt öğelere sahip olabilir.

Yükleme ve bileşenler

Daha önce vurgulandığı gibi, tek dosyalı bileşenler . vue uzantısıyla kaydedilir. deyimini kullanarak import bu bileşenleri diğer modüllere benzer şekilde yükleyebilirsiniz. Özelliğini kullanarak components bunları kaydedebilirsiniz. Bileşenler kaydedildikten sonra, içinde templateetiket olarak kullanılabilir hale gelir.

Dekont

kullanarak importbir kitaplığı içeri aktarırken, her sözcüğün ilk harfinin büyük harfle yazıldığı ad için PascalCase kullanılması standarttır (örneğin, PascalCase). Ancak HTML'de kural, etiket adlarının her sözcükle küçük harflerle ve aralarında bir tireyle (-) kebab-case kullanmasına yöneliktir. Vue, iki farklı kuralı otomatik olarak yönetir.

<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
    components: {
        ProductDisplay
    }
}

Önceki kodda bileşen ProductDisplay içeri aktarılır ve özelliğine components eklenir. Ardından, ProductDisplay şablonda kullanıldığında, Vue'nun derleyicisi bu bileşenin normal bir HTML öğesi değil ayrıştırması gereken bir şey olduğunu söyleyebilir.

Endişelerin ayrılması

HTML, CSS ve JavaScript'i tek bir dosyaya yerleştirmek, her tür için ayrı dosyalar oluşturmanın en iyi uygulamasından bir çıkış gibi görünebilir. Uygulamada, bu dosyalar arasında geçiş yapmak, aralarındaki bağımlılıklar nedeniyle geliştirmenin yavaşmasına neden olabilir. Ayrıca dosyalar arasında geçiş yapmakla ilişkili bilişsel bir yük de vardır.

Tek dosyalı bileşenler, özniteliğini kullanarak ve style bölümleriniz script için ayrı dosyalar oluşturmanıza src olanak sağlar.

<template>
    <div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>

Devam et