Créez une application web avec Vue.js

Lorsque l'on évoque les problèmes de frontend rencontrés par les développeurs, certains apparaissent encore et encore. Et plutôt que de laisser à chacun le soin d'inventer sa propre façon de faire, Vue nous fournit des directives pour accomplir les tâches les plus communes.

Découvrez ce qu’est une directive

Les directives nous fournissent un moyen standard pour résoudre les problèmes courants. Elles sont particulièrement puissantes et écrites de manière sémantique, afin que le code soit facile à comprendre. Les directives ressemblent à des attributs HTML avec une différence principale : elles disposent toutes du préfixe  v-. Voici quelques directives courantes que vous rencontrerez dans les applications Vue :

•  v-if,  v-else-if, v-else

•  v-show

•  v-for

•  v-bind

•  v-on

•  v-model

Dans ce chapitre, nous allons passer ces directives en revue et voir comment les utiliser pour créer des applications Vue puissantes et facilement compréhensibles par tous.

Conditionnez l'affichage du contenu

L'un des scénarios les plus courants dans n'importe quelle application frontend est le besoin d'afficher ou de masquer le contenu en fonction de certaines conditions. Par exemple, selon le niveau d'autorisation d'un utilisateur, il faudra déterminer de manière dynamique le contenu à afficher ou à ne pas afficher. Dans Vue, deux directives principales permettent de réaliser cela :  v-if  et  v-show.

v-if, v-else-if, v-else

Comme le suggèrent les mots-clés de la directive, cette dernière suit la structure de rendu conditionnel standard  if/then  de JavaScript. En voici un exemple simple :

<div id="app">
    <!-- Si (if) l'utilisateur a les autorisations par défaut, afficher ce qui suit -->
    <section v-if="userPermission === 'default'">...</section>
    <!-- Sinon et si l'utilisateur a les autorisations administrateur, afficher ce qui suit -->
    <section v-else-if="userPermission === 'admin'">...</section>
    <!-- Si l'utilisateur n'a aucune autorisation afficher ce qui suit -->
    <section v-else>...</section>
</div>

v-show

Cette directive peut sembler très similaire à la directive  v-if  ; pourtant, les deux ne sont pas interchangeables.  v-show  est généralement utilisée dans le but de contrôler la visibilité d'un élément faisant l'objet d'une permutation (toggle, en anglais) fréquente. En voici un exemple courant :

<div id="app">
    <button @click="showModal = !showModal">Display Modal</button>
    <div v-show="showModal" class="modal">...</div>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            showModal: false
        }
    })
</script>

La principale différence entre les deux directives est que  v-show  permute la visibilité de l'élément HTML grâce au CSS, alors que v-if supprime complètement l'élément du DOM.

Bouclez sur votre contenu

On peut également citer un autre scénario courant qui consiste à devoir répéter un élément HTML. Dans le cas où nous récupérons des données d’une API par exemple, et que nous souhaitons afficher chaque item récupéré (un produit, un article, un commentaire…) la directive  v-for  permet de réaliser cette tâche. Elle suit la syntaxe de boucle JavaScript standard  for ... in. Prenons un exemple courant, le renvoi d'une liste. Dans notre exemple de panier d'achats, on aurait également pu écrire :

<div id="app">
    <h1>Vue Mart</h1>
    <h2>Shopping Cart</h2>
    <ul>
        <li v-for="item in shoppingCart">
            {{ item.label }} : {{ item.cost }}€
        </li>
    </ul>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            shoppingCart: [
                { label: 'Pommes', cost: 6 },
                { label: 'Bananes', cost: 2 },
                { label: 'Noix de coco', cost: 8 }
            ]
        }
    })
</script>

Définissez des attributs HTML de façon dynamique

Vous serez très souvent tenté d'utiliser une propriété  data  pour définir l'attribut d'un élément, plutôt que de le coder en dur. Il y a justement une directive faite exprès : la directive  v-bind. C'est le cas, par exemple, lorsque vous effectuez une requête pour récupérer des données auprès d'une API et que vous avez besoin de renvoyer des données en fonction de ce qui est retourné. Voici un exemple :

<div id="app">
    <ul>
        <li v-for="item in apiResponse">
            <a v-bind:href="item.url">{{ item.name }}</a>
        </li>
    </ul>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            apiResponse: [
                { name: 'GitHub', url: 'https://www.github.com' },
                { name: 'Twitter', url: 'https://www.twitter.com' },
                { name: 'Netlify', url: 'https://www.netlify.com' }
            ]
        }
    })
</script>

Écoutez des événements et répondez-y

Lorsque vous souhaitez écouter certains événements sur un élément, Vue vous facilite la tâche avec la directive   v-on.

Voici un exemple simple :

<div id="app">
    <button v-on:click="alert('Bonjour')">Cliquez ici !</button>
</div>

Cependant, nous aurons souvent besoin d'appeler des fonctions bien plus complexes qu'une seule ligne de JavaScript. Et c'est là que les méthodes entrent en jeu. Les méthodes vous permettent de définir des fonctions auxquelles votre application Vue aura accès. Elles sont définies comme la propriété  data.

const app = new Vue({
    el: '#app',
    data: {
        favoriteColor: 'bleu'
    },
    computed: {
        label() {
            return ': ' + this.favoriteColor
        }
    },
    methods: {
        alertColor(color) {
            alert('Ma couleur préférée est ' + color)
        },
        changeColor() {
            console.log('Je veux changer ma couleur préférée !')
        }
    }
})

Comme vous pouvez le constater, il faut un objet qui est en fait une fonction JavaScript standard. Cependant, vous voudrez parfois interagir avec des propriétés gérées dans Vue (c'est-à-dire, data, calculées, etc.). Tout comme vous désigneriez des propriétés  data  dans des valeurs calculées en les préfixant avec  this, vous ferez la même chose ici !

const app = new Vue({
    el: '#app',
    data: {
        favoriteColor: 'bleu'
    },
    computed: {
        label() {
            return ': ' + this.favoriteColor
        }
    },
    methods: {
        alertColor(colorLabel) {
            alert('Ma couleur préférée ' + colorLabel)
        },
        changeColor() {
            // Change la propriété data 
            this.favoriteColor = 'turquoise'
            // Appelle une méthode différente et passe une propriété calculée 
            this.alertColor(this.label)
        }
    }
})

Maintenant que vous avez tout cela en tête, passons aux entrées !

Mettez à jour les données dans des formulaires

Lorsque l'on travaille avec des formulaires, on préfère mettre à jour le data store en conséquence. Cela nous permet d'effectuer des tâches telles que lancer une validation, des calculs, etc. Même s'il est possible de réaliser cela manuellement avec une directive  v-on  avec  v-bind, Vue fournit un moyen standard pour accomplir cette tâche avec  v-model. Cela vous permet de définir la propriété  data  que vous souhaitez mettre à jour lorsque l'utilisateur interagit avec un formulaire.

Voici un exemple :

<div id="app">
    <label for="username">Nom d'utilisateur</label>
    <input id="username" type="text" v-model="username" />
    <label for="pw">Mot de passe</label>
    <input id="pw" type="password" v-model="password" />
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: ''
        }
    })
</script>

Maintenant, à chaque fois que l'utilisateur saisira des données dans les inputs correspondants, le data store sera mis à jour en conséquence !

Entraînez-vous

Vous trouverez le code source des exercices dans le repo GitHub du cours dans le dossier  cafe-with-a-view. Pour commencer, consultez la branche  P1C4-Begin.

Instructions

1. Utilisez la directive  v-for  pour afficher tous les éléments de simpleMenu.

2. Utilisez la directive  v-if  pour indiquer si un article est "En stock" ou "En rupture de stock".

3. Utilisez la directive  v-bind  pour rendre dynamiquement chaque image du menu et remplir son texte  alt.

4. Utilisez la directive  v-on  pour augmenter le total du panier lors de l'ajout d'un article du menu avec une fonction définie dans les méthodes appelées addToShoppingCart.

5. Utiliser v-modelpour permettre à l'utilisateur de mettre à jour le nombre d'articles qu'il souhaite mettre lorsqu'il fait un ajout au panier.

En résumé

Félicitations ! Vous avez acquis les compétences nécessaires pour utiliser les directives dans le but de :

• afficher et masquer du contenu ;

• réaliser une boucle à travers une liste de données et afficher le rendu de son contenu ;

• mettre à jour des attributs HTML de façon dynamique ;

• écouter des événements auxquels vous pouvez répondre ;

• créer des fonctions JavaScript que Vue.js peut utiliser ;

• configurer des formulaires pour que votre data store soit mis à jour au fur et à mesure que l'utilisateur interagit avec lui.

Il est temps pour nous de revoir ce que vous avez appris dans cette partie !