Vueを学ぶ

第3章 コンポーネントの構成 コンポーネントを構成する

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前の章では、Vueの基礎と、Options APIを使って一般的なディレクティブを持つVueコンポーネントを書く方法を学んだ。次のレベル、つまりリアクティビティやフックを使ってより複雑なVueコンポーネントを構成する方法について、深く掘り下げる準備が整った。

この章では、Vue Single File Component（SFC）標準、コンポーネントのライフサイクルフック、およびコンピューテッドプロパティ、ウォッチャー、メソッド、参照などの高度なリアクティブ機能を紹介する。また、スロットを使用して、スタイルでコンポーネントの構造を維持しながら、コンポーネントのさまざまな部分を動的にレンダリングする方法も学ぶ。この章が終わる頃には、アプリケーションで複雑なVueコンポーネントを書けるようになるだろう。

Vueシングルファイルコンポーネントの構造

Vueでは、新しいファイル形式規格であるVue SFCが導入され、.vue という拡張子で表記される。SFCを使用すると、コンポーネントのHTMLテンプレートコード、JavaScriptロジック、およびCSSスタイリングを同じファイルに、それぞれ専用のコードセクションに記述できる。Vue SFCには、3つの重要なコードセクション が含まれる：

テンプレート

このHTMLコードブロックは、コンポーネントのUIビューをレンダリングする。コンポーネントごとに、最上位の要素 に一度だけ表示される。

スクリプト

このJavaScriptコードブロックにはコンポーネントのメインロジックが含まれており、コンポーネントファイル 。

スタイル

このCSSコードブロックは、コンポーネントのスタイリングを含む。これはオプションであり、コンポーネントファイル ごとに必要なだけ出現させることができる。

例 3-1は、MyFirstComponent という名前の Vue コンポーネントの SFC ファイル構造の例である。

例3-1. MyFirstComponent コンポーネントのSFC構造

<template>
 <h2 class="heading">I am a a Vue component</h2>
</template>
<script lang="ts">
export default {
 name: 'MyFistComponent',
};
</script>
<style>
.heading {
  font-size: 16px;
}
</style>

図 3-1 に示すように、非 SFC コンポーネントコードを SFC にリファクタリングすることもできる。

図3-1. コンポーネントを非SFC形式からSFC形式にリファクタリングする。

図3-1が示すように、以下のリファクタリングを行う：

• template フィールドの文字列値として表示されるHTMLコードを、Single File Componentの<template> セクションに移動する。

• MyFirstComponent の残りのロジックを、シングルファイルコンポーネントの ...