• 15 heures
  • Moyenne
Licence

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 08/03/2022

Créez votre première application Vue.js

Bonjour et bienvenue dans ce cours sur le framework Vue.js. 👋 Entrons dans le vif du sujet et découvrons les applications monopages, ou Single Page Applications (SPA).

Découvrez le monde des applications monopages

Dans le modèle traditionnel du développement web, lorsqu'un utilisateur clique sur un lien pour aller sur une nouvelle page ou doit mettre à jour le contenu d'une page, la page entière doit généralement être rechargée. Cela signifie que même si l'utilisateur ne fait que soumettre un simple formulaire, une nouvelle page est générée pour gérer la réponse.

Cependant, cela pose plusieurs problèmes, car :

  1. Pour les utilisateurs qui paient à la quantité de données consommées, la facture s'alourdit inutilement. En effet, ils doivent télécharger une page entière pour n'obtenir que de petites mises à jour.

  2. L'expérience utilisateur est ainsi souvent détériorée.

Au début des années 2000, le concept d'applications monopages (Single Page Applications) s'est fait connaître mondialement, avec pour but de résoudre ces problèmes. Le concept fondamental des SPA est le suivant :

  1. Les utilisateurs ne chargent une page web qu'une seule fois.

  2. Les contenus de la page sont mis à jour de façon distincte plutôt qu'au niveau de la page entière, ce qui permet à l'utilisateur d'interagir de manière beaucoup plus dynamique.

  3. JavaScript contrôle le lancement de nouvelles pages au sein du même domaine, cela ne nécessite ainsi plus de rafraîchissement complet de la page.

Cette idée a pu prendre vie au fur et à mesure, car les navigateurs et l'équipement des utilisateurs ont gagné en puissance.

Découvrez notre framework : Vue

Lorsqu'il s'agit d'apprendre à utiliser un framework frontend, de nombreuses options s'offrent à nous : React, Angular, Vue, Polymer, et bien d'autres. Mais pour se lancer, j'aurais tendance à vous conseiller Vue. En effet, sa courbe d'apprentissage est la plus facile pour tout développeur ayant des compétences basiques en HTML, CSS et JavaScript. Par conséquent, cela signifie que :

  1. Devenir membre contributeur d'un projet est beaucoup plus accessible.

  2. Les personnes qui ne sont pas expertes en JavaScript peuvent contribuer à un projet avec un minimum d'accompagnement.

  3. Les développeurs peuvent passer plus de temps à être productifs plutôt qu'à apprendre à utiliser un nouvel outil.

De plus, Vue a été conçu dès le départ pour être aussi intuitif que possible pour les développeurs. Cela signifie que beaucoup de temps et d'efforts sont consacrés à la conception de l'outil, afin qu'une formation minimale suffise pour être efficace, et produire du code. De plus, sa communauté particulièrement accueillante et une documentation remarquable en font un choix incontournable comme premier framework avec lequel les développeurs devraient travailler.

Mettons-nous au travail : voyons dès maintenant à quel point il est facile d'être opérationnel en moins de 2 minutes avec Vue !

Ajoutez Vue à votre site

Alors que pour bon nombre de frameworks, vous devrez passer par des outils de build complexes comme webpack, force est de constater que l'ajout d'une instance de Vue.js à votre site est aussi simple que d'intégrer une balise script  sur votre page HTML. Promis, c'est aussi facile que ça. 🤗 

Voici une simple page HTML avec le lien CDN (content delivery network) ou RDC, en français (pour réseau de diffusion de contenu) pour Vue.

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Mon Application Vue.js</title>
</head>
<body>
    <div id="app">
        <h1>Ma première application Vue.js !</h1>
        <p>J'ai hâte de créer des applications incroyables !</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>

Voici comment tester si Vue a été correctement chargé ou non.

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Mon Application Vue.js</title>
</head>
<body>
    <div id="app">
        <h1>Ma première application Vue.js !</h1>

        <p>J'ai hâte de créer des applications incroyables !</p>
    </div>
    <script>
    // Vue n'est pas encore chargé donc une ReferenceError devrait être retournée
    console.log(Vue)
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // La console devrait maintenant afficher une fonction
        console.log(Vue)
    </script>
</body>
</html>

Si vous ouvrez cette page dans votre navigateur et vérifiez la console JavaScript, vous devriez voir :

Dans la console Javascript
Dans la console JavaScript

Lorsque cette fonction s'affiche, cela signifie que vous avez bien réussi à charger Vue ! Félicitations !🎉

Définissez où Vue devrait apparaître sur votre page

Même si nous sommes parvenus à charger Vue sur notre page, cela ne signifie pas encore que notre site est devenu une application monopage. Bien que le terme SPA (application monopage ou single-page application) puisse nous faire penser que la page entière est contrôlée par JavaScript, la plupart des frameworks frontend permettent aux développeurs de contrôler quelle partie de la page est une SPA. En d'autres termes, vous pouvez décider de quel élément HTML le framework est responsable.

Pour permettre à Vue d'accéder à notre page, nous devons commencer par créer une nouvelle instance de Vue.

<!DOCTYPE html>
<html lang="fr">
<body>
  <!-- Contenu temporairement caché pour cet exemple -->
  <script>
    const app = new Vue()
  </script>
</body>
</html>

Ensuite, nous allons configurer notre instance de Vue en lui transmettant un objet contenant notre première configuration : l'emplacement de la page sur laquelle Vue est installé.

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Mon Application Vue.js</title>
</head>
<body>
  <div id="app">
    <h1>Ma première application Vue.js !</h1>
    <p>J'ai hâte de créer des applications incroyables !</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Cet objet de configuration ne possède qu'une seule propriété : « el », qui est l'abréviation d'element. Il est ensuite suivi d'un sélecteur CSS (c'est-à-dire  #app,  div,  .app).

Utiliser un sélecteur d'ID (c'est-à-dire  #app) est considéré comme étant une bonne pratique, car votre application devra être reconnue de façon unique sur une page.

Et, bien qu'il puisse accepter n'importe quel type de sélecteur CSS parmi ceux que vous utilisez habituellement, il ne peut pas sélectionner les éléments  <html>  ni  <body>.

Apprenez à stocker des données

Découvrez comment stocker les données

Comme pour toute autre application, nous avons besoin de stocker les données afin de pouvoir les réutiliser et effectuer des actions pour l'utilisateur. Dans Vue, cela se concrétise par l'ajout d'une propriété « data » qui a comme valeur un objet. Elle peut accepter n'importe quelle paire clé - valeur classique que vous pourriez habituellement définir en JavaScript

Découvrez comment afficher le rendu des données

Lorsque nous voulons afficher nos données dans notre application web, Vue utilise la syntaxe en "moustache" (entre deux accolades) pour afficher le rendu des données. Elle est représentée par deux accolades, comme indiqué ci-dessous :

<div id="#app">
  <h1>VueMart</h1>

  <h2>Panier</h2>
  <ul>
    <li>Pommes: {{ costOfApples }}€</li>
    <li>Bananes: {{ costOfBananas }}€</li>
    <li>Noix de coco: {{ costOfCoconuts }}€</li>
  </ul>
</div>

Cet exemple utilise les doubles accolades pour afficher la valeur d'une variable simplement, mais les doubles accolades peuvent aussi être utilisées pour afficher le rendu d'expressions JavaScript basiques. En voici quelques exemples :

<!-- Réaliser le calcul -->
{{ (2 + 8) * 10 }}

<!-- Appeler des méthodes de string -->
{{ "alexia".toUpperCase() }}

<!-- Opérateurs ternaires -->
{{ 2 > 0 ? 'Deux est plus grand que zéro' : 'Vous ne verrez jamais cette phrase' }}

Entraînez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours, dans le dossier  cafe-avec-vue. Pour commencer, consultez la branche  P1C2-Begin.

Instructions

  1. Ajoutez Vue.js à  index.html  pour le convertir en application monopage.

  2. Votre application doit avoir une propriété dans  data  appelée  restaurantName.

  3. Le nom du restaurant doit être rendu à l'aide de la syntaxe en moustache.

En résumé

Félicitations ! Vous êtes maintenant capable de :

  • installer Vue sur une page web sans l'aide d'outils de build ;

  • mettre en place une nouvelle instance de Vue ;

  • associer Vue à un élément HTML ;

  • définir un espace de stockage de données simple ;

  • afficher le rendu de données à l'aide des doubles accolades.

Nous allons ensuite commencer à aborder l'un des aspects les plus puissants des applications monopages : la gestion des données !

Exemple de certificat de réussite
Exemple de certificat de réussite