Vue を使用して QQ のような友達リスト効果を実装する方法

Vue を使用して模倣 QQ フレンド リスト効果を実装する方法

フロントエンド開発における Vue フレームワークの人気と応用により、ますます多くの開発者が始めていますVue を使用してさまざまな強力な Web アプリケーションを構築します。この記事では、Vue を使用して QQ フレンド リストを模倣する特殊効果を実装する方法を紹介し、具体的なコード例で説明します。

1. 準備

コードを書き始める前に、まず準備をする必要があります。 Node.js と Vue CLI がインストールされていることを確認してください。

まず、次のコマンドを使用して新しい Vue プロジェクトを作成します:

vue create friend-list-effect

次に、プロジェクトのルート ディレクトリを入力します:

cd friend-list-effect

次に、必要なプラグインをインストールします。 ins と依存関係:

npm install axios vuex vue-router

2. コンポーネントとルートの作成

src ディレクトリにコンポーネント フォルダーとビュー フォルダーを作成し、コンポーネントとビュー関連のファイルをそれぞれ保存します。

コンポーネント フォルダーの下に FriendList.vue を作成します。コードは次のとおりです。

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

views フォルダーの下に Home.vue を作成します。コードは次のとおりです。

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

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

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

ルーター フォルダーで、index.js を作成し、コードは次のとおりです:

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. アプリケーションの構成

src ディレクトリで main.js ファイルを見つけ、次のコードを追加します。

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

In src ディレクトリで App.vue ファイルを見つけて、テンプレート コードを次の内容に置き換えます:

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

4. アプリケーションを実行します

次のコマンドを使用しますVue アプリケーションを起動するには:

npm run serve

Browse ブラウザで http://localhost:8080/ を開くと、QQ フレンド リストの特殊効果を模倣したアプリケーションが表示されます。

概要

上記の手順により、Vue を使用して QQ フレンド リストの特殊効果を模倣するアプリケーションを構築することに成功しました。このアプリでは、フレンドリストにフレンドのグループを表示し、フレンドのステータスを切り替えることができます。

アプリケーションの中核は FriendList コンポーネントです。このコンポーネントは、ループを通じてフレンド リストをレンダリングし、イベント バインディングとデータ バインディングを通じてフレンド ステータスの切り替えを実装します。これは単純な例であり、必要に応じてコードをさらに拡張および変更できます。

この記事が、Vue を使用して QQ のようなフレンド リスト効果を実装する方法を理解するのに役立つことを願っています。より強力な Vue アプリケーションを作成できることを願っています。

以上がVue を使用して QQ のような友達リスト効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。