コンポーネントを作成する

7 分

ユーザーが月へのクルーズの予約を作成できるアプリケーションを作成したいと思います。いくつかの演習を通じて、予約の作成時にユーザーが入力するフォーム用のコンポーネントに加え、作成された予約の一覧を表示するためのものを作成します。最初に作成するコンポーネントによって、両方の子コンポーネントがホストされます。

Visual Studio Code 拡張機能をインストールする

Visual Studio Code では、開発作業に役立つ数多くの拡張機能が Visual Studio Marketplace にあります。ここでは、次の 2 つを活用します。

Volar によって、Visual Studio Code での .vue ファイルのサポートが可能になります。
Sarah Drasner のVue VSCode スニペットによって、Visual Studio Code でスニペットが使用可能になります。

Visual Studio Code で、[拡張機能] ワークベンチを開きます。
検索ボックスに「Vue VSCode スニペット」と入力します。
[Vue VSCode Snippets] で [Install] を選択して、Vue VSCode スニペットと Vetur の両方をインストールします。

ホストコンポーネントを作成する

"ホスト" コンポーネントを作成しましょう。

src/components で、Host.vue という名前のファイルを作成します。
Host.vue で、「vue」と入力して、スニペットメニューから <[vue]> [with default.vue] (default.vue を使用) を選択します。

このスニペットを使用すると、既定の構造が作成されます。

スクリプトセクションを更新する

スニペットによって作成される script 要素には、export default が既に作成されています。 export default コマンドを使用すると、別のコンポーネントからこのコンポーネントを Vue に読み込むことができるようになります。必要なコードをこのセクションに追加しましょう。

export default の中かっこ ({ }) 内に、次のコードを追加してコンポーネントの名前を指定し、データを登録して、今後のために 2 つのコメントを追加しておきます。

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

name フィールドは、コンポーネントの名前を設定します。 data() パーツは、cruise オブジェクトをコンポーネントのデータとして登録します。 bookings は、後でクルーズ予約の一覧を保管するために使用します。 TODO コメントは、今後のためのマーカーとして機能します。

Note

TODO コメントは、後で完了する必要があるタスクのコードにメモを貼るための良い方法です。

テンプレートを追加する

データが登録されたので、HTML を template 要素に追加してコア情報を表示しましょう。今後のために 2 つのプレースホルダーも追加しましょう。

Host.vue の template 要素の内側に、次の HTML を追加してクルーズの名前と説明を表示します。 HTML には、後で作成する 2 つのコンポーネントのプレースホルダーが含まれています。

<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>

スタイルを追加する

HTML を作成したので、アプリケーションのスタイルを追加しましょう。

Host.vue の style 要素の内側に、次の CSS を追加します。

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;
}

この CSS によって、いくつかの構造と色がアプリケーションに追加されます。

ホストコンポーネントをアプリケーションへのエントリポイントとして設定します。

Vue CLI で作成される main.js ファイルで、App.vue がアプリケーションへのエントリポイントとして読み込まれます。 Host という新しいコンポーネントを作成したのは、これが目的です。 main.js を、私たちのコンポーネントを使用するよう更新しましょう。

main.js を開いて、次のコードを使用して内容を置き換えます。

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

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

アプリケーションをテストする

コンポーネントが作成されてスクリプトが更新されたので、ページをテストしてみましょう。

[ファイル]>[すべて保存] を選択して、すべてのファイルを保存します。
ブラウザーに戻り、http://localhost:8080 を表示するタブを更新します。

更新されたページが表示されます。

これで、最初の単一ファイルコンポーネントが Vue.js で作成されました。

コンポーネントを作成する

Visual Studio Code 拡張機能をインストールする

ホスト コンポーネントを作成する

スクリプト セクションを更新する