Erste Schritte mit VUE3 für Anfänger: Verwenden von Vue.js-Komponenten zum Erstellen eines Wasserfalleffekts

Erste Schritte mit VUE3 für Anfänger: Verwenden Sie Vue.js-Komponenten, um Wasserfall-Flow-Effekte zu erstellen.

Vue.js ist ein beliebtes Front-End-JavaScript-Framework. Seine Popularität nimmt weiter zu und es hat sich mittlerweile zu einem der Mainstream-Front-End-Frameworks entwickelt . Vue3 ist die neueste Version, die viele Verbesserungen in der Leistung und den integrierten Funktionen aufweist. In diesem Artikel erfahren Sie, wie Sie mithilfe von Vue.js-Komponenten einen Wasserfalleffekt erstellen. Wenn Sie ein Anfänger sind, wird dieser Artikel sehr hilfreich sein.

Schritt 1: Vue.js installieren

Vue.js kann über npm installiert werden. Wenn Sie in einer globalen Umgebung installieren, verwenden Sie einfach den folgenden Satz:

npm install Vue

Dieser Befehl installiert Vue.js global auf Ihrem Computer. Wenn Sie es in einem Projekt verwenden, können Sie den folgenden Befehl verwenden:

npm install --save Vue

Auf diese Weise wird Vue.js zu den Abhängigkeiten Ihres Projekts hinzugefügt. Jetzt ist Ihre Umgebung bereit.

Schritt 2: Erstellen Sie ein neues Vue.js-Projekt

Öffnen Sie die Befehlszeile, geben Sie den Ordner ein, in dem Sie das Projekt speichern möchten, und geben Sie den folgenden Satz ein, um ein neues Vue.js-Projekt zu erstellen:

vue create myproject

Dieser Befehl wird erstellt ein neues namens myproject project. Gehen Sie nach der Erstellung in den Ordner, in dem sich das Projekt befindet:

cd myproject

Führen Sie dann den folgenden Befehl aus, um Ihr Projekt zu starten:

npm run serve

Dieser Befehl startet einen lokalen Server und öffnet eine Seite im Browser. Wenn Sie ein Vue.js-Willkommensbild sehen, bedeutet dies, dass Sie Ihr Vue.js-Projekt erfolgreich gestartet haben.

Schritt 3: Drittanbieterbibliothek installieren

In diesem Projekt müssen wir eine Drittanbieterbibliothek namens vue-waterfall-easy verwenden, um den Wasserfalleffekt zu erzeugen. Diese Bibliothek ist sehr einfach zu verwenden, Sie müssen nur den folgenden Befehl verwenden, um sie zu installieren:

npm install vue-waterfall-easy --save

Nachdem die Installation abgeschlossen ist, müssen wir diese Bibliothek in die Datei main.js einführen:

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

Schritt 4: Erstellen Sie eine Wasserfall-Flusskomponente

Jetzt müssen wir eine Vue.js-Komponente erstellen, um den Wasserfalleffekt zu erzielen. Erstellen Sie eine Waterfall.vue-Datei unter src/components und vervollständigen Sie dann den folgenden Code:

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

Wir definieren eine Komponente namens Waterfall, die zwei Requisiten erhält: Daten und Spaltennummer. Die Komponente generiert ein zweidimensionales Array basierend auf den eingehenden Daten und der Anzahl der Spalten und verwendet die v-for-Anweisung, um das Bild zu rendern. Diese Komponente erzeugt letztendlich ein Layout mit Wasserfalleffekt.

Schritt 5: Komponenten verwenden

Der letzte Schritt besteht darin, die gerade erstellte Komponente zu unserer App.vue hinzuzufügen. Fügen Sie App.vue den folgenden Code hinzu:

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

Wir haben die Waterfall-Komponente in App.vue eingeführt und die v-for-Direktive verwendet, um einige Bilder zu rendern. Wenn Sie nun Ihr Vue.js-Projekt starten, sehen Sie ein Wasserfall-Effekt-Layout.

Zusammenfassung

In diesem Tutorial verwenden wir Vue.js-Komponenten und die Drittanbieterbibliothek vue-waterfall-easy, um ein Wasserfall-Flow-Effekt-Layout zu implementieren. Vue.js ist ein beliebtes Front-End-Framework, das sehr praktisch für komplexe Webseitenlayouts wie Wasserfallflüsse ist. Ich hoffe, dass dieser Artikel für Entwickler hilfreich ist, die neu bei Vue.js sind.

Das obige ist der detaillierte Inhalt vonErste Schritte mit VUE3 für Anfänger: Verwenden von Vue.js-Komponenten zum Erstellen eines Wasserfalleffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!