Préambule
- 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 donc clairement 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.
- Dans cette optique, les serveurs ne génèrent aucun code HTML, comme c'est le cas avec un serveur Web qui interprète du PHP pour produire du HTML.
- Il est même possible de se passer complètement d'un serveur web comme c'est le cas de l'exemple présenté dans cet article.
- Pour cela, il suffit que la page HTML de l'application télécharge le "package" vuejs écrit en JS. Ce gros script contient toute la mécanique nécessaire de vuejs pour mettre en place les mécanismes d'observation mentionnés ci-dessus.
- Cette façon de créer une application est cependant très limitée et ne convient que pour des exemples pédagogiques.
- Dès qu'il faut créer une véritable application, il convient d'utiliser un environnement de programmation tel que vue-cli, présenté dans l'article La structure d'un projet créé avec vue-cli
1°/ hello world en Vuejs "pur"
- Même si l'on utilise pas vue-cli, il convient de structurer son application en séparant le code dans différents fichiers.
- Il faut donc au moins créer :
- un fichier html représentant la page principale de l'application SPA (i.e. dans un modèle MVC : la partie vue)
- un fichier js permettant de mettre en place la "mécanique" de vuejs, c.a.d. créer l'instance de la classe Vue, de la raccrocher à un des éléments de la page html, et ensuite de réagir à des interactions de l'utilisateur (i.e. dans un modèle MVC : la partie contrôle).
- Il est également conseillé de créer :
- un ou plusieurs fichier js contenant les données gérées par l'application (i.e. dans MVC : le "modèle")
- un ou plusieurs fichier js décrivant les composants nécessaires pour créer l'application. NB : un tel fichier décrit les trois parties modèle, vue contrôle du composant.
- Pour l'exemple ci-dessous, il n'y pas de composants, juste le fichier HTML, le modèle et la partie contrôle.
Exemple (sources à télécharger [ ici ]) :
- le fichier modèle de données : model.js
var messages = [
{lang:"fr", text: "bonjour le monde"},
{lang:"en", text: "hello world"}
]- le fichier html : index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
<script src="/model.js"> </script>
</head>
<body>
<div id="myapp">
<p> {{ msg }} </p>
<button @click="toggleLang">Change language</button>
</div>
<script src="/index.js"> </script>
</body>
</html>- le fichier de la partie contrôle, créant la vue : index.js
var app = new Vue({
el: '#myapp',
data: {
messages,
msg:'salut',
lang: 'fr'
},
methods: {
toggleLang() {
if (this.lang === 'fr') {
this.lang = 'en'
}
else {
this.lang = 'fr'
}
let m = messages.find(e => e.lang === this.lang)
this.msg = m.text;
}
},
})Remarques :
- Dans la partie HTML, on voit apparaître des syntaxes qui sont étrangères : {{ }}, @click. Cela vient de vuejs
- L'instance de vue contient 3 attributs :
- el : permet d'indiquer à quel élément HTML on raccroche l'instance, en l'occurence à la balise <div> qui a pour id myapp.
- data : permet d'indiquer un ensemble de variables qui sont observées. Si la valeur de ces variables change, tous les éléments HTML qui en dépendent seront rafraîchit
- methods : permet de définir des fonctions, notamment celles qui vont modifier l'état des variables observées.
- Une des variables observée est messages, qui est déclarée dans model.js. Il est donc bien possible d'observer des variables "externes" à l'instance de vue.
- Chaque fois que l'on veut accéder à un variable observée en JS, on doit la préfixer par this.
- Pour tester l'exemple, il suffit de charger index.html dans un navigateur.
- Cet exemple montre deux choses :
- plus besoin d'écrire du code pour intervenir sur le DOM = super !
- il y a toujours besoin d'écrire le code qui manipule les données = pas de miracle !