VUE3 入門の例: 単純なインスタント メッセージング アプリケーションを構築する

Vue3 は現在最も高度な JavaScript フレームワークの 1 つであり、Vue.js の次世代バージョンです。 Vue3 は、より優れたパフォーマンスと豊富な機能を提供するだけでなく、より優れた開発エクスペリエンスも提供します。この記事では、Vue3 を使用して簡単なインスタント メッセージング アプリケーションを構築する方法を紹介します。

1. アプリケーションの構造を決定する

アプリケーションの構築を開始する前に、アプリケーションの構造を決定する必要があります。サンプル アプリケーションでは、次のコンポーネントを作成します。

• App.vue: アプリケーションのメイン コンポーネントであり、他のすべてのコンポーネントを表示します。
• ChatList.vue: ユーザーに関連するチャット リストを表示します。
• ChatMessage.vue: 単一のチャット メッセージを表示します。
• ChatInput.vue: ユーザーがメッセージを操作するための入力コンポーネントを提供します。

2. アプリケーションの作成

アプリケーションの構築を開始する前に、最新バージョンの Node.js と Vue CLI がコンピューターにインストールされていることを確認してください。

アプリケーションを作成するには、Vue CLI を使用して次のコマンドを実行します。

vue create chat-app

これにより、新しい Vue3 アプリケーションが作成されます。次に、画面上のプロンプトに従い、次のオプションを選択する必要があります。

• 手動インストール機能を選択します
• Babel と Router を選択します
• 「」を選択します。 ESLint Prettier」のインストールに関する質問 次の「スペース」
• 「Lint とコミット時に修正」を選択します

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

次に、アプリケーションのコンポーネントを作成する必要があります。 /src/components/ ディレクトリに次のファイルを作成できます:

• App.vue

<template>
  <div class="chat-app">
    <ChatList />
    <ChatInput />
  </div>
</template>

<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";

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

<style>
.chat-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}
</style>

• ChatList.vue

<template>
  <div class="chat-list">
    <ChatMessage v-for="message in messages" :key="message.id" :message="message" />
  </div>
</template>

<script>
import ChatMessage from "./ChatMessage";

export default {
  name: "ChatList",
  components: {
    ChatMessage,
  },
  data() {
    return {
      messages: [
        { id: 1, text: "Hello", author: "Alice" },
        { id: 2, text: "Hi there", author: "Bob" },
      ],
    };
  },
};
</script>

<style>
.chat-list {
  height: calc(100% - 64px);
  overflow-y: scroll;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>

• ChatMessage.vue

<template>
  <div class="chat-message">
    <div class="chat-message-author">{{ message.author }}</div>
    <div class="chat-message-text">{{ message.text }}</div>
  </div>
</template>

<script>
export default {
  name: "ChatMessage",
  props: {
    message: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style>
.chat-message {
  margin-bottom: 8px;
}

.chat-message-author {
  font-weight: bold;
  margin-bottom: 4px;
}

.chat-message-text {
  font-size: 16px;
}
</style>

• ChatInput.vue

<template>
  <div class="chat-input">
    <input type="text" v-model="message" @keyup.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script>
export default {
  name: "ChatInput",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("send", this.message);
      this.message = "";
    },
  },
};
</script>

<style>
.chat-input {
  display: flex;
  height: 64px;
  padding: 16px;
}

.chat-input input {
  flex: 1;
  border-radius: 4px 0 0 4px;
  border: none;
  padding: 8px;
  font-size: 16px;
}

.chat-input button {
  border-radius: 0 4px 4px 0;
  border: none;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>

4. 親コンポーネントでの状態の処理

#私たちのアプリケーションでは、複数のコンポーネント間でデータ共有を行う必要があります。したがって、親コンポーネントで状態を設定し、それをすべての子コンポーネントに渡すことができます。 App.vue では、次のコードを追加します。

<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";

export default {
  name: "App",
  components: {
    ChatList,
    ChatInput,
  },
  data() {
    return {
      messages: [
        { id: 1, text: "Hello", author: "Alice" },
        { id: 2, text: "Hi there", author: "Bob" },
      ],
    };
  },
  methods: {
    sendMessage(message) {
      const newMessage = {
        id: this.messages.length + 1,
        text: message,
        author: "You",
      };
      this.messages.push(newMessage);
    },
  },
};
</script>

このコードは、メッセージ配列を初期化し、各メッセージを受信して​​メッセージ配列に追加する sendMessage メソッドを追加します。

子コンポーネントでのイベントの処理

次に、子コンポーネントで sendMessage イベントを処理し、親コンポーネントに送信する必要があります。 ChatInput.vue に、次のコードを追加します。

<script>
export default {
  name: "ChatInput",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("send", this.message);
      this.message = "";
    },
  },
};
</script>

このコードは、ユーザーがメッセージを送信するときに送信イベントをトリガーし、メッセージ テキストをパラメーターとして親コンポーネントに送り返します。

子コンポーネントにデータを表示する

最後に、子コンポーネントにデータを表示する必要があります。 ChatMessage.vue と ChatList.vue では、次のコードを使用します。

<ChatMessage v-for="message in messages" :key="message.id" :message="message" />

このコードは、メッセージ配列の内容に基づいて ChatMessage コンポーネントを表示します。

アプリケーションの実行

これで、アプリケーションの準備が整いました。アプリケーションを実行するには、次のコマンドを実行します。

npm run serve

これにより、http://localhost:8080/ でアクセスできるローカル開発サーバー上でアプリケーションが起動されます。

概要

この記事では、Vue3 を使用してシンプルなインスタント メッセージング アプリケーションを構築する方法を紹介します。 Vue CLI を使用してアプリケーションとコンポーネントを作成する方法と、親コンポーネントで状態を設定し、イベントを処理して子コンポーネントでデータを表示する方法を学びました。この記事を通じて、Vue3 を使用して最新のインタラクティブな Web アプリケーションを開発し、次のプロジェクトの強固な基盤を築く方法を学ぶことができます。

以上がVUE3 入門の例: 単純なインスタント メッセージング アプリケーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。