初心者のための VUE3 入門: Vue.js コンポーネントを使用してウォーターフォール エフェクトを作成する

VUE3 初心者入門: Vue.js コンポーネントを使用してウォーターフォール フロー エフェクトを作成する

Vue.js は人気のあるフロントエンド JavaScript フレームワークであり、その人気は高まり続けており、主流のフロントエンドの 1 つとなっています。今すぐフレームワークを終了してください。 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 を作成します。 project:

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/components の下に 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 つのプロパティを受け取ります。このコンポーネントは、受信データと列数に基づいて 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 は、ウォーターフォール フローなどの複雑な Web ページ レイアウトで使用すると非常に便利な、人気のあるフロントエンド フレームワークです。この記事が Vue.js を初めて使用する開発者にとって役立つことを願っています。

以上が初心者のための VUE3 入門: Vue.js コンポーネントを使用してウォーターフォール エフェクトを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。