Cara menggunakan Vue untuk melaksanakan kesan senarai rakan QQ tiruan

Cara menggunakan Vue untuk melaksanakan kesan senarai rakan seperti QQ

Dengan populariti dan aplikasi rangka kerja Vue dalam pembangunan bahagian hadapan, semakin ramai pembangun mula menggunakan Vue untuk membina pelbagai aplikasi web yang berkuasa. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan khas yang meniru senarai rakan QQ, dan menggambarkannya melalui contoh kod khusus.

1. Persediaan

Sebelum anda mula menulis kod, anda perlu membuat persediaan terlebih dahulu. Sila pastikan anda telah memasang Node.js dan Vue CLI.

Mula-mula, buat projek Vue baharu menggunakan arahan berikut:

vue create friend-list-effect

Kemudian, pergi ke direktori akar projek:

cd friend-list-effect

Seterusnya, pasang pemalam dan kebergantungan yang diperlukan:

npm install axios vuex vue-router

2. Buat komponen dan route

In Buat komponen dan lihat folder dalam direktori src untuk menyimpan komponen dan melihat fail berkaitan masing-masing.

Buat FriendList.vue di bawah folder komponen, kodnya adalah seperti berikut:

<template>
  <div>
    <ul>
      <li v-for="friend in friends" :key="friend.id" @click="toggleActive(friend.id)" :class="{ active: friend.active }">
        {{ friend.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FriendList',
  data() {
    return {
      friends: [
        { id: 1, name: 'Friend 1', active: false },
        { id: 2, name: 'Friend 2', active: false },
        { id: 3, name: 'Friend 3', active: false },
        // 更多好友...
      ],
    };
  },
  methods: {
    toggleActive(id) {
      this.friends = this.friends.map((friend) => {
        if (friend.id === id) {
          return { ...friend, active: !friend.active };
        }
        return friend;
      });
    },
  },
};
</script>

Buat Home.vue di bawah folder pandangan, kodnya adalah seperti berikut:

<template>
  <div>
    <h1>仿QQ好友列表特效</h1>
    <FriendList />
  </div>
</template>

<script>
import FriendList from '../components/FriendList.vue';

export default {
  name: 'Home',
  components: {
    FriendList,
  },
};
</script>

Buat index.js di bawah folder penghala, kodnya adalah seperti berikut:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

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

export default router;

3. Konfigurasikan aplikasi

Cari fail main.js dalam direktori src dan tambah kod berikut:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

Cari fail App.vue dalam direktori src dan gantikan kod templat dengan yang berikut kandungan:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

4 Jalankan aplikasi

Gunakan arahan berikut untuk memulakan aplikasi Vue:

npm run serve

Buka http://localhost:8080/ dalam penyemak imbas, dan anda akan melihat aplikasi dengan kesan senarai rakan QQ tiruan .

Ringkasan

Melalui langkah di atas, kami berjaya menggunakan Vue untuk membina aplikasi yang meniru kesan khas senarai rakan QQ. Dalam aplikasi ini, senarai rakan memaparkan sekumpulan rakan, dan status rakan boleh ditukar.

Inti aplikasi ialah komponen FriendList, yang menjadikan senarai rakan melalui gelung dan melaksanakan penukaran status rakan melalui pengikatan acara dan pengikatan data. Ini adalah contoh mudah, anda boleh melanjutkan dan mengubah suai kod mengikut keperluan anda.

Saya harap artikel ini akan membantu anda memahami cara menggunakan Vue untuk melaksanakan kesan senarai rakan seperti QQ. Semoga anda menulis aplikasi Vue yang lebih berkuasa!

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan senarai rakan QQ tiruan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!