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

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

WBOY

リリース： 2023-06-16 08:57:46

オリジナル

2740 人が閲覧しました

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

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

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

<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>

ログイン後にコピー

上記のコードでは、<template> タグに HTML が含まれています。 <script> タグにはコンポーネントの JavaScript 部分が含まれ、<style> タグにはコンポーネントの 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 ファイル。 # タグを使用しない場合は、相対パスを使用してインポートする必要があります (例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>import HelloWorld from '../components/HelloWorld.vue'</pre><div class="contentsignin">ログイン後にコピー</div></div>2)。コンポーネント # でスタイルを直接定義しないでください。 ## スタイルを直接定義する単一ファイルコンポーネントで使用することはできますが、コンポーネント内でスタイルを直接定義することはお勧めできません。統一されたスタイル管理を維持するには、CSS プリプロセッサ (SASS、LESS など) または CSS モジュールを使用してスタイルを導入することをお勧めします。 <p></p>3. コンポーネントに大量のロジックコードを記述しないでください<p></p>単一ファイルコンポーネントにすべてのロジックコードを含めることができますが、コンポーネントに大量のロジックコードを記述することはお勧めできません。コンポーネント。コンポーネントをシンプルかつ理解しやすく保つために、複雑なロジックコードを処理用の別個のモジュールにカプセル化することをお勧めします。 <p></p>4. 名前の競合を防ぐ名前付けルールに従う<p></p>コンポーネント間の名前の競合を避けるために、ダッシュで接続された小文字を使用するなどの命名規則に従うことをお勧めします (例: <p>私のコンポーネント</p>)。 <p><code>4. 概要

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

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