Bagaimana untuk melaksanakan senarai sembang mudah dengan Vue

Dengan populariti berterusan rangkaian sosial dan pemesejan segera, fungsi sembang juga telah menjadi salah satu fungsi penting pelbagai aplikasi. Dalam bidang pembangunan bahagian hadapan, adalah amalan biasa untuk menggunakan rangka kerja Vue untuk melaksanakan senarai sembang. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan senarai sembang mudah.

1. Pembinaan projek

Pertama, kita perlu menggunakan alat perancah Vue untuk membina projek Vue. Masukkan kod berikut ke dalam baris arahan:

vue create chat-app

Ini akan mencipta projek Vue bernama "chat-app". Seterusnya, kita perlu memasang beberapa kebergantungan yang diperlukan, termasuk Vue, Vue Router, Axios dan Bootstrap. Masukkan kod berikut dalam baris arahan:

npm install vue vue-router axios bootstrap

2. Cipta laluan

Buat fail "router.js" dalam folder "src" dalam direktori akar projek. Kodnya adalah seperti berikut:

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;

Di sini kami mencipta dua laluan, satu ialah halaman senarai sembang di bawah laluan "/", dan satu lagi ialah halaman bilik sembang di bawah "/chat-room/ :id" laluan . Kami akan menerangkan pelaksanaan komponen ini satu per satu di bawah.

3. Cipta komponen senarai sembang

Buat fail "ChatList.vue" dalam folder "src/components" dalam direktori akar projek. Kodnya adalah seperti berikut:

<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>

Dalam komponen ini, kami menggunakan arahan "v-for" Vue untuk melintasi senarai pengguna yang diperoleh daripada "https://jsonplaceholder.typicode.com/users" dan Rendered ke halaman senarai sembang. Apabila pengguna mengklik pada item senarai, kami mencetuskan kaedah "goToChatRoom", yang menavigasi ke halaman bilik sembang yang sepadan.

4. Cipta komponen bilik sembang

Buat fail "ChatRoom.vue" dalam folder "src/components" dalam direktori akar projek. Kodnya adalah seperti berikut:

<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>

Dalam komponen ini, kami memperoleh objek sembang dan senarai mesej bilik sembang semasa dan menjadikannya ke dalam halaman. Kami juga menambah borang yang membolehkan pengguna menghantar mesej baharu.

5. Ujian

Akhir sekali, jalankan arahan berikut dalam direktori akar projek untuk memulakan pelayan pembangunan:

npm run serve

Buka penyemak imbas dan lawati "http:/ /localhost: 8080", anda boleh melihat halaman senarai sembang yang baru kami buat!

Klik pada item senarai untuk mula bersembang di halaman baharu!

6. Ringkasan

Artikel ini memperkenalkan cara menggunakan rangka kerja Vue untuk membina senarai sembang ringkas. Kami menggunakan Axios untuk mendapatkan data jauh dan memaparkannya ke dalam halaman. Walaupun ini hanyalah contoh mudah, ia menunjukkan cara menggunakan penghalaan dan komponen dalam Vue untuk melaksanakan aplikasi sembang yang diperibadikan. Saya harap artikel ini dapat membantu pemula Vue.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai sembang mudah dengan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!