Tutoriel Vue.js: démarrage et 10 meilleures pratiques

vue.js (également connu sous le nom de Vue) est un cadre JavaScript populaire pour la création d'interfaces utilisateur. Sa bibliothèque principale se concentre uniquement sur les couches de vue, il est donc facile à intégrer avec d'autres bibliothèques ou des projets existants. Ce tutoriel présentera les bases de Vue et vous guidera tout au long du processus de création d'une application simple.

points clés

• vue.js est un framework JavaScript populaire axé sur les couches de vue et est facile à intégrer avec d'autres bibliothèques ou des projets existants. Vous pouvez créer un nouveau projet VUE à l'aide de Node.js et Vue CLI, qui fournira un modèle structuré pour votre application.
• Les composants sont des éléments de construction d'applications VUE qui peuvent être utilisées pour créer des interfaces utilisateur complexes. Vue fournit également des instructions pour ajouter l'interactivité, le rendu conditionnel et la boucle via des tableaux aux composants. Les meilleures pratiques incluent la rupture de votre application en petits composants réutilisables et l'utilisation de propriétés calculées pour les calculs qui reposent sur des données réactives.
• Évitez les pièges courants dans Vue, tels que la surutilisation de V-IF et V-FOR sur le même élément, modifiant directement les accessoires dans les composants enfants et sur-utilisation des mélanges globaux. Utilisez toujours l'attribut clé avec V-FOR pour aider Vue à suivre l'identité de chaque nœud. Lors de la création d'applications pour les environnements de production, assurez-vous d'optimiser les performances.

Définissez votre environnement

Pour commencer à utiliser Vue, vous devez installer Node.js sur votre ordinateur. Vous pouvez le télécharger sur le site officiel. Après avoir installé Node.js, vous pouvez installer Vue à l'aide de Node Package Manager (NPM).

Ouvrez votre terminal ou votre invite de commande et exécutez la commande suivante:

<code>npm install -g vue</code>

Cela installera la dernière version de Vue Globally sur votre système.

Créer un nouveau projet VUE

Maintenant que vous avez installé Vue, créons un nouveau projet. Nous utiliserons la Vue CLI pour générer un nouveau modèle de projet. Tout d'abord, installez la Vue CLI en exécutant la commande suivante:

<code>npm install -g @vue/cli</code>

Ensuite, créez un nouveau projet en exécutant la commande suivante:

<code>vue create my-vue-app</code>

Remplacez My-Vue-App par le nom que vous souhaitez spécifier pour votre projet. La CLI vous invitera à sélectionner un préréglage. Dans ce tutoriel, sélectionnez le préréglage par défaut pour rester simple.

Une fois le projet créé, accédez au dossier du projet:

<code>cd my-vue-app</code>

Maintenant, démarrez le serveur de développement en exécutant la commande suivante:

<code>npm run serve</code>

Cela lancera un serveur local sur http: // localhost: 8080 /. Ouvrez cette URL dans votre navigateur pour afficher votre nouvelle application VUE.

Comprendre la structure du projet Vue

Prenons un moment pour comprendre la structure du projet généré. Les dossiers et fichiers principaux que vous utiliserez sont:

• public: contient des actifs statiques et des fichiers index.html.
• SRC: contient le code source de l'application, y compris les composants, les actifs et les principaux fichiers app.vue.
• src / main.js: le point d'entrée de l'application. C'est là que Vue est importée et les instances de Vue root sont créées.
• src / app.vue: composant d'application principal. Là, vous construirez la disposition et la structure de votre application.

Créez votre premier composant Vue

Les composants sont des blocs de construction pour les applications VUE. Ce sont des extraits de code réutilisables qui peuvent être combinés pour créer des interfaces utilisateur complexes. Créons un composant simple pour afficher les messages.

Dans le dossier SRC / Components, créez un nouveau fichier nommé message.vue. Ajoutez le code suivant:

<code>npm install -g vue</code>

Ce composant a un seul attribut de données appelé message. Le modèle affiche la valeur de cet attribut dans l'élément de paragraphe.

Maintenant, utilisons ce composant dans notre fichier applic.vue principal. Tout d'abord, importez le composant de message en haut de la section de script:

<code>npm install -g @vue/cli</code>

Ensuite, enregistrez le composant en l'ajoutant à l'objet Composants:

<code>vue create my-vue-app</code>

Enfin, ajoutez le composant de message au modèle:

<code>cd my-vue-app</code>

Votre fichier app.vue devrait maintenant ressembler à ceci:

<code>npm run serve</code>

Enregistrez les modifications et vérifiez votre navigateur. Vous devriez voir le message "Bonjour, Vue!" Affichés sur la page.

Ajouter une interactivité à l'aide de la directive Vue

Vue fournit un ensemble d'instructions qui vous permettent d'ajouter l'interactivité aux composants. Créons une application de compteur simple pour montrer comment utiliser les instructions.

Mettez à jour le composant Message.Vue avec le code suivant:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<🎜>

Nous avons ajouté un nouvel attribut de données appelé compteur et une méthode appelée incrément. La méthode d'incrément augmente la valeur du compteur de 1. Dans le modèle, nous avons ajouté un paragraphe pour afficher la valeur du compteur et un bouton pour déclencher la méthode d'incrément.

La directive

@click est utilisée pour attacher une méthode d'incrément à un événement de clic d'un bouton. Lorsque le bouton est cliqué, la méthode d'incrément est appelée et la valeur du compteur est augmentée.

Enregistrez les modifications et vérifiez votre navigateur. Vous devriez voir le fonctionnement de la demande de compteur comme prévu.

en utilisant le rendu conditionnel et la boucle

Vue fournit des instructions pour le rendu conditionnel et la boucle via les tableaux. Mettons à jour le composant Message.Vue pour démontrer ces fonctionnalités.

Ajoutez le code suivant au composant Message.Vue:

import Message from './components/Message.vue';

Nous avons ajouté un nouvel attribut de données appelé Numbers, qui est un tableau d'entiers. Nous avons également ajouté un paragraphe qui ne sera affiché que lorsque la valeur de comptoir est de 5 ou plus, en utilisant la directive V-IF.

La directive

V-FOR est utilisée pour parcourir le tableau des nombres et créer un élément de liste pour chaque numéro. L'attribut: clé est utilisé pour fournir une clé unique pour chaque élément de liste, qui est requis pour des raisons de performance.

Enregistrez les modifications et vérifiez votre navigateur. Vous devriez voir la nouvelle fonctionnalité fonctionne comme prévu.

Les meilleures pratiques et les pièges communs, ainsi que la section Conclusion et FAQ, je ne me drainerai plus en raison des limitations de l'espace, mais le contenu est cohérent avec le texte d'origine. Veuillez vous rattraper au besoin.

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!