最初の Vue.js コンポーネントの構築

Vue.js はコンポーネントベースのフレームワークです。つまり、アプリケーションは再利用可能なコンポーネントを使用して構築されます。各コンポーネントは独自の HTML、CSS、および JavaScript をカプセル化します。この記事では、最初の Vue.js コンポーネントをゼロから構築するプロセスについて説明します。

新しい Vue コンポーネントの作成

Vue.js コンポーネントは通常、.vue ファイルに保存されます。各コンポーネント ファイルは、'<template>'、'<script>'、'<style>' の 3 つのメイン セクションで構成されています。Greeting.vue というシンプルなコンポーネントを作成しましょう。

1. プロジェクト フォルダーに移動します: ターミナルを使用して Vue プロジェクト ディレクトリに移動します:

cd my-vue-project

2. 新しいコンポーネント ファイルを作成します: src/components ディレクトリに、Greeting.vue という名前の新しいファイルを作成します。

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

この Greeting.vue コンポーネントには以下が含まれます。

• <template>: コンポーネントの HTML 構造を定義します。
• <script>: データプロパティやメソッドなど、コンポーネントの JavaScript ロジックが含まれます。
• <style>: このコンポーネントにスコープされた CSS スタイルが含まれます。 scoped 属性により、スタイルがこのコンポーネントにのみ適用されるようになります。

コンポーネントの使用

コンポーネントを作成したら、それを Vue アプリケーション内で使用する必要があります。 src/App.vue ファイルを開き、Greeting コンポーネントが含まれるように変更します。

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

この更新された App.vue ファイルでは次のようになります。

• コンポーネントをインポートします: import Greeting from './components/Greeting.vue'; を使用して、Greeting コンポーネントをインポートします。
• コンポーネントを登録します: export default ブロックの components オブジェクトに Greeting を追加します。
• コンポーネントの使用: アプリでコンポーネントを使用するには、'<template>' セクションに '<Greeting />' タグを挿入します。

コンポーネントのテスト

変更を保存し、開発サーバーが実行中であることを確認します。ブラウザを開き、http://localhost:8080 に移動します。ページにレンダリングされた Greeting コンポーネントのコンテンツが表示されます。

結論

最初の Vue.js コンポーネントを作成して使用できました。コンポーネントは Vue.js アプリケーションの構成要素であり、ユーザー インターフェイスのさまざまな部分をカプセル化して管理できます。Vue.js に慣れてきたら、コンポーネント プロパティ、イベント、ライフサイクル フックなどの高度な機能を調べて、よりインタラクティブで複雑なアプリケーションを構築できます。

Vue.js コンポーネントを試し続け、知識を広げて、動的で魅力的な Web アプリケーションを作成しましょう。