随着社交网络和即时通讯的不断普及，聊天功能也成为各种应用必不可少的功能之一。在前端开发领域中，使用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”方法，该方法导航到对应的聊天室页面。
对于手风琴动画，我们以前分享过很多，有基于jQuery的手风琴菜单，比如jQuery多层级垂直手风琴菜单；也有基于jQuery的手风琴焦点图，比如jQuery实现横向手风琴图片轮播焦点图效果。今天要分享的是一款利用纯CSS3实现的水平手风琴分享按钮菜单，每一个分享按钮展开时会有该平台的简单介绍，非常绚丽实用。
四、创建聊天室组件
在项目根目录下的“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初学者有所帮助。
