Vue d’oiseau: comment commencer avec Vue.js

Prenez votre copie de CSS Visual Dictionary incl. diagrammes de toutes les propriétés CSS.

Photo par Sam Bark sur Unsplash

Vous avez toujours voulu apprendre à coder dans le framework Vue, mais vous n’avez tout simplement pas le temps de travailler dans votre emploi du temps chargé.

Peut-être vous sentez-vous dépassé par toutes les bibliothèques et les frameworks? Ce tutoriel Vue (commencer) sur l’œil de l’oiseau pourrait vous aider.

Comme React, Vue décompose votre application JavaScript en plusieurs parties:

  • l'objet d'application
  • méthodes membres et propriétés
  • et la vue réelle (c'est ici que se trouvent vos éléments HTML).

Attributs HTML v-basés de Vue

Vue ajoute de nombreux attributs personnalisés aux éléments que vous ne voyez généralement pas dans HTML standard, en les préfixant avec v-.

Par exemple, il y a v-html, v-if, v-else et beaucoup d'autres. Ils ont tous un objectif spécifique: rendre des éléments. Voyons un peu.

Commutateurs booléens

Un autre attribut v-show permet de basculer des éléments en fonction de leur état de visibilité.

Ceci est spécifié dans les données de propriété d’une application Vue sous la forme {boolean: true;}.

Ensuite, dans votre code HTML, vous pouvez l’utiliser pour déterminer les éléments à afficher.

Bonjour!

Chaque fois que App.data.boolean est à true, l'élément

sera visible.

La logique de votre application peut maintenant "activer" ou "désactiver" l'élément

dans votre code. La modification est automatiquement rendue.

En boucle

La directive v-for permet de créer des boucles pour répertorier les éléments HTML.

Cela signifie que vous pouvez incorporer des itérateurs directement dans des éléments HTML pour générer des listes de données stockées dans un tableau dans l'état de votre application Vue. Vous n’avez pas besoin de taper le même élément HTML encore et encore.

Voici un exemple classique d'itérateur de boucle.

Tout d’abord, préparez les données dans votre objet d’application:

Soit E = new Vue ({
     el: ‘#L’, // lien vers l’élément id = "L"
   Les données : {
  articles : [
      {message: ‘One’},
      {message: "Deux"},
      {message: "Trois"}]}}
});

Maintenant, dans votre conteneur d'applications HTML principal:

      
  • {{item.message}}

La directive v-for est au format ‘pour élément dans éléments’.

Cela signifie que vous créez une nouvelle variable appelée item dans votre boucle {{… here…}}. Les éléments de propriété proviennent de l'objet de données d'application lui-même.

Cela rendra votre tableau d'objets JSON en tant qu'éléments HTML!

Ce serait la même chose que d’écrire manuellement le code HTML suivant:

      
  • Un   
  • Deux   
  • Trois

Je n’entrerai pas dans les détails derrière chaque attribut basé sur v et ce qu’il fait dans ce tutoriel. Mais comme vous pouvez le constater, ils peuvent être très utiles.

Alors, comment construisez-vous les applications Vue avec cela?

Applications de construction

En combinant les données d'état de votre application avec ces attributs natifs v, vous créez des associations entre votre logique et le rendu de la vue de l'application.

Cela raccourcit votre application JavaScript et vous permet d'économiser de la bande passante (surtout sur les applications volumineuses). Cela vous aide également à faire les choses beaucoup plus rapidement.

Dans la capture d'écran ci-dessous, l'échafaudage de l'application est le lieu de rendu de tous vos tags et modèles.

Cela fonctionne beaucoup comme React. Vue considère votre application principale

comme le conteneur de toute l'application. Il stocke les propriétés et les méthodes dans l'objet d'application (voir ci-dessous).

Dans la capture d'écran, la ligne bleue indique comment les données de votre application sont liées aux éléments HTML qui rendent la vue.

La ligne verte relie vos méthodes aux événements.

Notez le contour rouge dans l'image ci-dessus. Dans Vue, vous devez lier les URL avec l'attribut: href et non l'attribut href. Si vous ne le faites pas, le lien ne fonctionnera pas.

// Correct (notez l'attribut lead: before href)
 {{url}} 
// Erreur (l'URL ne se lancera pas)
 {{url}} 

Application Data

Lors de la création d'applications dans Vue (ou même dans d'autres frameworks ou bibliothèques similaires), vous pensez généralement à un emplacement de stockage principal pour vos données. Dans React, cela pourrait être la propriété de l'état. Dans Vue, il est simplement stocké dans l'objet de données.

Selon la documentation de Vue elle-même, le stockage de données - souvent appelé la source de la vérité - est stocké dans la propriété de données brutes sur l'objet d'application principal lui-même:

const sourceOfTruth = {}

const application = new Vue ({data: sourceOfTruth});

La bonne chose à propos de cela est que vous pouvez stocker une valeur dans la propriété data: {...} et la rendre automatiquement disponible dans vos éléments HTML via v-text, v-pre, v-once (rendu une seule fois) et v-cloak (attendez que le rendu de la page et la vue soient montés) et de nombreux autres attributs.

En d'autres termes, les propriétés (valeurs primitives, objets et méthodes) deviennent omniprésentes dans l'application et peuvent être utilisées dans toutes les fonctionnalités supplémentaires apportées par la structure Vue à la table… à utiliser avec des attributs commençant par un préfixe v.

Et juste une note de côté. Si vous évitez d'utiliser v-cloak, vous risquez de rencontrer des artefacts de rendu. Par exemple, le style CSS saute dans la première seconde qui suit le chargement de votre application.

Objet Application Vue

C’est là que vous allez initialiser vos données et écrire vos méthodes d’application qui vous permettront de faire avancer les choses.

Comme vous pouvez le constater, vous disposez d’une série de propriétés et de méthodes, exactement comme dans une classe JavaScript classique.

Ci-dessous, une capture d'écran montrant votre objet d'application Vue principal. C’est là que vous construisez réellement la logique de votre application et que vous stockez des propriétés, des chaînes d’URL et des méthodes personnalisées. C’est comme séparer la logique du code de la vue.

Lorsque vous commencez à peine, c’est une bonne idée de bien cerner la situation à vol d'oiseau avant de passer directement au code.

Etant donné que vous n’écrivez pas simplement le code dans les balises