Vue 3のsetup構文の雛形

Vue 3 setupの構成要素

Vueファイルは、Vue 3のシングルファイルコンポーネント (SFC) の雛形で、以下のように構成されます。

<script lang="ts" setup>
// ここにTypeScriptによるコンポーネントのロジックを記述します。
</script>

<template>
	<!-- ここにHTMLテンプレートを定義し、コンポーネントの表示部分を構築します。 -->
</template>

<style lang="scss" scoped>
/* ここにSCSSを使用して、コンポーネント固有のスタイルを定義します。 */
</style>

各セクションの説明

1. <script>: setup属性が指定されているため、Composition APIを使用してコンポーネントのロジックを定義できます。lang="ts"属性を指定することで、TypeScriptを使用することができます。つけなければ普通のJSで記述できます。

2. <template>: このセクションでは、コンポーネントの表示部分をHTMLテンプレートとして定義します。Vueディレクティブやバインディング構文を使用して、データやイベントハンドラをテンプレートに関連付けることができます。

3. <style>: このセクションでは、SCSSを使用してコンポーネント固有のスタイルを定義します。lang="scss"属性が指定されていることで、SCSSのシンタックスを使用することができます。また、scoped属性が指定されているため、このコンポーネント内で定義されたスタイルは、このコンポーネントの範囲に限定されます。他のコンポーネントに影響を与えることはありません。

この雛形を使って、Vue 3のシングルファイルコンポーネントを楽々作成できますね。コンポーネントのロジック、表示、スタイルが1つのファイルにまとまっているおかげで、開発がスムーズに進むこと間違いなしです！