VUE3 基本チュートリアル: Vue.js 単一ファイル コンポーネント (SFC) の使用

フロントエンド テクノロジの継続的な開発に伴い、効率的、便利、強力なフロントエンド フレームワークとして Vue.js が開発で使用されることが増えています。 Vue.js3 の正式リリースによる重要な更新の 1 つは、単一ファイル コンポーネント (SFC) のサポートです。この記事では、Vue.js3 で単一ファイル コンポーネントを使用する方法を紹介します。

1. 単一ファイル コンポーネントとは何ですか?

Vue.js では、単一ファイル コンポーネントとは、Vue コンポーネントのすべての関連コード (HTML、CSS、JavaScript を含む) を別のファイルにカプセル化することを指します。たとえば、「He​​lloWorld」という名前のコンポーネントは、次の形式で単一ファイル コンポーネントとして記述することができます。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

上記のコードでは、d477f9ce7bf77f53fbcf36bec1b69b7a タグに HTML が含まれています。 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグにはコンポーネントの JavaScript 部分が含まれ、c9ccee2e6ea535a969eb3f532ad9fe89 タグにはコンポーネントの CSS 部分が含まれます。このうち、 exportdefault はコンポーネントオブジェクトを宣言し、 data() はコンポーネントのデータを定義し、 stylescoped はスタイルが現在のコンポーネントにのみ適用されることを意味します。成分。

単一ファイル コンポーネントを使用する利点は、コンポーネントの管理とメンテナンスが容易になり、統合開発ツール (Vue Devtools など) を使用して簡単にデバッグおよび検査できることです。

2. 単一ファイル コンポーネントを使用するにはどうすればよいですか?

Vue.js3 を使用した単一ファイル コンポーネントの作成は非常に簡単です。まず、Vue CLI を使用してプロジェクトを初期化する必要があります:

1. Vue CLI をインストールします

npm install -g @vue/cli

2. Vue プロジェクトを作成します

vue create my-app

3. プロジェクト ディレクトリを入力します

cd my-app

次に、プロジェクト内に「HelloWorld」という名前の単一ファイル コンポーネントを作成します。

1. コンポーネント ファイルの作成

#src/components ディレクトリに「HelloWorld.vue」という名前のファイルを作成します。ファイルの内容は次のとおりです:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

<style scoped>
  h1 {
    color: red
  }
</style>

2. コンポーネントをページにインポートします

HelloWorld コンポーネントを、そのコンポーネントを使用する必要があるページに導入します:

<template>
  <div class="home">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

上記のコードでは、

import ステートメントは、HelloWorld コンポーネントをインポートするために使用され、components 属性は、コンポーネントを現在のページのサブコンポーネントとして登録することを意味し、## を使用できます。 #HelloWorld がページに自動的に追加されます。ラベルを定義します。 3. 注意事項

1. コンポーネントをインポートする際はパスに注意してください

コンポーネントをインポートする場合は、パスの書き方に注意してください。上の例では、プロジェクトのルート ディレクトリを表すために

@

タグを使用したため、 import HelloWorld from '@/components/HelloWorld.vue' は import src /components を意味します。 /HelloWorld.vue ファイル。 # タグを使用しない場合は、相対パスを使用してインポートする必要があります (例: <pre class='brush:javascript;toolbar:false;'>import HelloWorld from '../components/HelloWorld.vue'</pre>2)。コンポーネント

# でスタイルを直接定義しないでください。 ## スタイルを直接定義する単一ファイル コンポーネントで使用することはできますが、コンポーネント内でスタイルを直接定義することはお勧めできません。統一されたスタイル管理を維持するには、CSS プリプロセッサ (SASS、LESS など) または CSS モジュールを使用してスタイルを導入することをお勧めします。

3. コンポーネントに大量のロジック コードを記述しないでください

単一ファイル コンポーネントにすべてのロジック コードを含めることができますが、コンポーネントに大量のロジック コードを記述することはお勧めできません。コンポーネント。コンポーネントをシンプルかつ理解しやすく保つために、複雑なロジック コードを処理用の別個のモジュールにカプセル化することをお勧めします。

4. 名前の競合を防ぐ名前付けルールに従う

コンポーネント間の名前の競合を避けるために、ダッシュで接続された小文字を使用するなどの命名規則に従うことをお勧めします (例:

私のコンポーネント

)。

4. 概要

単一ファイル コンポーネントは Vue.js3 の重要な機能の 1 つであり、便利なコンポーネント管理方法を提供し、開発効率を大幅に向上させることができます。単一ファイルのコンポーネントを使用する場合は、パスの記述、スタイル定義、論理処理、および命名規則に注意する必要があります。この記事が、皆さんが Vue.js3 の使い方を理解するのに役立つことを願っています。

以上がVUE3 基本チュートリアル: Vue.js 単一ファイル コンポーネント (SFC) の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。