Les bases d'une app VueJS

Il existe 2 styles d'API pour coder en VUE.js: Options API et Composition API. Donc si vous parcourez la documentation de VUE.js il est possible que vous tombiez sur l'un et l'autre, ne soyez pas intimidé.

Les deux styles d'API sont tout à fait capables de couvrir les cas d'utilisation courants. Il s'agit d'interfaces différentes alimentées par le même système sous-jacent. En fait, l'Options API est mise en œuvre au-dessus de la Composition API! Les concepts fondamentaux sont partagés entre les deux styles et ils sont équivalents.

Dans le cadre de ce cours, nous utiliserons le style Options API. Plus d'info ici.

Création d'une App

La première étape consiste à appeler la méthode createApp de l'objet global Vue. Celle-ci permet de créer une nouvelle instance d'une app Vue. Afin de pouvoir accéder à l'app ultérieurement, il est nécessaire de stocker le résultat dans une variable.

Par exemple:

const app = Vue.createApp({}); Cette variable peut porter n’importe quel nom, mais par convention elle est généralement nommée "app".

mount

Il faut ensuite associer l'app à une balise HTML afin de lui indiquer sa portée. Bref, seules cette balise et ses enfants pourront être contrôlées par l'app. Le reste du document n'existera pas à ses yeux.

Pour ce faire, l'app contenue dans la variable doit appeler sa méthode mount et lui passer en paramètre une chaine de caractères correspondant au sélecteur de la balise désirée.

Cette méthode accepte les mêmes sélecteurs que querySelector.

Par exemple, si la balise souhaitée a le id app:

app.mount('#app');

Si le résultat du mount est stocké dans une variable, il est possible d'y accéder afin de changer ses données ou encore d'appeler ses méthodes.

Par exemple:

const vm = app.mount('#app');
createApp() Données

Afin de définir le comportement de l'app, un objet contenant diverses propriétés doit lui être passé en paramètre. Parmi ces propriétés se trouve data: une fonction retournant les données susceptibles de changer dans l'application.

Par exemple, pour définir une valeur de nom, il est possible d'écrire:

const app = Vue.createApp({ data: function() { return { firstName: "Willy", lastName: "Wonka", picture: "willy-wonka.jpg" } } });

Pour des raisons de lisibilité, il est cependant suggéré d'utiliser la nouvelle syntaxe ES6, soit:

const app = Vue.createApp({ data() { return { firstName: "Willy", lastName: "Wonka", picture: "willy-wonka.jpg" } } });

data est donc une fonction retournant un objet constitué dans ce cas-ci des propriétés: firstName, lastName et picture.

Data

Interpolation des données {{ }}

Une fois, les données définies, il est possible d'y faire référence à l'aide de moustaches {{ ... }} (doubles accolades). Leurs contenus, incluant les moustaches elles-mêmes, seront remplacés par la donnée qui lui est associée. Qui plus est, si la valeur de cette donnée vient à changer, celle-ci se mettra automatiquement à jour dans le HTML.

Par exemple, le code suivant: <div id="app"> Salut { { firstName } } </div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Affichera en fait: <div id="app"> Salut Willy </div> Erreur fréquente
les moustaches ne sont fonctionnelles qu’à l’intérieur de la balise HTML assignée à l’app. Interpolations

Attributs via v-bind: ou :

Les données peuvent aussi être insérées dans un attribut HTML (class, src, alt, style, etc.). Cependant, les moustaches ne sont pas fonctionnelles dans ce contexte ❌. Il faut donc plutôt utiliser une directive v-bind en début d'attribut afin que son contenu se popule avec une donnée présente dans l'objet data.

Par exemple, pour afficher l'image contenue dans la propriété picture:

ou encore la syntaxe courte avec ::

Si plusieurs données doivent être combinées dans le cadre d'un attribut, il est nécessaire d'utiliser un littéraux de gabarit afin de gérer la combinaison.

Par exemple, pour inscrire le prénom et le nom dans le alt d'une image:

<div id="app"> <img :src="picture" :alt="`${firstName} ${lastName}`"> </div>

Si un attribut est associé à une donnée dont la valeur équivaut à null ou undefined, l’attribut ne sera pas créé. Attributs Méthodes et Événements

La propriété methods dans une app Vue est un objet contenant différentes méthodes pouvant être appelées. Ces méthodes peuvent avoir accès aux données contenues dans data via this et les altérer au besoin.

Par exemple, la méthode showActor révélant l'acteur derrière le personnage:

Ainsi, lorsque la méthode showActor est appelée, toutes les occurrences de firstName et lastName sont remplacées par Timothée et Chalamet.

v-on: ou @

Pour appeler une méthode, il faut ajouter un événement sur une balise dans l'app.

Par exemple, pour qu'un bouton appelle la méthode showActor():

<div id="app"> Salut { { firstName } } <button v-on:click="showActor()">Révéler l'acteur</button> </div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

ou encore la syntaxe courte avec @:

<div id="app"> Salut { { firstName } } <button @click="showActor()">Révéler l'acteur</button> </div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

EXERCICE Vue - Tableau NBA Vous devrez rendre dynamique à l’aide de Vue le tableau indicateur d’un match de la NBA

EXERCICE Vue - Cheese Kanye says Vous devrez mettre à jour la citation de Kanye West via vue.js et un API

Event Handling Classes dynamiques :class

Il est fréquent qu'une classe doit-être ajoutée ou retirée à un élément afin de refléter une action commise par un usager. Pour ce faire, Vue permet de passer un objet à un attribut. Cet objet doit contenir une propriété correspondant au nom de la classe souhaitée et comme valeur une donnée ou encore une expression. Ainsi, si cette valeur est évaluée à true, la classe est ajoutée et à l'opposée si elle est évaluée à false elle est retirée.

Par exemple, pour ajouter la classe orange lorsque la donnée isOrange est équivalente à true:

Si une classe contenant des caractères spéciaux doit être ajoutée, il sera nécessaire de l'entourer de guillemets.

Par exemple, une classe avec un trait d'union:

<img :src="picture" :class="{'is-orange': isOrange}"> En cas de doute, il est possible de toujours utiliser des guillemets, même si aucun caractère spécial n’est présent.

Multiple classes dynamiques

Puisqu'un objet est utilisé, il est possible d'ajouter plusieurs classes dynamiques simplement en les séparant par une virgule.

Par exemple:

Combinaison avec des classes statiques

Si certaines classes doivent être statiques (ne jamais changer), alors que certaines doivent être dynamiques (pouvoir changer), il est nécessaire d'utiliser deux attributs class. Un 1^er sans v-bind ou : pour les classes statiques et un 2^e avec pour les classes dynamiques. Ces deux attributs seront ensuite combinés par Vue.

Par exemple:

Produira le code suivant si la valeur de isOrange est true:

<img src="willy-wonka-square.jpg" class="media orange">

Class & Style Bindings Condition v-if

Rendu conditionnel

Certains éléments sont pertinents à afficher uniquement lorsqu'ils contiennent une valeur.

Par exemple, une bulle permettant d'afficher la date de naissance d'une personne n'est désirable que s'il y a une date à afficher. Si cette information n'est pas fournie, avoir une bulle vide est indésirable:

<div class="bubble" v-if="birth">{ { birth } }</div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Rendu conditionnel

Autre condition

Outre le fait de vérifier si une donnée est vide ou non, il est aussi possible d'ajouter une condition de comparaison directement dans v-if.

Par exemple:

<div class="bubble" v-if="birth>=2000">{ { birth } }</div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Ou encore comparer la valeur de deux paramètres:

<div class="bubble" v-if="firstName==lastName">{ { firstName } }</div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes. Boucle

Vue permet de boucler sur un tableau d'objets grâce à la directive v-for. Pour ce faire, il faut spécifier le nom temporaire que l'on souhaite attribuer à chaque objet dans le tableau et spécifier le tableau dans lequel ce trouve ces objets.

Par exemple, il est possible d'accéder à chaque rôle se trouvant dans le tableau rolesArray:

Par la suite, il faut spécifier si la propriété désirée est enfant du parent data ou enfant du rôle courant dans la boucle en la préfixant par role.

Index

Afin d'obtenir l'index courant dans une boucle v-for, il est suffit d'ajouter un 2e paramètre dans la directive. Puisque deux paramètres sont présents, il est nécessaire de les grouper dans entre parenthèses.

Par exemple:

Combinaison boucle avec événements

Il est possible de combiner une boucle avec des événements sans problème, simplement en spécifiant en paramètre à la méthode appelée l'objet devant être altéré.

Il ne faut jamais utiliser v-if sur un élément ayant v-for.

EXERCICE Vue - Ouest VS Est Afin d’afficher quel rappeur appartenait à quel camp est ou ouest, vous devrez compléter une app Vue.

Rendu de liste Alternatives à VueJS

OUTIL React React is a free and open-source front-end JavaScript library for building user interfaces based on components.

OUTIL Svelte Svelte is a free and open-source front-end component framework and language created by Rich Harris and maintained by the Svelte core team members.

OUTIL Angular Angular is a TypeScript-based, free and open-source single-page web application framework.

OUTIL Backbone.js Backbone.js is a JavaScript rich-client web app framework based on the model–view–controller design paradigm, intended to connect to an API over a RESTful JSON interface.