VUE3開発の基礎入門：基本機能の実装

フロントエンド開発において、VUE は間違いなく非常に人気のあるフレームワークです。 VUE3 のリリースにより、ますます多くの開発者がこの新しいバージョンの VUE を学習し、使用し始めています。この記事では、VUE3 を使用してフロントエンド アプリケーションを開発する方法を紹介し、いくつかの簡単な例に基づいていくつかの基本機能を実装する方法を示します。

1. 環境の準備

始める前に、Node.js と npm がインストールされていることを確認してください。次に、コマンド ライン インターフェイスで次のコマンドを入力して VUE CLI をインストールします。

npm install -g @vue/cli

インストールが完了したら、VUE CLI を使用して新しいプロジェクトを作成できます。コマンド ライン インターフェイスに次のコマンドを入力します。

vue create my-project

ここで、「my-project」は独自のプロジェクトの名前です。その後、VUE の構成オプションを選択するように求められます。デフォルトのオプションを選択することも、手動で構成することもできます。プロジェクトが作成されたら、独自の開発に VUE3 の使用を開始できます。

2. コンポーネントの作成

VUE では、コンポーネントは重要な概念です。一般的なコンポーネントには、テンプレート、スクリプト、スタイルの 3 つの部分が含まれています。テンプレートはコンポーネントの HTML コンテンツ、スクリプトはコンポーネントの論理コード、スタイルはコンポーネントのスタイル シートです。次に、簡単なコンポーネントを作成してみましょう。まず、「src/components」ディレクトリに「HelloWorld.vue」という名前のファイルを作成します。次のコンテンツをファイルに追加します。

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {},
  computed: {},
  created() {}
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  color: #333;
}
</style>

ここでは、「HelloWorld」という名前のコンポーネントを定義し、コンポーネントのコンテンツとして H1 タグを設定します。さらに、データ、メソッド、計算済み、作成済みなどの他のオプションも定義します。

3. コンポーネントの使用

コンポーネントを作成したら、それをアプリケーションで使用する必要があります。 「src/App.vue」ファイルに次の内容を追加します。

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

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

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

ここでは、コンポーネント内の「HelloWorld」コンポーネントを参照し、コンポーネントを「components」に登録します。アプリケーションでは、「」タグを使用してコンポーネントを参照するだけです。アプリケーションを実行すると、ページに「Hello World」というタイトルが表示されます。

4. イベント ハンドラー

アプリケーションでは通常、ボタンのクリックやテキストの入力などのユーザー操作に応答する必要があります。現時点では、イベント ハンドラーを使用する必要があります。 VUE では、「v-on」ディレクティブを通じてイベント ハンドラーを実装できます。次に、ユーザーがボタンをクリックするとイベントがトリガーされ、ポップアップ ウィンドウが表示される簡単なボタン コンポーネントを作成しましょう。

まず、「src/components」ディレクトリに「Button.vue」という名前のファイルを作成します。次の内容をファイルに追加します。

<template>
  <button @click="showAlert">Click me!</button>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    showAlert() {
      window.alert('Hello World!')
    }
  },
}
</script>

<style scoped>
button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

ここでは、「Button」というコンポーネントを作成し、ボタンを定義しました。 「v-on:click」コマンドはボタン上でクリック イベントをバインドするために使用され、クリックされると「showAlert」メソッドが呼び出され、ポップアップ ウィンドウが表示されます。

最後に、「src/App.vue」ファイルに次の内容を追加します。

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

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

export default {
  components: {
    Button
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

ここでは、アプリケーションの「Button」コンポーネントを参照します。アプリケーションを実行してボタンをクリックすると、ポップアップ ウィンドウが表示されます。

5. 計算されたプロパティ

アプリケーションでは、1 つ以上の状態に基づいて新しい値を計算する必要がある場合があります。現時点では、計算されたプロパティを使用してこの問題に対処できます。 VUE では、「computed」オプションを使用して計算プロパティを実装できます。次に、数値の 2 乗を計算する計算プロパティを作成しましょう。

まず、「src/components」ディレクトリに「Number.vue」という名前のファイルを作成します。次の内容をファイルに追加します。

<template>
  <div>
    <label>Number: </label>
    <input type="number" v-model="number" />
    <p>Number squared: {{ numberSquared }}</p>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data() {
    return {
      number: 0
    }
  },
  computed: {
    numberSquared() {
      return this.number * this.number
    }
  }
}
</script>

<style scoped>
label {
  font-weight: bold;
  margin-right: 10px;
}
input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width 100px;
  margin-right: 10px;
}
p {
  margin-top: 10px;
}
</style>

ここでは、「Number」という名前のコンポーネントを作成し、数値を入力するための入力ボックスを定義します。また、数値の 2 乗を計算するために使用される計算プロパティ "numberSquared" も定義します。数値が変更されると、計算されたプロパティによって数値の 2 乗が自動的に更新され、ページに表示されます。

最後に、次の内容を「src/App.vue」ファイルに追加します。

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

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

export default {
  components: {
    Number
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

ここでは、アプリケーションの「Number」コンポーネントを参照し、数値入力ボックスとその数の二乗。

概要

この記事では、VUE3 を使用してフロントエンド アプリケーションを開発する方法を紹介し、コンポーネントの作成方法、イベント ハンドラーと計算プロパティ、その他の基本的な関数の使用方法を示しました。これらの例を通じて、皆さんはすでにある程度の基本的な理解とスキルを習得していると思います。もちろん、VUE3 には開発者が探索できる強力な機能がまだたくさんあります。引き続き VUE3 を学習して使用し、実践で進歩と革新を続けていただければ幸いです。

以上がVUE3開発の基礎入門：基本機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。