Bileşen oluşturma

7 dakika

Bir kullanıcının aya yolculukta rezervasyon oluşturmasına olanak tanıyan bir uygulama oluşturmak istiyoruz. Birkaç alıştırma boyunca, kullanıcının bir rezervasyon oluşturmak üzere tamamlayacağı form için bir bileşen ve oluşturulan rezervasyonların listesini görüntülemek için başka bir bileşen oluşturacaksınız. Oluşturacağınız ilk bileşen her iki alt bileşeni de barındıracaktır.

Visual Studio Code uzantılarını yükleyin

Visual Studio Code, geliştirme çabalarınızda yardımcı olmak için Visual Studio Market'te çok sayıda uzantıya sahiptir. İki avantajından yararlanacağız:

Vetur, Visual Studio Code'da .vue dosyaları için destek sağlar.
Sarah Drasner'dan Vue VSCode Kod Parçacıkları , Visual Studio Code'da kod parçacıklarına olanak tanır.

Visual Studio Code'da Extensions workbench'i açın.
Arama kutusuna Vue VSCode Kod Parçacıkları yazın.
Vue VSCode Parçacıklarını ve Vetur'u yüklemek için Vue VSCode Kod Parçacıkları'nın altında Yükle'yi seçin.

Konak bileşenini oluşturma

Şimdi Konak bileşenini oluşturalım.

src/components içinde Host.vue adlı bir dosya oluşturun.
Host.vue'da vue yazın ve kod parçacıkları menüsünden default.vue ile vue'yu> seçin<.

Kod parçacığı varsayılan yapıyı oluşturur.

Betik bölümünü güncelleştirme

Kod parçacığı, zaten oluşturulmuş olan export default öğesini bizim için oluştururscript. export default komutu bu bileşenin Vue'daki başka bir bileşen tarafından yüklenmesini sağlar. Gerekli kodu bu bölüme ekleyeceğiz.

öğesinin küme ayraçlarının ({ }) export defaultiçine aşağıdaki kodu ekleyerek bileşeni adlandırın, verileri kaydedin ve gelecek için iki açıklama ekleyin:

name: 'Host',
data() {
    return {
        cruise: {
            name: 'Cruise to the moon',
            description: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            cabins: [
                { name: 'Coach', price: 125000 },
                { name: 'Business', price: 275000 },
                { name: 'First', price: 430000 },
            ]
        },
        bookings: [
            { name: 'Sample', price: 0 }
        ]
    }
},

// TODO: Add components

// TODO: Add methods

alanı name , bileşenin adını ayarlar. data() bölümü, nesneyi bileşen için veri olarak kaydedercruise. Daha sonra cruise rezervasyonlarının listesini depolamak için kullanacağız bookings . Açıklamalar TODO , gelecek için işaretleyici görevi görecektir.

Dekont

TODO açıklamalar, daha sonra tamamlanması gereken görevler için kodunuzda notlar yerleştirmenin harika bir yoludur.

Şablonu ekleme

Veriler kayıtlı olarak, temel bilgileri görüntülemek için template öğesine HTML'yi ekleyelim. Ayrıca gelecek için birkaç yer tutucu ekleyeceğiz.

Host.vue dosyasındaki öğesinin template içine, yolculuğun adını ve açıklamasını görüntülemek için aşağıdaki HTML'yi ekleyin. HTML, daha sonra oluşturacağımız iki bileşen için bir yer tutucu içerir.

<section>
<div class="nav-bar"></div>
<h1>Relecloud Galaxy Tours</h1>

<div>
    <h2>{{ cruise.name }}</h2>
    <div>{{ cruise.description }}</div>
    <hr />

    <div class="row">
        <div>
            <!-- TODO: Add booking-form -->

        </div>
        <div>
            <!-- TODO: Add booking-list -->

        </div>
    </div>
</div>
</section>

Stili ekleme

OLUŞTURULAN HTML ile uygulamamızın stilini ekleyelim.

style Host.vue dosyasındaki öğesinin içine aşağıdaki CSS'yi ekleyin:

body {
    background-color: #f2f2f2;
    margin: 0, 5%;
    font-family: tahoma;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    vertical-align: middle;
    margin: 2em;
}

.button {
    background-color: #39495c;
    border-radius: 5px;
    color: white;
    text-align: center;
}

.nav-bar {
    background: linear-gradient(-50deg, #010801, #0d0d60);
    height: 60px;
    margin-bottom: 25px;
}

Bu CSS, uygulamamıza biraz yapı ve renk katacaktır.

Konak bileşenini uygulamaya giriş noktası olarak ayarlama

Vue CLI, uygulamaya giriş noktası olarak App.vue'yi yükleyen bir main.js dosyası oluşturur. Bu amaçla Host adlı yeni bir bileşen oluşturduk. Main.js dosyasını bileşenimizi kullanacak şekilde güncelleştireceğiz.

main.js dosyasını açın ve aşağıdaki kodu kullanarak içeriği değiştirin:

import { createApp } from 'vue'
import Host from './components/Host.vue'

createApp(Host).mount('#app')

Uygulamayı test etme

Bileşenimiz oluşturulduktan ve betik güncelleştirildiğinden sayfayı test edelim.

Dosya>Tümünü kaydet'i seçerek tüm dosyaları kaydedin.
Tarayıcınıza dönün ve görüntülenen http://localhost:8080sekmeyi yenileyin.

Güncelleştirilmiş sayfanız artık görünür.

Şimdi Vue.js'de ilk tek dosyalı bileşeninizi oluşturdunuz!

Devam et