Vue JS est un framework Javascript open source pour la création d’interfaces utilisateur et d’applications à page unique. Comparée à d’autres bibliothèques JS comme React, la courbe d’apprentissage de Vue JS est bien plus facile et les applications peuvent être développées en un temps plus court qu’avec React.

Lorsque vous utilisez un framework comme Vue JS, il y a de choses que vous devez connaitre lorsque vous débutez, dans cet article nous allons voir 10 choses à absolument savoir lorsqu’on débute avec Vue JS.

Comment configurer une application Vue JS à l’aide d’un fichier HTML ?


Les étapes suivantes vous aideront à répondre à cette question :

Comment cibler un élément particulier du DOM ?

En JavaScript, pour avoir accès à un élément du DOM on utilise document.querySelector, document.getElementById ou encore document.getElementByClass, mais en Vue JS on utilise ref :

Comment reproduire un élément dans Vue JS ?

La directive v-for est utilisée pour reproduire un élément dans Vue JS

Comment maintenir à jour le code HTML interne d’un élément avec la directive v-html ?

En utilisant le code suivant vous verrez que le contenu de la plage sera remplacé par la valeur de la propriété htmlBrut et interprétée comme du HTML brut. Vous verrez aussi qu’en utilisant la directive v-html le style est appliqué, mais sans la directive ce n’est pas le cas.

Comment désactiver un bouton sur le clic de l’utilisateur dans Vue JS?


Le code suivant vous montrera en quelque étape simple comment répondre à cette question :

Comment afficher la clé dans un objet paire clé-valeur à l’aide de Vue JS?

Si vous voulez un code simple qui vous permettra de faire cela, recopier juste le code suivant :

Comment incrémenter un nombre dynamiquement en utilisant Vue JS?


Nous allons utiliser la variable age pour une meilleure compréhension. Pour augmenter la variable age vous devez juste utilisez la directive click et ensuite mettre la variable age suivi de ++ entre les guillemets de la directive. Pour réduire la variable age, c’est assez simple, remplacez juste le ++ par — et l’âge se réduira automatiquement à chaque click.

Comment déclarer et appeler une fonction dans Vue JS?

En Vue JS, une fonction se déclare dans la propriété Methods du composant. Ensuite, pour l’appeler, vous pouvez créer un bouton, utiliser la directive click et ensuite écrire le nom de la fonction sans les parenthèses entre les guillemets de la directive.

Comment exécuter une fonction lorsque le composant a terminé le rendu initial et créé les nœuds DOM ?

Il y a différentes méthodes que vous pouvez utiliser pour faire cela, l’une d’elles consiste juste à appeler votre fonction dans la fonction mounted(), comme le code suivant la montre.

Comment ajouter ou retirer une classe à l’aide de Vue JS?

En Vue JS, vous pouvez faire ce qu’on appelle du class binding pour faire cela.  Class binding, est un concept qui permet de manipuler une classe à sa guise et d’y ajouter certaines propriétés dynamiques. Le code suivant la montre en détail.


Découvrez également :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

14 + cinq =