Vue.js

# SFC 構文の仕様

# はじめに

*.vue ファイルは、HTML のような構文を使って Vue コンポーネントを記述するカスタムファイル形式です。各 *.vue ファイルは 3 種類のトップレベル言語ブロックから構成されます: <template> と <script> と <style> に、必要に応じてカスタムブロックがあります:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 言語ブロック

# <template>

  • 各 *.vue ファイルは一度に最大 1 つのトップレベル <template> ブロックを含めることができます。

  • コンテンツは抽出され、@vue/compiler-dom に渡され、JavaScript の Render 関数にプリコンパイルされ、エクスポートされたコンポーネントの render オプションとしてアタッチされます。

# <script>

  • 各 *.vue ファイルは一度に最大 1 つの <script> ブロック（<script setup> を除く）を含むことができます。

  • スクリプトは ES モジュールとして実行されます。

  • default export は、プレーンなオブジェクトとして、または defineComponent の戻り値として、Vue コンポーネントのオプションオブジェクトでなければなりません。

# <script setup>

  • 各 *.vue ファイルは一度に最大 1 つの <script setup> ブロック（通常の <script> を除く）を含むことができます。

  • スクリプトは事前処理され、コンポーネントの setup() 関数として使用されます。つまり、コンポーネントのインスタンスごとに 実行されます。<script setup> のトップレベルのバインディングは、自動的にテンプレートへ公開されます。詳細については、<script setup> の専用ドキュメント を参照してください。

# <style>

  • 1 つの *.vue ファイルには複数の <style> タグを含めることができます。

  • <style> は、現在のコンポーネントにスタイルをカプセル化するのに役立つ scoped や module 属性を持つことができます（詳しくは SFC Style Features を参照）。カプセル化モードが異なる複数の <style> タグを同じコンポーネントに混在させることができます。

# カスタムブロック

様々なプロジェクト固有のニーズ、例えば <docs> ブロックなど、追加のカスタムブロックを *.vue ファイルに含めることができます。カスタムブロックの実例には、次のようなものがあります:

カスタムブロックの処理はツールに依存します。もし独自のカスタムブロック統合を構築したいなら、SFC ツール で詳細について参照してください。

# 自動 name 推論

SFC は次のようなケースで ファイル名 からコンポーネント名を自動で推測します:

  • 開発警告のフォーマット
  • DevTools のインスペクタ
  • 再帰的な自己参照。例えば FooBar.vue というファイル名は、そのテンプレート内で <FooBar/> というようにそれ自体を参照できます。これは明示的に登録・インポートされたコンポーネントよりは優先度が低くなります。

# プリプロセッサ

ブロックは lang 属性を使ってプリプロセッサの言語を宣言することができます。もっとも一般的なケースは <script> ブロックで TypeScript を使用することです:

<script lang="ts">
  // TypeScript を使用
</script>
1
2
3

lang はどのブロックにも適用できます。例えば <style> に SASS (opens new window) や <template> に Pug (opens new window) を使えます:

<template lang="pug">
p {{ msg }}
</template>

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>
1
2
3
4
5
6
7
8
9
10

プリプロセッサとの統合はツールチェーンによって異なる場合があることに注意してください。例については、各ドキュメントを参照してください:

# Src Imports

*.vue コンポーネントを複数のファイルに分割したい場合は、src 属性を使って、言語ブロックに外部ファイルをインポートできます:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
1
2
3

src インポートは webpack のモジュールリクエストと同じパス解決ルールに従うことに注意してください。つまり次のことです:

  • 相対パスは ./ から始まる必要があります
  • npm の依存関係からリソースをインポートできます:
<!-- インストールされた "todomvc-app-css" npm パッケージのファイルをインポート -->
<style src="todomvc-app-css/index.css">
1
2

src インポートはカスタムブロックでも機能します。例えば:

<unit-test src="./unit-test.js">
</unit-test>
1
2

# コメント

各ブロック内では、使用している言語（HTML、CSS、JavaScript、Pug など）のコメント構文を使用してください。トップレベルのコメントには、HTML コメント構文を使用します: <!-- comment contents here -->

← ツール →