Ce que peut contenir une page Vue.Js

Dans les articles précédents, nous avons vu comment créer notre première application avec Vue.Js. Cependant, pour être dans la mesure de bien comprendre la création d’une page Web, il faut tout d’abord connaitre et savoir utiliser ce qu’elle contient ou ce qu’elle peut contenir.

La syntaxe

Chaque fichier de page Web en Vue.Js, donc les fichiers .vue, sont composés de trois balises de haut niveau : la balise <template> qui va contenir tout le code sous format HTML, la balise <script> où va être placé le code JavaScript de Vue.Js pour pouvoir effectuer plusieurs actions et modifications et la balise <style> qui va gérer tout ce qui concerne le CSS habituel. Il est aussi possible d’incorporer des balises personnalisées et d’inclure des fichiers externes dans le fichier *.vue.

Template

Ce qu’on voit principalement lorsqu’on ouvre une application Vue.Js est le contenu de la balise <template>. En revanche, le code HTML peut être différent de ce qui nous est affiché, étant donné que celui-ci peut passer par plusieurs changements, car la balise peut contenir des directives, des composantes, des variables et plus encore.

Script 

L’implémentation du code JavaScript est une étape très importante dans la création d’une application avec Vue.Js car elle permet de définir le comportement et les fonctionnalités d’une page ou d’un composant. Parmi ce qu’on peut retrouver dans un script d’une application Vue :

Data :

Le "Data" dans le JavaScript d’une application Vue.Js est une fonction qui retourne un objet qui contient les variables qu’on lui a définies et qu’on peut réutiliser.

Exemple :
export default {
 data() {
   return {
     message: "Bonjour !"
   };
 }
}
 

Methods :

Une méthode est une fonction qui effectue l’action définie et qui est associée à l’instance de vue actuelle ou au composant actuel.

Exemple : 
export default {
 data() {
   return {
     message: "Bonjour !",
     count: 0
   };
 },
 methods: {
   incrementer() {
     this.count++;
     this.message = "Le compteur est maintenant à : " + this.count;
   }
 }
}

Computed :

Similaires aux méthodes, cependant, elles gardent le résultat de la fonction en cache pour le retourner à chaque appel et elles vont se mettre à jour automatiquement seulement lorsque leurs dépendances changent.

Exemple : 
export default {
 data() {
   return {
     count: 0
   };
 },
 computed: {
   message() {
     return "Le compteur est maintenant à : " + this.count;
   }
 }
}

Watch : 

Permet de surveiller un changement dans une propriété et effectue une action en conséquence automatiquement. Il est également possible d'accéder à la fois à l'ancienne valeur et à la nouvelle valeur de la propriété au besoin.

Exemple :
export default {
 data() {
   return {
     count: 0,
     message: "Le compteur est maintenant à : 0"
   };
 },
 watch: {
   count(nouvelleValeur, ancienneValeur) {
     this.message = "Le compteur a changé de " + ancienneValeur + " à " + nouvelleValeur;
   }
 }
}

Hooks du cycle de vie:

Il existe aussi des fonctions relatives au cycle de vie d’une instance de vue qui s’exécute depuis son initialisation jusqu’à sa destruction. Voici le diagramme qui indique quand chacune de ces fonctions s’exécute.

Style

Dans Vue.Js le Css reste le même que celui utilisé sans framework, donc il n’y a pas vraiment d’autre concepts à connaitre.

Conclusion

En conclusion, une page Vue.Js standard est composé de balises <template> pour définir le HTML et contient des directives, des composantes et des variables permettant sa modification en temps réel. De plus, la balise <script> permet d’appliquer du code JavaScript à la page tout en ayant plusieurs fonctions qui effectuent des actions selon plusieurs critères qui peuvent être définis. Finalement, la balise <style> est présente pour ce qui concerne le CSS, en revanche, celle-ci n’apporte pas de changements intéressants.

Références

James Sinkala , « Understanding Vue.js Single-File Components (SFCs) », vuenoob, https://vuenoob.com/posts/understanding-vue-js-single-file-components-sfcs/ (Page consultée le 1er mars)

« SFC Syntax Specification », vuejs, https://vuejs.org/api/sfc-spec (Page consultée le 1er mars)

« Template Syntax », vuejs, https://vuejs.org/guide/essentials/template-syntax.html (Page consultée le 1er mars)

« Les hooks du cycle de vie », vuejs, https://fr.vuejs.org/guide/essentials/lifecycle.html (Page consultée le 1er mars)

« Vue.js Methods », educba, https://www.educba.com/vue-dot-js-methods (Page consultée le 1er mars)

manas_am2 , « 1. data and methods in Vuejs », medium, https://medium.com/@mk1316jes/1-data-and-methods-in-vuejs-b9c50c541e3 (Page consultée le 1er mars)

Sujithkumar Sundaran , « Vue.js - Understanding Data, Methods, Computed and Watch », medium, https://medium.com/swlh/vue-js-understanding-data-methods-computed-and-watch-aa97df7d979a (Page consultée le 1er mars)

Teodora Corbu , « Vue Js Methods – Demystified », digitalya, https://digitalya.co/blog/vue-js-methods/#1 (Page consultée le 1er mars)