Vue를 사용하여 QQ 친구 목록 효과를 모방하는 방법

Vue를 사용하여 QQ와 같은 친구 목록 효과 구현하는 방법

프론트 엔드 개발에서 Vue 프레임워크의 인기와 적용으로 점점 더 많은 개발자가 Vue를 사용하여 다양하고 강력한 웹 애플리케이션을 구축하기 시작했습니다. 이 글에서는 Vue를 사용하여 QQ 친구 목록을 모방하는 특수 효과를 구현하는 방법을 소개하고 구체적인 코드 예제를 통해 이를 설명합니다.

1. 준비

코드 작성을 시작하기 전에 먼저 준비가 필요합니다. Node.js와 Vue CLI가 설치되어 있는지 확인하세요.

먼저 다음 명령을 사용하여 새 Vue 프로젝트를 만듭니다.

vue create friend-list-effect

그런 다음 프로젝트의 루트 디렉터리로 이동합니다.

cd friend-list-effect

다음으로 필요한 플러그인과 종속성을 설치합니다.

npm install axios vuex vue-router

2. Route

In src 디렉토리에 컴포넌트 및 뷰 폴더를 생성하여 컴포넌트 및 뷰 관련 파일을 각각 저장합니다.

Components 폴더 아래에 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');

src 디렉터리에서 App.vue 파일을 찾아 템플릿 코드를 다음으로 바꿉니다. content:

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

4. 애플리케이션 실행

다음 명령을 사용하여 Vue 애플리케이션을 시작하세요:

npm run serve

브라우저에서 http://localhost:8080/을 열면 QQ 친구 목록 효과를 모방한 애플리케이션이 표시됩니다. .

요약

위 단계를 통해 Vue를 사용하여 QQ 친구 목록의 특수 효과를 모방한 애플리케이션을 성공적으로 구축했습니다. 이 애플리케이션에서는 친구 목록에 친구 그룹이 표시되며, 친구 상태를 전환할 수 있습니다.

애플리케이션의 핵심은 루프를 통해 친구 목록을 렌더링하고 이벤트 바인딩 및 데이터 바인딩을 통해 친구 상태 전환을 구현하는 FriendList 구성 요소입니다. 이는 간단한 예이므로 필요에 따라 코드를 추가로 확장하고 수정할 수 있습니다.

이 기사가 Vue를 사용하여 QQ와 같은 친구 목록 효과를 구현하는 방법을 이해하는 데 도움이 되기를 바랍니다. 더욱 강력한 Vue 애플리케이션을 작성하시길 바랍니다!

위 내용은 Vue를 사용하여 QQ 친구 목록 효과를 모방하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!