vue の各単一ファイル コンポーネントは何で構成されていますか?

Vue の単一ファイル コンポーネントは、次の 3 つの部分で構成されます。 テンプレート: HTML 構文を使用して視覚的表現を定義します。スクリプト: JavaScript 構文を使用して論理動作を定義します。スタイル: CSS 構文を使用してスタイルを定義します。

#Vue 単一ファイル コンポーネントの構成

Vue 単一ファイル コンポーネントは 3 つの部分で構成されます:

1. テンプレート##テンプレート パーツは、コンポーネントの視覚的表現を定義します。これは HTML 構文を使用して記述されており、Vue ディレクティブと補間を使用してデータを動的にレンダリングできます。

2. スクリプト

スクリプト部分は、コンポーネントの論理的な動作を定義します。これは JavaScript で書かれており、コンポーネントのデータ、メソッド、ライフサイクル フックが含まれています。

3. スタイル

スタイル部分はコンポーネントのスタイルを定義します。 CSS 構文を使用して記述でき、クラス セレクター、ID セレクター、メディア クエリを含めることができます。

例:

<code class="html"><template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      message: 'Welcome to the Vue world!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
p {
  color: red;
}
</style></code>

この例:

template
• セクションでは、タイトルと次のテンプレートを定義します。メッセージの div コンテナー。
script
• セクションでは、コンポーネントのタイトルとメッセージ データを定義します。
style
• セクションでは、h1 要素と p 要素のスタイル属性を定義します。

以上がvue の各単一ファイル コンポーネントは何で構成されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。