如何用Vue實作一個簡單的聊天列表

隨著社群網路和即時通訊的不斷普及，聊天功能也成為各種應用程式不可或缺的功能之一。在前端開發領域中，使用Vue框架實作聊天清單是常見做法。本文將介紹如何使用Vue來實作一個簡單的聊天清單。

一、專案搭建

首先，我們需要使用Vue鷹架工具來建造一個Vue專案。在命令列中輸入以下程式碼：

vue create chat-app

這將建立一個名為「chat-app」的Vue專案。接下來，我們需要安裝一些必要的依賴，包括Vue、Vue Router、Axios 和 Bootstrap。在命令列中輸入以下程式碼：

npm install vue vue-router axios bootstrap

二、建立路由

在專案根目錄下的「src」資料夾中建立一個「router.js」檔案。程式碼如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
import ChatList from './components/ChatList.vue';
import ChatRoom from './components/ChatRoom.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'ChatList',
    component: ChatList
  },
  {
    path: '/chat-room/:id',
    name: 'ChatRoom',
    component: ChatRoom,
    props: true
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

這裡我們建立了兩個路由，一個是「/」路徑下的聊天清單頁面，另一個是「/chat-room/:id」路徑下的聊天室頁面。我們將在下文中逐一解釋這些組件的實作。

三、建立聊天清單元件

在專案根目錄下的「src/components」資料夾中建立一個「ChatList.vue」檔案。程式碼如下：

<template>
  <div>
    <h1>聊天列表</h1>
    <ul class="list-group">
      <li v-for="(user, index) in users" :key="index" class="list-group-item" @click="goToChatRoom(user.id)">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ChatList',
  data() {
    return {
      users: []
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
        this.users = response.data;
      });
    },
    goToChatRoom(id) {
      this.$router.push({ name: 'ChatRoom', params: { id } });
    }
  }
};
</script>

在這個元件中，我們使用了Vue的「v-for」指令來遍歷從「https://jsonplaceholder.typicode.com/users」取得的使用者列表，並將其渲染到了聊天清單頁面。當使用者點擊清單項目時，我們觸發了一個「goToChatRoom」方法，該方法導航到對應的聊天室頁面。

四、建立聊天室元件

在專案根目錄下的「src/components」資料夾中建立一個「ChatRoom.vue」檔案。程式碼如下：

<template>
  <div>
    <h1>{{ currentChatUser.name }}</h1>
    <ul class="list-group">
      <li v-for="(message, index) in messages" :key="index" class="list-group-item">
        <strong>{{ message.sender }}:</strong> {{ message.content }}
      </li>
    </ul>
    <form @submit.prevent="sendMessage">
      <div class="form-group">
        <input v-model="newMessage" type="text" class="form-control" placeholder="请输入消息内容">
      </div>
      <button type="submit" class="btn btn-primary">发送消息</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ChatRoom',
  props: ['id'],
  data() {
    return {
      currentChatUser: {},
      messages: [],
      newMessage: ''
    };
  },
  created() {
    this.getCurrentChatUser();
    this.getMessages();
  },
  methods: {
    getCurrentChatUser() {
      axios.get(`https://jsonplaceholder.typicode.com/users/${this.id}`).then(response => {
        this.currentChatUser = response.data;
      });
    },
    getMessages() {
      axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${this.id}`).then(response => {
        this.messages = response.data.map(message => {
          return { sender: this.currentChatUser.name, content: message.title };
        });
      });
    },
    sendMessage() {
      this.messages.push({ sender: '我', content: this.newMessage });
      this.newMessage = '';
    }
  }
};
</script>

在這個元件中，我們取得了目前聊天室的聊天物件和訊息列表，並將其渲染到頁面中。我們還添加了一個表單，允許用戶發送新的訊息。

五、測試

最後，在專案根目錄下執行以下命令啟動開發伺服器：

npm run serve

開啟瀏覽器，造訪“http://localhost:8080” ，就可以看到我們剛剛建立的聊天清單頁面啦！

點擊列表項，在新的頁面中開始聊天！

六、總結

本文介紹如何使用Vue框架來建立一個簡單的聊天清單。我們使用了Axios來獲取遠端數據，並將其渲染到頁面中。雖然這只是一個簡單的例子，但它展示瞭如何在Vue中使用路由和元件來實現一個個人化的聊天應用程式。希望本文能對Vue初學者有所幫助。

以上是如何用Vue實作一個簡單的聊天列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！