Des applications web avec Vue.js

Je reprends des thèmes traités par ailleurs avec JS-jQuery dans le tutoriel HTML5 : boîte à couleurs et calculette.
Je vous montre qu'avec JS-Vue c'est beaucoup plus simple et que le code est beaucoup plus concis qu'avec JS-jQuery.
Applications web réalisés avec JS-jQuery

La flexibilité de Vue

Mais avant je voudrais vous montrer la flexibilité de Vue : l'utilisation de Vue.js n'interdit pas d'avoir du JS natif dans le même script !

Exemple

Dans la page ci-desssous il y a dans deux blocs dans la partie BODY.
Le premier bloc (4 images) n'est pas concerné pas l'instance de Vue.
Le deuxième bloc (dans le conteneur ARTICLE et identifié "affichage") est lié à l'instance de Vue° et comprend des éléments INPUT & P.
le script comprend deux fonctions écrites en JS natif et une instance de Vue incluant entre autres deux "methods". ... <style> img {width : 20%; height : auto; margin : 1%; vertical-align : top;} input {width : 150px ; height : 40px ; margin : 10px; } </style> <body> <img src ="../images/jolie_fille.jpg" onclick="supp(this)"/> <img src ="../images/bikini.jpg" onclick ="supp(this)"> <hr> <img src ="../images/trikini.jpg" onclick="efface(this)"/> <img src ="../images/burkini.jpg" onclick ="efface(this)"> <hr> <article id ="affichage"> <input type ='text' v-model='nombre' placeholder ='saisir un entier'> <input type ='text' v-model='texte' placeholder ='saisir un texte'> <p>Le carré du nombre saisi est : {{carre(nombre)}} </p> <p>Mot saisi converti en majuscule donne : {{maj(texte)}}</p> </article> <script> function supp(image){image.style.display ='none'; } function efface(image) {image.style.visibility ='hidden'; } var app = new Vue({ el: "#affichage", data: {nombre : '', texte : ''}, methods : { carre(cote) {return cote * cote}, maj(texte) {return texte.toUpperCase()} } } ); ...

Les images peuvent disparaitre par appel des fonctions "supp" OU "efface".
Ces deux fonctions sont écrites en dehors de l'instance de Vue avec la syntaxe de JS natif.

Dans l'instance de Vue on définit deux "methods". Il s'agit de deux fonctions avec passage d'un argument et qui retournent une valeur.
On peut appeler ces méthodes très simplement avec la syntaxe en "moustache" dans n'importe quel élément HTML lié à l'instance de Vue.

Le rendu

Cliquez sur chaque image pour l'effacer.
Dans les deux champs saisissez respectivement un entier et une chaine de caractères et observez ce qui apparait sous les zones de saisie.

Rappel CSS :
Pour effacer les différentes images j'ai utilisé 2 fonctions reposant sur deux propriétés différentes de CSS.
La différence majeure entre display:none et visibility:hidden est que le premier supprime entièrement un élément de la mise en page tandis que le second masque l'élément mais réserve la place qu'il occupait.

La boite à couleurs

Cette application vous permet de composer votre couleur et d'obtenir le code RGB correspondant.
Les paramètres r,g,b (red, green, blue) valent entre 0 et 255.

Le code

...
<style>
	article {width : 70% ; height : auto ; margin: 10px auto ; border : 1px solid black ; background : yellow;}
	label, input {height : 40px; width : 200px; margin : 10px; }
	div {width : 60% ; height : 150px ; margin : 10px auto; border : 1px solid red; }
	.centrer {text-align : center; }
</style>
</head><body>
<article id ="info">
	<h3 class ="centrer">Déplacer les trois	curseurs pour composer votre couleur</h3>
	<label>saisir intensité de rouge  : </label>
	<br><input type = 'range' min = '0' max = '255' step = '5' v-model="rouge" > {{rouge}}
	<br><label>saisir intensité de vert : </label>
	<br><input type = 'range' min = '0' max = '255'  step = '5' v-model="vert" /> {{vert}}
	<br><label>saisir intensité de bleu : </label>
	<br><input type = 'range' min = '0' max = '255' step = '5'  v-model="bleu"/> {{bleu}}
	<div v-bind:style ="{background :'rgb(' + rouge + ',' + vert + ',' + bleu + ')' }" ></div>
	<h3 class ="centrer">Valeur des propriétés CSS (background/border-color etc.) : rgb( {{rouge}} , {{ vert}} , {{ bleu}} )</h3>
</article>

<script>
var app = new Vue({
    el: "#info",
    data: {rouge : 122, vert : 122, bleu : 122 }  
  });
</script>
...

CSS : aucune difficulté.

HTML : Avec HTML5 on peut utiliser les contrôles de saisie en dehors de l'élémént FORM.
Chaque curseur (input type = range) est lié à une donnée de l'instance.
Une boite DIV est remplie avec une couleur définie selon la notation RGB.

JS : l'instance de Vue se résume à l'initialisation de trois propriétés.

Le rendu

Exercice

Vous devez être capable maintenant de produire l'application "boite_a_couleurs_plus"
Dans cette page il y a quatre curseurs afin de composer un code RGBa (a comme Alpha : niveau de transparence/ opacité).
Je vous communique ci-dessous le rendu.

Attention l'alpha est compris entre 0 et 1.

Le code

À vous de réfléchir !

Calculette

Le code

...
<style>
	article {width : 80% ; height : auto ; margin: 10px auto ; border : 1px solid black ; background : yellow;}
	label, input,button {height : 50px; width : 20%; margin : 10px; }
	button {box-shadow : 5px 5px 5px grey;}
</style>
</head>
<body>
<article id ="info">
	<p><label>Saisir le premier terme :</label>
	<input type = 'text' v-model="premier">
	<p><label>Saisir le deuxième terme :</label>
	<input type = 'text' v-model="deuxieme">
	<p><button v-on:click ="resultat = parseFloat(premier) + parseFloat(deuxieme)">Addition</button>
	<button v-on:click ="resultat = premier - deuxieme">Soustraction</button>
	<button v-on:click ="resultat = premier * deuxieme">Multiplication</button>
	<button v-on:click ="resultat = premier / deuxieme">Division</button>
	<button v-on:click ="resultat = premier **deuxieme">Puissance</button></p>
	<p><label>Résultat :</label>
	<input type = 'text' v-model="resultat" readonly>
</article>
<script>
var app = new Vue({
    el: "#info",
    data: {premier : 0, deuxieme : 0, resultat : 0}
  });
</script>
...

CSS : un effet 3D donné aux boutons.

HTML : premier champ lié à la variable premier ; deuxième champ à la variable deuxieme ; troisième champ (en lecture seule) à resultat.
Chaque directive v-on:click a pour valeur une instruction JS.
Pour les soustractions, multiplication & division la conversion en Number est automatique mais pas pour l'addition car l'opérateur entre deux chaines signifie concaténation. Il faut donc forcer la conversion en Number.

JS : l'instance de Vue se résume à l'initialisation des trois variables.

Le rendu

Attention le résultat peut être affiché en notation scientifique.

Application : commander dans un fastfood

Je rappelle que la méthode push() appliquée à un tableau permet d'ajouter un item à ce dernier (en fin de liste).

Le code

...
<style>
	article {height : auto ; width: 80%; margin : 10px auto; background : rgb(0,255,255); box-shadow : 10px 10px 10px grey; }
	button, input {width : 100px ; height : 20px ; margin : 5px }
	p {margin : 5px 15px; }
</style></head>
<body>
<article id="info">
	<h2>{{datejour}} à {{heure}}</h2>
	<input type ="text" v-model ="sabot" placeholder ="Saisir le numéro du sabot">
	<h3 v-if ="sabot != '' " >Cher(e) client(e) nous sommes heureux de vous revoir </h3>
	<h2>Notre menu</h2>
		<p v-for ="produit in liste">{{produit}}
			<button v-on:click ="commander(produit)">Commander !</button></p>
		<h2 v-if="commandes.length >0">Votre commande : </h2>
		<ul>
			<li v-for ="commande in commandes" >{{commande}}</li>
		</ul>
</article>

<script>
var app = new Vue({
    el: "#info",
    data: {
		datejour : new Date().toLocaleDateString(),
		heure : new Date().toLocaleTimeString(),
		sabot :"", 
		liste :['burger M', 'burger XL', 'frites M','frites XL', 'glace M', 'glace XL', 'coca M', 'coca XL'],
		commandes : [] 
	},
	methods:{commander(produit){this.commandes.push(produit);}	}
  });
</script>
...

CSS : couleur de fond exprimée avec la notation RGB.

JS :
Dans les "data" de l'instance de Vue on crée les variables "datejour" & "heure" via des méthodes de l'objet Date.
Si ces méthodes vous sont inconnues
Je crée aussi deux tableaux indicés : "liste" & "commandes" ; le deuxième est initialement vide !
Dans le paramètre "methods" je définis la fonction "commander" de façon simplifiée.

HTML :

affichage de l'instant présent
saisie du numéro de sabot
affichage conditionnel d'un message de bienvenue
une boucle pour afficher la carte avec un bouton de commande pour chaque article
lorsque vous cliquez sur un bouton de commande vous appelez la fonction "commander". Cette fonction ajoute l'article choisi au tableau "commandes"
affichage conditionnel de "Votre commande".
une boucle pour afficher le contenu du tableau "commandes".

Le rendu

Saissez le numéro du sabot puis constituez votre menu.
Votre commande s'affiche en dessous.

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Des applications web avec Vue.js

La flexibilité de Vue

Exemple

Le rendu

La boite à couleurs

Le code

Le rendu

Exercice

Le code

Calculette

Le code

Le rendu

Application : commander dans un fastfood

Le code

Le rendu