使用Vue.js实现在线聊天功能

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它具有简单易学、灵活高效的特点，非常适合开发实时聊天应用程序。在本篇文章中，我们将介绍如何使用Vue.js来实现一个简单的在线聊天功能，并提供相应的源代码。

步骤1：设置项目

首先，我们需要创建一个Vue.js项目。你可以使用Vue CLI来快速搭建项目骨架。打开终端并执行以下命令：

vue create chat-app

然后按照提示进行项目配置。选择你喜欢的配置选项，或者直接使用默认值。项目创建完成后，进入项目目录：

cd chat-app

步骤2：创建组件

在Vue.js中，我们使用组件来构建应用程序的不同部分。我们将创建两个组件，一个用于显示聊天消息，另一个用于发送消息。

首先，在src目录下创建一个名为ChatMessage.vue的文件。在该文件中，添加以下代码：

<template>
  <div class="chat-message">
    <div v-for="message in messages" :key="message.id" class="message">
      <span class="username