Vue.js
Cours et exercices
Éric Sarrion
Eyrolles
Chapitre 1
JavaScript ES61
Les variables
2
Utilisation de const2
Utilisation de let3
Mise en forme des chaînes de caractères7
Les fonctions
8
Utilisation de paramètres par défaut8
Nouvelle forme de déclaration de fonction en ES610
Objet this dans les fonctions11
Les objets
15
Déstructurer un objet15
Structurer un objet18
Opérateur... sur les objets22
Les tableaux
24
Déstructurer un tableau24
Structurer un tableau25
Opérateur... sur les tableaux26
Les classes d'objets
26
Création d'une classe27
Héritage de classe30
Les modules
35
Division d'une page HTML en plusieurs fichiers35
Intérêt des modules38
Export de données38
Utilisation du module dans le fichier HTML39
Import de données41
Utiliser plusieurs modules simultanément42
Chapitre 2
Hello Vue !47
Installer un serveur Hot Reload Server (pour réafficher automatiquement la page)
48
Installer l'utilitaire Vue Devtools
49
Écriture d'un premier code Vue dans la page
50
Autres formes d'utilisation du template
53
Transmission de paramètres au template
55
Accès aux méthodes depuis le template
60
Utiliser les propriétés calculées (computed properties)
62
Utiliser un composant
65
Chapitre 3
Exercice : gérer les éléments d'une liste67
Afficher les éléments de la liste
68
Utiliser la directive v-for69
Utiliser la directive v-if72
Utiliser la directive v-else73
Utiliser la directive v-else-if75
Supprimer un élément dans la liste
76
Utiliser la directive v-on77
Modifier un élément de la liste
81
Prise en compte du double-clic sur un élément de liste81
Afficher le champ de saisie lors du double-clic83
Utiliser la directive v-bind85
Valider le champ de saisie (version 1)86
Valider le champ de saisie (version 2)90
Donner le focus au champ de saisie en cours de modification
91
Ajouter un élément dans la liste
95
Chapitre 4
Gérer les événements99
Utiliser la directive v-on
100
Autre forme d'écriture de la directive v-on
101
Exercice - Utiliser les paramètres de l'événement avec $event
102
Afficher les coordonnées de la souris102
Dessiner dans la page affichée à l'écran104
Récupérer la valeur saisie dans un champ105
Exercice - Utiliser les modificateurs
107
Utiliser le modificateur stop107
Utiliser le modificateur self111
Utiliser le modificateur once113
Filtrer les touches avec les modificateurs lors de la saisie114
Chapitre 5
Utiliser les liaisons117
Liaison unidirectionnelle (binding one-way)
118
Utiliser les doubles accolades (...)et(...)118
Utiliser la directive v-bind120
Autre forme d'écriture de la directive v-bind122
Liaison bidirectionnelle (binding two-ways)
123
Utiliser la directive v-model sur les champs de saisie123
Utiliser la directive v-model sur les champs de saisie multilignes128
Utiliser la directive v-model sur les cases à cocher131
Utiliser la directive v-model sur les boutons radio136
Utiliser la directive v-model sur les listes de sélection138
Utiliser le modificateur number
141
Utiliser le modificateur trim
145
Utiliser le modificateur lazy
147
Utiliser la directive v-bind:class
149
Utiliser un objet dans la directive v-bind:class149
Utiliser un tableau dans la directive v-bind:class152
Utiliser la directive v-bind:style
153
Utiliser la directive v-bind:style sous forme d'objet153
Utiliser la directive v-bind:style sous forme de tableau157
Utiliser la directive v-bind:key
158
Chapitre 6
Utiliser les propriétés calculées161
Utiliser les propriétés calculées
162
Utiliser les méthodes ou des propriétés calculées ?
165
Utiliser les propriétés calculées dans les styles
165
Exercice - Utiliser les propriétés calculées pour appliquer un traitement lors de la saisie d'un champ
166
Chapitre 7
Utiliser les fonctions d'observation171
Utiliser une fonction d'observation
172
Exercice - Utiliser les fonctions d'observation pour appliquer un traitement lors de la saisie d'un champ
174
Chapitre 8
Créer des composants177
Créer un composant Timer avec Vue.component()
178
Donner vie au composant
180
Transmettre des propriétés au composant
182
Afficher un message lorsque le timer est arrivé à 00:00
185
Index187