Accueil

Traduction

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

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Des applications avec Vue.js

Je reprends des thèmes traités par ailleurs avec JS-jQuery (voir tutoriel HTML5).
Je vous montre qu'avec JS-Vue c'est beaucoup plus simple et que le code est beaucoup plus concis.

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".

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

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

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

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 :

    La démarche :
  1. affichage de l'instant présent
  2. saisie du numéro de sabot
  3. affichage conditionnel d'un message de bienvenue
  4. 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"
  5. affichage conditionnel de "Votre commande".
  6. 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.