Bermula dengan VUE3 untuk Pemula: Menggunakan Komponen Vue.js untuk Mencipta Kesan Air Terjun

Pengenalan Pemula Vue3: Gunakan komponen Vue.js untuk mencipta kesan aliran air terjun

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang popular Popularitinya terus meningkat dan ia telah menjadi salah satu aliran utama-. rangka kerja akhir. Vue3 ialah versi terkini, yang mempunyai banyak peningkatan dalam prestasi dan fungsi terbina dalam. Dalam artikel ini, kami akan meneroka cara mencipta kesan air terjun menggunakan komponen Vue.js. Jika anda seorang pemula, artikel ini akan sangat membantu.

Langkah 1: Pasang Vue.js

Vue.js boleh dipasang melalui npm. Jika anda memasang dalam persekitaran global, hanya gunakan ayat berikut:

npm install Vue

Arahan ini akan memasang Vue.js secara global pada mesin anda. Jika anda menggunakannya dalam projek, anda boleh menggunakan arahan berikut:

npm install --save Vue

Dengan cara ini, Vue.js akan ditambahkan pada kebergantungan projek anda. Kini persekitaran anda sudah sedia.

Langkah 2: Buat projek Vue.js baharu

Buka baris arahan, masukkan folder tempat anda ingin menyimpan projek, masukkan ayat berikut untuk mencipta projek Vue.js baharu :

vue create myproject

Arahan ini akan mencipta projek baharu bernama myproject. Selepas penciptaan, masukkan folder di mana projek itu terletak:

cd myproject

Kemudian jalankan arahan berikut untuk memulakan projek anda:

npm run serve

Perintah ini akan memulakan pelayan setempat dan memaparkannya dalam pelayar Buka halaman. Jika anda melihat imej alu-aluan Vue.js, ini bermakna anda telah berjaya memulakan projek Vue.js anda.

Langkah 3: Pasang pustaka pihak ketiga

Dalam projek ini, kita perlu menggunakan perpustakaan pihak ketiga yang dipanggil vue-waterfall-easy untuk mencipta kesan air terjun. Pustaka ini sangat mudah digunakan. Anda hanya perlu menggunakan arahan berikut untuk memasangnya:

npm install vue-waterfall-easy --save

Selepas pemasangan selesai, kami perlu memperkenalkan perpustakaan ini dalam fail main.js:

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

Langkah 4: Buat komponen aliran air terjun

Kini, kita perlu mencipta komponen Vue.js untuk mencapai kesan aliran air terjun. Cipta fail Waterfall.vue di bawah src/components, dan kemudian lengkapkan kod berikut:

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

Kami mentakrifkan komponen bernama Waterfall, yang akan menerima dua prop: data dan nombor lajur. Komponen akan menjana tatasusunan dua dimensi berdasarkan data masuk dan bilangan lajur, dan menggunakan arahan v-untuk untuk memaparkan imej. Komponen ini akhirnya akan menghasilkan susun atur kesan air terjun.

Langkah 5: Gunakan komponen

Langkah terakhir ialah menambah komponen yang baru kami buat pada App.vue kami. Tambahkan kod berikut pada 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>

Kami memperkenalkan komponen Waterfall dalam App.vue dan menggunakan arahan v-for untuk memaparkan beberapa imej. Sekarang jika anda memulakan projek Vue.js anda, anda akan melihat reka letak kesan air terjun.

Ringkasan

Dalam tutorial ini, kami menggunakan komponen Vue.js dan perpustakaan pihak ketiga vue-waterfall-mudah untuk melaksanakan reka letak kesan aliran air terjun. Vue.js ialah rangka kerja bahagian hadapan yang popular yang sangat mudah digunakan pada reka letak halaman web yang kompleks seperti aliran air terjun. Saya harap artikel ini akan membantu pembangun yang baru menggunakan Vue.js.

Atas ialah kandungan terperinci Bermula dengan VUE3 untuk Pemula: Menggunakan Komponen Vue.js untuk Mencipta Kesan Air Terjun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!