초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 폭포 효과 만들기

초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 폭포 흐름 효과 만들기

Vue.js는 인기 있는 프런트 엔드 JavaScript 프레임워크로 인기가 계속 높아지고 있으며 현재 주류 프런트 엔드 프레임워크 중 하나가 되었습니다. . Vue3는 성능과 내장 기능이 많이 개선된 최신 버전입니다. 이 기사에서는 Vue.js 구성 요소를 사용하여 폭포 효과를 만드는 방법을 살펴보겠습니다. 초보자라면 이 글이 큰 도움이 될 것입니다.

1단계: Vue.js 설치

Vue.js는 npm을 통해 설치할 수 있습니다. 전역 환경에 설치하는 경우 다음 문장을 사용하세요.

npm install Vue

이 명령은 Vue.js를 컴퓨터에 전체적으로 설치합니다. 프로젝트에서 사용하는 경우 다음 명령을 사용할 수 있습니다.

npm install --save Vue

이렇게 하면 Vue.js가 프로젝트의 종속성에 추가됩니다. 이제 환경이 준비되었습니다.

2단계: 새 Vue.js 프로젝트 만들기

명령줄을 열고 프로젝트를 저장할 폴더를 입력한 후 다음 문장을 입력하여 새 Vue.js 프로젝트를 만듭니다.

vue create myproject

이 명령은 myproject 프로젝트라는 새로운 프로젝트입니다. 생성 후 프로젝트가 있는 폴더로 이동합니다.

cd myproject

그런 다음 다음 명령을 실행하여 프로젝트를 시작합니다.

npm run serve

이 명령은 로컬 서버를 시작하고 브라우저에서 페이지를 엽니다. Vue.js 환영 이미지가 보이면 Vue.js 프로젝트가 성공적으로 시작된 것입니다.

3단계: 타사 라이브러리 설치

이 프로젝트에서는 폭포 효과를 생성하기 위해 vue-waterfall-easy라는 타사 라이브러리를 사용해야 합니다. 이 라이브러리는 사용하기 매우 쉽습니다. 설치하려면 다음 명령만 사용하면 됩니다.

npm install vue-waterfall-easy --save

설치가 완료된 후 main.js 파일에 이 라이브러리를 도입해야 합니다.

import waterfall from 'vue-waterfall-easy'
Vue.use(waterfall)

4단계: 폭포 흐름 구성 요소

이제 폭포 효과를 구현하기 위해 Vue.js 구성 요소를 만들어야 합니다. src/comComponents 아래에 Waterfall.vue 파일을 생성한 후 다음 코드를 완성합니다.

<template>
  <div class="waterfall">
    <div v-for="(item, index) in list" :key="index" :class="'column-'+(index%cols)">
      <div v-for="(innerItem, innerIndex) in item" :key="innerIndex" class="waterfall-item">
        <img :src="innerItem.src">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Waterfall',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    cols: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.list = this.generateList(this.data, this.cols)
  },
  methods: {
    generateList (data, cols) {
      const list = []
      for (let i = 0; i < cols; i++) {
        list.push([])
      }
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        const index = i % cols
        list[index].push(item)
      }
      return list
    }
  }
}
</script>

<style>
.waterfall {
  display: flex;
  flex-wrap: wrap;
  margin: -8px 0 0 -8px;
}
.waterfall-item {
  padding: 8px 0 0 8px;
  box-sizing: border-box;
  width: calc(100% / 3 - 8px);
}
</style>

데이터와 열 번호라는 두 가지 소품을 받는 Waterfall이라는 구성 요소를 정의합니다. 구성 요소는 들어오는 데이터와 열 수를 기반으로 2차원 배열을 생성하고 v-for 명령을 사용하여 이미지를 렌더링합니다. 이 구성 요소는 궁극적으로 폭포 효과 레이아웃을 생성합니다.

5단계: 구성 요소 사용

마지막 단계는 방금 생성한 구성 요소를 App.vue에 추가하는 것입니다. App.vue에 다음 코드를 추가합니다.

<template>
  <div id="app">
    <waterfall :data="images"></waterfall>
  </div>
</template>

<script>
import Waterfall from './components/Waterfall.vue'

export default {
  name: 'App',
  components: {
    Waterfall
  },
  data () {
    return {
      images: [
        { src: require('@/assets/image1.jpeg') },
        { src: require('@/assets/image2.jpeg') },
        { src: require('@/assets/image3.jpeg') },
        { src: require('@/assets/image4.jpeg') },
        { src: require('@/assets/image5.jpeg') },
        { src: require('@/assets/image6.jpeg') }
      ]
    }
  }
}
</script>

App.vue에 Waterfall 구성 요소를 도입하고 v-for 지시문을 사용하여 일부 이미지를 렌더링했습니다. 이제 Vue.js 프로젝트를 시작하면 폭포 효과 레이아웃이 표시됩니다.

요약

이 튜토리얼에서는 Vue.js 구성 요소와 타사 라이브러리 vue-waterfall-easy를 사용하여 폭포 흐름 효과 레이아웃을 구현합니다. Vue.js는 폭포 흐름과 같은 복잡한 웹 페이지 레이아웃에 사용하기에 매우 편리한 인기 있는 프런트 엔드 프레임워크입니다. 이 글이 Vue.js를 처음 접하는 개발자들에게 도움이 되기를 바랍니다.

위 내용은 초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 폭포 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!