前へ

次へ

Vue コンポーネントの概要

完了

定義上、コンポーネントは "より大きな全体の一部または要素" です。アプリケーションの作成について考える場合、通常は、小さい部分で作業し、それらを結合してより大きな全体、つまりアプリケーションを作成します。 Vue では、複数のコンポーネントを作成して、それを使って完全なアプリケーションを作成できます。

Vue コンポーネント

JavaScript ファイルを使用してコンポーネントを作成することもできますが、より一般的な方法は、.vue ファイル内で Vue 構文を使用して単一ファイル コンポーネントを作成することです。 単一ファイル コンポーネントでは、よりわかりやすい構造で、より自己完結型のセットアップが可能です。 また、Pug や Stylus などのさまざまなプリプロセッサを使用することもできます。

コンポーネントを作成するということは、基本的には、通常の HTML タグと同様に、アプリケーションで使用できる新しいタグを作成するということです。 この形式のセマンティック タグによって、ページに表示される内容が明確になります。 <booking-form></booking-form> のようなタグの場合、予約を作成するためのフォームが表示され、<booking-list></booking-list> では予約の一覧が表示されると考えられます。

Vue コンポーネントの構造

Vue コンポーネントには、style、script、template の 3 つの主要なセクションが含まれています。

スタイル

style セクションには、任意の有効な CSS や、使用しているプリプロセッサの構文を含めることができます。

scoped 属性を使用して、CSS をその特定のコンポーネントに "スコープ" することもできます。 スタイルは、そのコンポーネントにのみ適用されます。そのため、ページの他の部分を誤って変更してしまうことを心配することなく、クラスやその他の設定を作成できます。

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

script

script セクションには、コンポーネントに使用されるスクリプトが格納されます。 Vue JavaScript コンポーネントと同様に、data()、methods、components などのさまざまな Vue プロパティとメソッドをエクスポートできます。

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

template

template セクションには、情報を表示し、ユーザーがデータを操作できるようにするために使用される HTML テンプレートが格納されます。 JavaScript ベースのコンポーネントを使用する場合、template は通常、.html ファイル内にあるか、JavaScript ファイル内の文字列リテラルです。

template で使用される HTML 構文は、データを表示するのにハンドルバー ({{}}) を使用するなど、JavaScript ベースのコンポーネントと同じです。

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

Note

テンプレートには 1 つのルート要素が必要です。 つまり、product を id として持つ div 要素は兄弟を持つことができません。 これは、前のコードに示すように、子要素のみ持つことができます。

読み込みとコンポーネント

前に取り上げたように、単一ファイル コンポーネントは .vue の拡張子で保存されます。 これらのコンポーネントは、import ステートメントを使用して、他のモジュールと同様の方法で読み込むことができます。 components プロパティを使用してこれらを登録できます。 登録されたコンポーネントは、template 内のタグとして使用できるようになります。

Note

import を使用してライブラリをインポートする場合、通常は、その名前にパスカル ケースを使用します。この場合、各単語の最初の文字は大文字になります (たとえば、PascalCase)。 しかし、HTML では、タグ名には、各単語を小文字にし、それらの間にダッシュ (-) を入れるケバブ ケースを使用するという規則があります。 Vue では、この 2 つの異なる規則が自動的に管理されます。

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

前のコードでは、コンポーネント ProductDisplay がインポートされ、components プロパティに追加されます。 その後、テンプレートで ProductDisplay が使用されると、このコンポーネントが通常の HTML 要素ではなく解析が必要なものであることが Vue のコンパイラによって判断されます。

懸念事項の分離

HTML、CSS、および JavaScript を 1 つのファイルに配置することは、種類ごとに別々のファイルを作成するというベスト プラクティスから逸脱しているように見えるかもしれません。 実際には、これらのファイルを切り替えることによって、それらの間の相互依存のために開発が遅くなる可能性があります。 また、ファイルを切り替えなければならないことに関連する、認識的な負荷もあります。

単一ファイル コンポーネントでは、src 属性を使用して、script と style セクションに別々のファイルを作成できます。

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

続行