Préambule

• Les démonstrations de ce TD se basent sur les sources disponibles [ ici ].

  vuejs-td1-src.tgz

• Attention, seul le répertoire src est dans l'archive. Il faut donc créer un projet avec vue-cli et remplacer son répertoire src.

1°/ Principes de vuejs

• L'objectif de Vuejs est de prendre en charge l'affichage et le rafraîchissement automatique d'éléments d'une page HTML quand la valeur de variables JS change.
  • Pour cela, Vuejs met en place des mécanismes d'observation de ces variables et déclenche la mise à jour du DOM quand leur valeur change.
• Les valeurs de ces variables peuvent aussi bien venir d'un script JS qui est chargé localement dans le navigateur, que de requêtes à un serveur qui va répondre au navigateur avec par exemple des données au format JSON.
• Le principe de création d'une application Web avec vuejs repose sur le principe de séparation strict entre la visualisation des données et le contrôle des actions utilisateur, qui est entièrement géré par le navigateur, et la fourniture des données qui est gérée par des serveurs.
• L'utilisation de vuejs nécessite de penser autrement le développement web, par rapport aux pratiques classiques liées au PHP/Python/... où le serveur interprète un langage pour produire du HTML.
• Avec vuejs, le serveur Web se contente d'envoyer au navigateur un unique fichier html, des scripts JS, du css. Cet ensemble de fichiers peut être entièrement écrit "à la main", ou bien partiellement généré grâce à un environnement de développement tel que vue-cli.
• Contrairement à l'approche php, les scripts JS exécutés par le navigateur contiennent toute la logique de fonctionnement de l'application Web.
• Quand des données externes sont nécessaires, les scripts JS peuvent interroger un serveur de type API, pour aller les récupérer avec une requête asynchrone. Le navigateur n'a donc pas besoin de demander au serveur Web une autre page.
• Cette approche est la même que pour une application client/serveur basée sur des sockets.
• Son énorme avantage est de pouvoir développer la partie front-end (navigateur) et le back-end (serveurs) en parallèle.
• La seule chose qui doit être réglée avant est de spécifier le format des requêtes et des données échangées entre le navigateur et les serveurs.
• Pour créer et tester une application vuejs, il suffit d'avoir à sa disposition un éditeur de texte et un navigateur.
• En effet, il n'y a pas spécialement besoin d'héberger les fichiers créés sur un serveur Web, à part quand on passe en phase de déploiement/production.
• Pour autant, en milieu professionnel, la création d'applications web de type SPA (Single Page Application) avec Vuejs ne se fait pas en codant tout "à la main".
• En effet, vuejs repose sur la définition de composants. Un composant contient généralement une partie décrivant son aspect visuel (HTML) et une autre partie décrivant son aspect fonctionnel (en JS).
• Or, écrire des composants et les assembler sans passer par un environnement de dev. tel que vue-cli est relativement verbeux et fastidieux.
• C'est pourquoi on utilise tout le temps ce type d'environnement, à part pour de très petits exemples pédagogiques (cf. article hello world)
• Premièrement, vue-cli comporte des outils permettant de créer une application web à partir de fichiers dont la syntaxe n'est pas du pur javascript. Ce sont des fichiers dit SFC : Single File Components qui permettent de décrire des composants, à savoir leur visuel écrit en HTML + instructions vuejs, leurs données et fonctions écrit en JS, et leur sytle écrit en CSS.
• Il y a donc des logiciels associés à vue-cli permettant de faire la "compilation" et l'assemblage de ces fichiers pour produire une application.
• L'organisation du code de l'application est modulaire, à savoir qu'un fichier constitue un module qui va "exporter" des variables/fonctions que d'autres fichiers (donc modules) vont pouvoir importer pour les manipuler. En terme de résultat, c'est un peu similaire au include du php.
• Deuxièmement, vue-cli est un gestionnaire de projet :
  • on peut créer facilement un arborescence basique d'application,
  • on peut ajouter des modules/plugins au projet,
  • on peut tester rapidement l'application,
  • on peut créer (et tester) une version de production, prête à être déployée sur un serveur Web.
  • etc.
• Enfin, vue-cli permet de profiter de composants écrits par d'autres développeurs. En effet, ces composants suivent la syntaxe particulière mentionnée ci-dessus et qui sera décrite plus loin.

2°/ Description d'un fichier SFC pour vuejs (extension .vue)

2.1°/ Structuration générale

• Un fichier .vue décrit un composant en 3 parties :

  <template><!-- visuel du composant, en HTML + directive vuejs -->
  </template><script>
      // modèle des données et du contrôle du composant, écrit en JS
  </script><style>
      // définition des styles CSS
  </style>
  

• Seule la partie <template> est obligatoire. Comme indiqué, cette partie est rédigée en HTML, plus les directives introduites par vuejs.

  <aside> ⚠️

  ATTENTION : <template> ne doit contenir qu'une seule balise "racine". Bien entendu, cette balise peut contenir elle-même d'autres balises. C'est pourquoi on utilise très souvent la balise <div> comme balise racine.

  </aside>

• La partie <script> devient nécessaire lorsque la partie <template> doit afficher des données non statiques et sans utiliser les anciens principes de manipulation du DOM.
• Dans ce cas, la partie <script> va décrire les données locales du composant, celles reçues du composant parent, ainsi que les traitements manipulant ces données.

2.2°/ partie <script>

• De façon générale, cette partie définit un objet exporté, avec des attributs et/ou des fonctions bien précis définis par vuejs.
• Selon les besoins fonctionnels du composant, on va utiliser plus ou moins de ces attributs.
• De plus, si cet objet a besoin de fonction/objets définis dans d'autres fichiers, on place avant sa définition toutes les importations nécessaires.

• Le patron de code ci-dessous donne la plupart des attributs/fonctions possibles et leur contenu :

<script>
// importation de modules/fonctions/objets/...
export default {
  name: 'MyComponent', // le nom du composant
  components: { // liste des composants importés },
  data: () => {
    return {
      // déclaration des variables locales du composant
    }
  },
  props: {
    // definition des variables données par le composant parent
  },
  computed: {
    // définition des fonctions associées aux variables calculées
  },
  watch: {
    // définition des fonctions appelées automatiquement lors de changement de valeur de variables locales/props
  },
  methods: {
    //définition des fonctions "normales"
  },
  created() {
    // instructions appelées lors de l'instanciation du composant
  },
  mounted() {
    // instruction appelées lorsque le composant est intégré dans le DOM
  },
  updated() {
    // instructions appelées lorsque le composant est actualisé dans le DOM
  }
}
</script>

2.2.1°/ data