Comment utiliser Vue pour implémenter des effets de liste d'amis de type QQ

Comment utiliser Vue pour implémenter des effets de liste d'amis de type QQ

Avec la popularité et l'application du framework Vue dans le développement front-end, de plus en plus de développeurs commencent à utiliser Vue pour créer diverses applications Web puissantes. Dans cet article, nous présenterons comment utiliser Vue pour implémenter des effets spéciaux qui imitent la liste d'amis QQ et l'illustrerons à travers des exemples de code spécifiques.

1. Préparation

Avant de commencer à écrire du code, vous devez d'abord effectuer des préparatifs. Veuillez vous assurer que Node.js et Vue CLI sont installés.

Tout d'abord, créez un nouveau projet Vue à l'aide de la commande suivante :

vue create friend-list-effect

Ensuite, allez dans le répertoire racine du projet :

cd friend-list-effect

Ensuite, installez les plug-ins et dépendances requis :

npm install axios vuex vue-router

2. routes

Dans Créez des dossiers de composants et de vues dans le répertoire src pour stocker respectivement les composants et les fichiers liés aux vues.

Créez FriendList.vue sous le dossier composants, le code est le suivant :

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

Créez Home.vue sous le dossier vues, le code est le suivant :

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

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

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

Créez index.js sous le dossier routeur, le code est comme suit :

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. Configurez l'application

Trouvez le fichier main.js dans le répertoire src et ajoutez le code suivant :

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');

Trouvez le fichier App.vue dans le répertoire src et remplacez le code du modèle par ce qui suit contenu :

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

4. Exécutez l'application

Utilisez la commande suivante pour démarrer l'application Vue :

npm run serve

Ouvrez http://localhost:8080/ dans le navigateur et vous verrez l'application avec des effets de liste d'amis imitation QQ. .

Résumé

Grâce aux étapes ci-dessus, nous avons utilisé avec succès Vue pour créer une application qui imite les effets spéciaux de la liste d'amis QQ. Dans cette application, la liste d'amis affiche un groupe d'amis et le statut des amis peut être modifié.

Le cœur de l'application est le composant FriendList, qui restitue la liste d'amis via une boucle et implémente le changement de statut d'ami via la liaison d'événements et la liaison de données. Ceci est un exemple simple, vous pouvez étendre et modifier davantage le code en fonction de vos besoins.

J'espère que cet article vous aidera à comprendre comment utiliser Vue pour implémenter des effets de liste d'amis de type QQ. Je vous souhaite d'écrire des applications Vue plus puissantes !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!