L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Utiliser V-For pour boucler dans Vue
Dans cet article, nous allons voir comment rendre des listes dans Vue.js en utilisant la directive v-for.
Avant de commencer
Vous aurez besoin de Node.js installé et aussi :
- Un éditeur de code : Visual Studio Code est fortement recommandé (Voici pourquoi).
- Vue CLI 3.0 installé sur votre machine. Pour ce faire, désinstallez d'abord l'ancienne version de la CLI :
npm désinstaller -g vue-clipuis installez le nouveau :
npm install -g @vue/cliCe que nous construisons
Construisons un composant Vue simple qui affiche une liste d'artistes. Nous utiliserons Vue CLI pour échafauder l'application. Ouvrez VS Code et utilisez le terminal pour exécuter cette commande :
vue créer une application vueUne fois cette opération terminée, accédez au fichier src et assurez-vous que le fichier app.vue ressemble à ceci :
<modèle>
<div identifiant="application">
<image autre="Vue logo" src="./assets/logo.png">
<Bonjour le monde msg="Bienvenue dans votre application Vue.js"/>
</div>
</modèle>
<scénario>
importerBonjour le mondeà partir de './composants/HelloWorld.vue'
exportation défaut {Nom: 'application',Composants: {Bonjour le monde}
}
</scénario>
<style>
#application{
famille de polices: 'Avenir'Helvetica, Arial, sans empattement;
-webkit-police-lissage:anticrénelé;
-moz-osx-police-lissage:niveaux de gris;
aligner le texte:centre;
Couleur: #2c3e50;
marge supérieure: 60pixels;
}
</style>Pour afficher les noms, nous utiliserons la liaison de propriété. Les principaux points de données sont les noms d'artistes, les chansons et les semaines passées sur Billboard. Dans votre dossier de composants, ouvrez le composant helloworld et il devrait ressembler à ceci :
<modèle>
<div classer="Bonjour">
<h1>{{ message }}</h1>
<p>Pour un guide et des recettes sur la façon de configurer / personnaliser ce projet,<Br>Vérifiez<une href="https://cli.vuejs.org" cible="_Vide" rel="pas d'ouverture">vue-cli documentation</une>.</p>
<h3>Plugins CLI installés</h3>
<la><au><une href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" cible="_Vide" rel="pas d'ouverture">babel</une></au><au><une href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" cible="_Vide" rel="pas d'ouverture">fronde</une></au>
</la>
<h3>Liens essentiels</h3>
<la><au><une href="https://vuejs.org" cible="_Vide" rel="pas d'ouverture">Documents de base</une></au><au><une href="https://forum.vuejs.org" cible="_Vide" rel="pas d'ouverture">Forum</une></au><au><une href="https://chat.vuejs.org" cible="_Vide" rel="pas d'ouverture">Chat communautaire</une></au><au><une href="https://twitter.com/vuejs" cible="_Vide" rel="pas d'ouverture">Twitter</une></au><au><une href="https://news.vuejs.org" cible="_Vide" rel="pas d'ouverture">Nouvelles</une></au>
</la>
</div>
</modèle>Avant V-For
Comment affichez-vous les listes lors de la création de votre application Vue.js ? Si la directive v-for n'existait pas, voici comment vous afficheriez une liste des 10 meilleurs artistes de Billboard et le nombre de semaines qu'ils ont passées sur la liste. Remplacez le contenu du composant helloworld par le bloc de code ci-dessous :
<modèle>
<div classer="Bonjour">
<h3>{{ name }} avec {{ song }} a passé {{ weeks }} semaines dans les charts Billboard</h3>
</div>
</modèle>
<scénario>
exportation défaut {Nom: 'Bonjour le monde',accessoires: {Nom:Chaîne de caractères,chanson:Chaîne de caractères,semaines:Nombre}
}
</scénario><style délimité>h3{
marge: 40pixels0 0;
}
la{
type de style de liste:rien;
rembourrage: 0;
}
au{
affichage:bloc en ligne;
marge: 0 dixpixels;
}
une{
Couleur: #42b983;
}
</style>Ici, nous avons défini les types de données de ces propriétés décrites et nous devons maintenant les afficher dans le fichier app.vue.
<modèle>
<div identifiant="application">
<image autre="Vue logo" src="./assets/logo.png"><h2>Panneau d'affichage Hot 10 Records</h2>
<Bonjour le monde Nom="1. Mariah Carey" chanson="Tout ce que je veux pour noël, c'est toi" semaines="50"/>
<Bonjour le monde Nom="2. Brenda Lee" chanson="Se balancer autour du sapin de Noël" semaines="44"/>
<Bonjour le monde Nom="3. Bobby Helms" chanson="Jingle Bell déchire" semaines="41"/>
<Bonjour le monde Nom="4. Burl Ives" chanson="Un Noël joyeux et houx" semaines="25"/>
<Bonjour le monde Nom="5. Adèle" chanson="Facile avec moi" semaines="11"/>
<Bonjour le monde Nom="6. Andy Williams" chanson="C'est la période la plus merveilleuse de l'année" semaines="26"/>
<Bonjour le monde Nom="7. Wam" chanson="Noël dernier" semaines="24"/>
<Bonjour le monde Nom="8. José Feliciano" chanson="Joyeux Noël" semaines="19"/>
<Bonjour le monde Nom="9. Le Kid LAROI ft Justin Bieber" chanson="Rester" semaines="24"/>
<Bonjour le monde Nom="10. Les Ronettes" chanson="Promenade en traîneau" semaines="15"/>
</div>
</modèle>
<scénario>
importerBonjour le mondeà partir de './composants/HelloWorld.vue'
exportation défaut {Nom: 'application',Composants: {Bonjour le monde}
}
</scénario>
<style>
#application{
famille de polices: 'Avenir'Helvetica, Arial, sans empattement;
-webkit-police-lissage:anticrénelé;
-moz-osx-police-lissage:niveaux de gris;
aligner le texte:centre;
Couleur: #2c3e50;
marge supérieure: 60pixels;
}
</style>Si vous enregistrez tous les fichiers et exécutez la commande serve :
npm exécuter servirCela devrait ressembler à ceci dans le localhost:8080 de votre navigateur :
Cette approche est bonne pour le rendu de quelques éléments, mais avec le temps, cela devient une très mauvaise pratique car elle implique de nombreuses répétitions de code et est très inefficace. Dans notre cas, imaginez si nous devons afficher 100 artistes, il serait préférable de sauvegarder les données dans une base de données, puis de les parcourir et de les afficher.
Directive V-For
La directive v-for est la façon dont Vue résout ce problème, en s'assurant que votre code de présentation reste complètement propre et présentable sans avoir besoin de répéter le code.
La syntaxe de v-for ressemble à ceci :
<la identifiant="tableau-rendu">
<au v-pour="article dans articles">{{ élément.message }}</au>
</la>Création de la base de données
Vue a une option de données où vous pouvez gérer les affaires de données de composants, et, pour nous, nous aimerions stocker les informations sur les artistes de la liste Billboard.
<scénario>
importerBonjour le mondeà partir de './composants/HelloWorld.vue'
exportation défaut {Nom: 'application',Composants: {Bonjour le monde},Les données: une fonction(){
retourner{ArtisteListe: [
{Nom:'Mariah Carey',chanson:'Tout ce que je veux pour noël, c'est toi',semaines:50
},
{Nom:"Brenda Lee",chanson:"Se balancer autour du sapin de Noël",semaines:44
},
{Nom:"Bobby Helms",chanson:'Jingle Bell déchire',semaines:41
},
{Nom:'Burl Ives',chanson:"Un Noël joyeux et houx",semaines:25
},
{Nom:'Adèle',chanson:"Facile pour moi",semaines:11
}
]
}
}
}
</scénario>Maintenant que nous l'avons défini, nous allons continuer et définir la directive v-for pour dire à Vue de parcourir la liste et de parcourir et d'afficher les artistes un par un.
Remplacez la section template du fichier app.vue par le bloc de code ci-dessous :
<modèle>
<div identifiant="application">
<image autre="Vue logo" src="./assets/logo.png"><h2>Panneau d'affichage Hot 10 Records</h2>
<Bonjour le monde v-pour="artiste dans ArtistList" liaison v :clé="artistes.semaines" :Nom="nom d'artiste" :chanson="artiste.chanson" :semaines="artistes.semaines"/>
</div>
</modèle>Ici, nous avons parcouru le tableau Artistlist que nous avons créé, puis lié chaque attribut de Helloworld à l'élément de tableau correspondant. Voici comment utiliser v-for pour parcourir un tableau de données déjà créé.
Conclusion
Aujourd'hui, nous avons examiné rapidement la directive v-for et son fonctionnement. Nous avons également vu pourquoi c'est important et pourquoi l'équipe Vue en a fait une directive facile d'accès pour nous. Vous pouvez faire beaucoup plus avec la directive v-for, alors assurez-vous de rester à l'écoute du blog. Bon piratage !
Source link