Vue.js で単一のファイル コンポーネントを作成する方法

Vue.js は、開発者がフロントエンド アプリケーションを簡単に作成できるようにするよく知られた JavaScript フレームワークです。 Vue.js では、コードの編成と保守の効率を高めるために、単一ファイルのコンポーネントが非常に重要です。この記事では、Vue.js で単一ファイルのコンポーネントを作成する方法を説明します。

単一ファイル コンポーネントとは何ですか?
Vue.js の単一ファイル コンポーネントは、HTML、CSS、JavaScript を 1 つのファイルに結合します。このようにして、開発者はコードを簡単に整理し、更新に費やす時間を短縮できます。 Vue.js は、単一ファイルのコンポーネントを独立したモジュールとして処理し、各コンポーネントを JavaScript ファイルにパッケージ化します。こうすることで、コンポーネントを簡単に共有して再利用できます。

単一ファイル コンポーネントを作成する
単一ファイル コンポーネントを作成する手順は次のとおりです:

ステップ 1: vue ファイルを作成する
Vue.js の単一ファイル コンポーネントは次のとおりです。通常使用される .vueファイル拡張子。エディターを使用して新しいファイルを開き、.vue ファイルとして保存できます。たとえば、コンポーネントを MyComponent.vue として保存します。

ステップ 2: コンポーネントを定義する
次のコードを使用してコンポーネントを定義できます:

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">+1</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "My Component",
      message: "Hello World"
    };
  },
  methods: {
    increment() {
      this.message += "!";
    }
  }
};
</script>

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

上記のコードでは、3 つの単一ファイル コンポーネント パーツを定義します: template 、script、および style。 template 部分には HTML コードが含まれ、script 部分には JavaScript コードが含まれ、style 部分には CSS コードが含まれます。

また、data() メソッドを使用して、title 変数と message 変数も定義します。 data() メソッドはオブジェクトを返す必要があることに注意してください。 increment() メソッドは、message 変数を更新し、それに感嘆符を追加するために使用されます。 scoped キーワードは、CSS スタイルをローカルに適用するために使用されます。

ステップ 3: コンポーネントを導入する
単一ファイル コンポーネントを作成した後、それを Vue.js アプリケーションに導入する必要があります。コンポーネントを導入する手順は次のとおりです。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  name: "App",
  components: {
    MyComponent
  }
};
</script>

上記のコードでは、import ステートメントを通じて MyComponent.vue ファイルを導入しました。次に、コンポーネントを components オブジェクトに登録しました。

もちろん、フォルダーを Vue フォルダーにハングすることもできます (グローバル Vue フォルダーが設定されていると仮定します)。たとえば、コンポーネントを components というフォルダーに配置します。この場合、import ステートメントを次のように更新できます。

import MyComponent from '@/components/MyComponent.vue';

Vue.js アプリケーションにコンポーネントを導入したので、<my- を使用できます。アプリケーション内ではcomponent>タグで使用します。

概要
Vue.js で、単一ファイルのコンポーネントを作成するにはどうすればよいですか。 HTML、CSS、JavaScript を 1 つのファイルに結合して、整理とメンテナンスを容易にすることができます。単一ファイルのコンポーネントは、.vue ファイルを作成し、コンポーネントを定義し、コンポーネントを導入するという手順で作成できます。このアプローチは、再利用可能なコードを整理して作成するための優れた方法です。

以上がVue.js で単一のファイル コンポーネントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。