Vue.js est un framework JavaScript micro pour créer des composants réutilisables et réactifs sur votre site.
Les frameworks frontaux varient énormément en taille et en portée, où Vue.js se distingue par son design minimal et son adaptabilité. Vous avez le choix de construire l'intégralité de votre site à l'aide de Vue.js, juste pour rendre un élément unique de votre site réactif, ou quelque chose entre les deux. Pour cette raison, il est très accessible avec une courbe d'apprentissage superficielle.
Dans cet article, nous allons examiner les principaux composants de Vue.js et savoir comment installer et démarrer, mais commençons par examiner l’utilisation d’un framework frontal comme Vue.js et pourquoi. .
Les frameworks front-end, comme la plupart des frameworks, sont des tâches communes abstraites, le dénominateur commun que vous trouvez entre les projets. Vue.js vient spécifiquement pour abstraire le processus de création de composants HTML qui sont mis à jour dynamiquement via JavaScript.
Quelques-unes des difficultés rencontrées par Vue.js pour vous sont de générer le code HTML dynamique, de lier les actions des éléments HTML à la portée et au contexte de vos données, et de savoir quand le HTML doit être restitué automatiquement.
Par exemple, disons que vous avez une page où vous avez une liste dynamique de noms. Vous avez peut-être écrit un code qui ressemble à ceci:
Lorsque vous construisez le code HTML manuellement, outre le fait que le code devient rapidement difficile à gérer dans des exemples plus importants, il n'y a pas de réelle connexion entre les données et le code HTML généré. Si le tableau de noms change, vous devez en être conscient et redéfinir la liste. Tout cela pour afficher simplement des données dynamiques. Si vous souhaitez ajouter des gestionnaires d’événements comme un gestionnaire de clics, afin d’économiser l’étendue, vous continuerez à imbriquer votre code de plus en plus dans:
Avec Vue.js, vous séparez le code HTML en tant que modèle qui décrit les éléments à générer en fonction des données fournies, et Vue.js le rendra automatiquement.
Ce même exemple dans Vue.js ressemblerait à ceci:
Nous séparons complètement les aspects HTML du code JavaScript de la logique du code JavaScript, ce qui rend tout ce qui est autonome et beaucoup plus facile à gérer. Nous devenons un peu en avance sur nous, prenons un peu de recul et regardons comment le noyau de Vue.js atteint cet objectif ...
Au cœur de Vue.js, vous définissez une corrélation entre votre code HTML et certaines données, et à chaque modification des données, le code HTML sera mis à jour. La façon dont cela fonctionne est que, lors de l'instanciation d'un composant Vue.js, vous lui transmettez des données sous la forme d'un objet JavaScript, cet objet est ensuite modifié en remplaçant ses propriétés par des méthodes getter et setter traçables.
Vue.js analyse l'objet de données lors de la construction du code HTML et voit quelles données vous avez utilisées pour rendre les différents éléments HTML à l'intérieur. A l'aide de cela, il surveille les modifications apportées à l'objet de données et sait exactement ce qu'il faut mettre à jour et quand.
Une liaison aussi étroite entre les données et la vue simplifie considérablement le développement des applications frontales et minimise les erreurs dues aux fausses déclarations. Cette séparation des préoccupations vous permet de vous concentrer sur la logique de votre application sans avoir à gérer la mise à jour de la vue.
L'installation de Vue.js est aussi simple que d'inclure la bibliothèque:
Maintenant, comme je l'ai mentionné, une application Vue.js est composée d'un objet de données et d'un modèle HTML dans lequel intégrer les données. Donc, pour que notre première application voit Vue.js en action, ajoutez à la body :
Nous définissons d'abord un div qui sera notre modèle HTML pour notre application Vue.js. A l'intérieur, nous utilisons les doubles accolades pour l'interpolation des données dans le code HTML.
Dans l'application réelle Vue.js, nous définissons simplement les données et connectons le div comme élément pour que l'application à la fois rendre et utiliser comme modèle. Ensuite, pour augmenter la luminosité, nous incrémentons la variable de comptage sur notre application une fois par seconde.
C'est tout ce qu'il faut pour créer une application Vue.js, en l'ouvrant dans votre navigateur, vous verrez que la page se met automatiquement à jour à chaque fois que nous mettons à jour la propriété data.
Maintenant, dans la plupart des applications où le DOM réagit à la modification des données ne représente que la moitié de l'histoire, vous devez également mettre à jour les données, Vue.js s'en charge avec les événements et les méthodes. Les méthodes sont des fonctions stockées exécutées dans le contexte de votre application Vue.js.
Mettons à jour notre exemple de compteur pour ajouter la possibilité de démarrer et d'arrêter le minuteur au lieu de simplement le lancer:
Dans le modèle HTML, nous avons ajouté un bouton pour démarrer et arrêter le compteur. Pour ce faire, nous avons besoin que le texte du bouton soit dynamique et que nous ayons besoin d'un gestionnaire d'événement lorsque l'utilisateur clique sur le bouton.
Pour déclarer un événement dans Vue.js sur un élément, vous préfixez le nom de tout événement HTML standard avec v-on: , alors le mouseover l'événement devient v-on:mouseover ou la keyup l'événement devient v-on:keyup . Dans notre exemple, nous utilisons le v-on:click attribut pour gérer le click un événement.
Quelque chose que vous avez peut-être remarqué, c'est que pour le texte du bouton, nous appelons une méthode plutôt que de simplement référencer une propriété stockée. Dans de nombreuses situations, les données que vous stockez ne sont pas nécessairement au format que vous souhaitez afficher sur la page. Les méthodes peuvent être utilisées ici pour traiter les données et toute la réactivité que vous obtenez des propriétés s'applique lors de l'utilisation de méthodes. Si les données sous-jacentes changent, le modèle sera mis à jour en conséquence.
Dans l'application Vue.js, nous avons maintenant une nouvelle propriété contenant la variable timer et quelques méthodes. le toggle méthode qui est liée à l'événement de clic du bouton vérifie si oui ou non timer la propriété est définie, en démarrant ou en arrêtant la minuterie respectivement et le counterAction La méthode est utilisée pour afficher l’action correcte dans le bouton, là encore en fonction de la variable du temporisateur.
Étant donné que la méthode toggle modifie la propriété timer et que la méthode counterAction , qui se trouve dans le template Vue.js, utilise la propriété timer, tout changement de date est appelé. Le modèle restitue le texte du bouton.
Il est à noter que même si nous n’avons pas de valeur initiale pour la propriété timer , elle doit toujours être déclarée lors de la création de l’application Vue.js. Si vous ne déclarez pas la propriété depuis le début, la propriété ne sera pas réactive et ne provoquera pas le rendu du code HTML une fois modifié.
Dans notre exemple, la vue est mise à jour une fois par seconde lorsque la minuterie est en cours d'exécution. Une fois par seconde, notre méthode counterAction sera également appelée lorsque le bouton sera redessiné. Vue.js nous permet d'optimiser cela en mettant en cache le résultat d'une méthode et en ne rappelant que la méthode si les données sous-jacentes spécifiquement utilisées dans la méthode sont modifiées. Cela est également utile si vous utilisez la même propriété calculée à plusieurs endroits de la page, au lieu de traiter la valeur plusieurs fois, en mettant en cache la valeur, vous pouvez réduire considérablement les frais.
Mettons à jour l'exemple pour inclure les propriétés mises en cache:
La principale différence en dehors de la mise en cache est que les méthodes sous computed sont référencés en tant que propriétés par opposition aux méthodes, donc dans le modèle HTML, nous avons dû supprimer les crochets de counterAction .