Premiers pas avec VUE3 pour les débutants : utilisation des composants Vue.js pour créer un effet de cascade

Démarrez avec VUE3 pour les débutants : utilisez les composants Vue.js pour créer des effets de flux en cascade

Vue.js est un framework JavaScript frontal populaire. Sa popularité continue d'augmenter et il est désormais devenu l'un des frameworks front-end les plus courants. . Vue3 est la dernière version, qui présente de nombreuses améliorations en termes de performances et de fonctions intégrées. Dans cet article, nous explorerons comment créer un effet de cascade à l'aide des composants Vue.js. Si vous êtes débutant, cet article vous sera très utile.

Étape 1 : Installer Vue.js

Vue.js peut être installé via npm. Si vous effectuez l'installation dans un environnement global, utilisez simplement la phrase suivante :

npm install Vue

Cette commande installera Vue.js globalement sur votre machine. Si vous l'utilisez dans un projet, vous pouvez utiliser la commande suivante :

npm install --save Vue

De cette façon, Vue.js sera ajouté aux dépendances de votre projet. Votre environnement est désormais prêt.

Étape 2 : Créez un nouveau projet Vue.js

Ouvrez la ligne de commande, entrez le dossier dans lequel vous souhaitez stocker le projet, saisissez la phrase suivante pour créer un nouveau projet Vue.js :

vue create myproject

Cette commande créera un nouveau nommé myproject project. Après création, rendez-vous dans le dossier où se trouve le projet :

cd myproject

Exécutez ensuite la commande suivante pour démarrer votre projet :

npm run serve

Cette commande démarrera un serveur local et ouvrira une page dans le navigateur. Si vous voyez une image de bienvenue Vue.js, cela signifie que vous avez démarré avec succès votre projet Vue.js.

Étape 3 : Installer une bibliothèque tierce

Dans ce projet, nous devons utiliser une bibliothèque tierce appelée vue-waterfall-easy pour créer l'effet cascade. Cette bibliothèque est très simple à utiliser, il vous suffit d'utiliser la commande suivante pour l'installer :

npm install vue-waterfall-easy --save

Une fois l'installation terminée, nous devons introduire cette bibliothèque dans le fichier main.js :

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

Étape 4 : Créer un composant de flux de cascade

Maintenant, nous devons créer un composant Vue.js pour obtenir l'effet de cascade. Créez un fichier Waterfall.vue sous src/components, puis complétez le code suivant :

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

Nous définissons un composant nommé Waterfall, qui recevra deux props : data et column number. Le composant générera un tableau bidimensionnel basé sur les données entrantes et le nombre de colonnes, et utilisera l'instruction v-for pour restituer l'image. Ce composant générera à terme une disposition à effet cascade.

Étape 5 : Utiliser les composants

La dernière étape consiste à ajouter le composant que nous venons de créer à notre App.vue. Ajoutez le code suivant à 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>

Nous avons introduit le composant Waterfall dans App.vue et utilisé la directive v-for pour restituer certaines images. Maintenant, si vous démarrez votre projet Vue.js, vous verrez une disposition d'effet en cascade.

Résumé

Dans ce didacticiel, nous utilisons les composants Vue.js et la bibliothèque tierce vue-waterfall-easy pour implémenter une disposition d'effet de flux en cascade. Vue.js est un framework frontal populaire très pratique à utiliser sur des mises en page Web complexes telles que les flux en cascade. J'espère que cet article sera utile aux développeurs qui débutent avec Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!