__ __ __ __ ________ __ _______
| | | || | | || | | | / |
| | | || | | || _____| | || __|
| | | || | | || |___ __ | | \_ |_
| \/ || |__| || ___|_ | \__| | __\ \
\_ _/ | || | __ \ || |
\__/ |________||________||__| \_______||_______/
Cours Vue.js
vue.txt 29/09/2021
ultimecool.com
Sommaire
CHAPITRE 1 - Vue Généralités
1.1. Introduction
1.2. Les directives Vue
1.3. Environnement de développement
1.4. Les composants monofichiers et props
1.5. La navigation avec le routeur Vue
1.6. Cycle de vie d’un composant
1.7. Gérez les styles de votre application
1.8. Evénements vers des composants parents
1.9. Composants flexibles avec les slots
1.10. le principe de state management
CHAPITRE 1 - Vue Généralités
1.1. Introduction
Le concept fondamental des SPA est le suivant : Les utilisateurs ne chargent une page web qu'une seule fois. Les contenus de la page sont mis à jour de façon distincte plutôt qu'au niveau de la page entière, ce qui permet à l'utilisateur d'interagir de manière beaucoup plus dynamique. JavaScript contrôle le lancement de nouvelles pages au sein du même domaine, cela ne nécessite ainsi plus de rafraîchissement complet de la page. Dans le web moderne, les SPA sont souvent construites grâce à des frameworks frontend.
Vue a été conçu dès le départ pour être aussi intuitif que possible pour les développeurs. Cela signifie que beaucoup de temps et d'efforts sont consacrés à la conception de l'outil, afin qu'une formation minimale suffise pour être efficace, et produire du code. De plus, sa communauté particulièrement accueillante et une documentation remarquable en font un choix incontournable comme premier framework avec lequel les développeurs devraient travailler.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon Application Vue.js</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Bonjour'
}
})
</script>
</body>
</html>
La propriété el indique l'élément où Vue devrait apparaître sur votre page. Vue utilise la syntaxe en "moustache" (entre deux accolades), pour afficher le rendu des données. les doubles accolades peuvent aussi être utilisées pour afficher le rendu d'expressions JavaScript basiques.
Pour que les données de notre application soient dynamiques et prêtes à réagir à toute modification pouvant intervenir dans le panier de l'utilisateur:
const app = new Vue({
el: '#app',
data: {
costOfApples: 6,
costOfBananas: 2,
costOfCoconuts: 8
},
computed: {
totalAmount() {
return this.costOfApples + this.costOfBananas + this.costOfCoconuts
}
}
})
1.2. Les directives Vue
Lorsque l'on évoque les problèmes de frontend rencontrés par les développeurs, certains apparaissent encore et encore. Et plutôt que de laisser à chacun le soin d'inventer sa propre façon de faire, Vue nous fournit des directives pour accomplir les tâches les plus communes.
<li v-if="costOfApples > 0"> ...
<li v-for="item in shoppingCart">
<a v-bind:href="item.url"> {{ item.label }} : {{ item.cost }}€
</li>
v-bind permet d'injecter la valeur dans la chaine de caractères. Dans la version raccourcis on a
On a aussi: v-if, v-else-if, v-else, v-show, v-for, v-bind, v-on (@), v-model . v-if supprime complètement l'élément du DOM, et v-show permute la visibilité de l'élément HTML grâce au CSS (toggle, en anglais). En voici un exemple courant :
<div id="app">
<button @click="showModal = !showModal">Display Modal</button>
<div v-show="showModal" class="modal">...</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
showModal: false
}
})
</script>
Les méthodes vous permettent de définir des fonctions auxquelles votre application Vue aura accès. Elles sont définies comme la propriété data.
const app = new Vue({
el: '#app',
data: {
name: ''
},
computed: {
label() {
return ': ' + this.name
}
},
methods: {
alertName(nom) {
alert('Votre nom ' + nom)
},
changeName() {
// Change la propriété data
this.name = 'edmon'
// Appelle une méthode différente et passe une propriété calculée
this.alertName(this.label)
}
}
})
Lorsque l'on travaille avec des formulaires, on préfère mettre à jour le data store correspondant. Cela permet de lancer une validation, des calculs, etc. Même s'il est possible de réaliser cela champ par champ avec v-on et v-bind, Vue fournit un moyen standard pour accomplir cette tâche avec "v-model". Cela vous permet de définir la propriété data correspondant à l'élément du formulaire. Et de mettre à jour le datastore au fur et a mesure que l'utilisateur écrit.
1.3. Environnement de développement
L'installation se fait en mettant cette ligne dans votre terminal (PowerShell).
npm install -g @vue/cli vue create my-first-vue-cli-app
Vous devriez être invité à choisir un preset ("préréglage") : il correspond aux options préconfigurées installées automatiquement avec chaque application. Pour l'instant elle ne dispose que d'un preset par défaut (Babel, ESLint), ainsi que d'une option, permettant de sélectionner les fonctionnalités manuellement. Pour parcourir et sélectionner les configurations de Vue CLI, utilisez les touches directionnelle et la barre d'espace.
Pour activer le « mode historique » pour le routeur. Tapez n et appuyez sur la touche Retour. Pour notre préprocesseur CSS, nous choisirons "Sass/SCSS (with node-sass)" Pour notre linter, nous choisirons "ESLint with error prevention only" Pour la configuration de lint, choisissez "Lint on save" Pour l'emplacement souhaité de la configuration, "In dedicated config files" Jest pour les tests unitaires et Cypress pour les tests end-to-end (e2e)
Vue CLI dispose également d'une interface utilisateur lancée en local. "vue ui"
Ouvrir le nouveau projet, my-first-vue-cli-app, avec VSCode, commande "code ." Voici l’arborescence que la commande vue create va générée :
. |-- node_modules On y trouve le point d’entrée de l’application |-- public (public/index.html), un composant (src/main.js), | |-- favicon.ico qui crée une nouvelle instance de vue | |-- index.html l’ensemble des fichiers sources (JS, CSS, etc.) | |-- manifest.json devront être dans "src/" , sans quoi le Webpack |-- src utilisé en interne ne les verra pas. | |-- Assets | |-- Components | |-- App.vue App.vue : composants monofichiers | |-- main.js |-- .gitignore package.json contient toutes les dépendences
npm run serve vat lancer un serveur web local qui va afficher notre application, et la recharger à chaque modification du code. Je recommande de consulter Vue DevTools, la boite a outils de Vue sur https://github.com/vuejs/vue-devtools .
1.4. Les composants monofichiers et props
Les composants monofichiers permettent de créer des éléments HTML personnalisés, qui encapsulent leur comportement d'une façon maintenable. Ils constituent l'une des meilleures caractéristiques de Vue. Ils sont composés de 3 blocs primaires : - Script : où vit votre JavaScript ; - Template : où vit votre HTML ; - Style : où vit votre CSS.
// ./components/HomeLink.vue <script>
<script> import HomeLink
export default { from './components/HomeLink.vue'
name: 'HomeLink' export default {
} name: 'App',
</script> components: { HomeLink }
}
<template> </script>
<a href="/">Accueil</a> <template>
</template> <div id="app">
<nav>
<style> <HomeLink />
a { <a href="/contact">Contact</a>
text-decoration: none; </nav>
} <p>Bienvenue sur <HomeLink /></p>
</style> </div>
</template>
1) J'ai importé le composant HomeLink en utilisant l'importation ES6.
2) J'ai enregistré le composant via la propriété components
En ne définissant la valeur que comme une seule variable, JS comprend qu'il faut
la décomposer en : "HomeLink" : Homelink
3) Enfin, j'ai remplacé toutes les références de Home par notre
nouveau composant
Props est un attribut que vous pouvez définir au niveau du composant qui sera transmis directement au template. vous pouvez transmettre des fonctions dans les props. Nous définissons deux props: url et text.
// ./components/NavLink.vue <script>
<script> import NavLink
export default { from './components/NavLink.vue'
name: 'NavLink', export default {
props: ['url', 'text'] name: 'App',
} components: {
</script> NavLink
}}
<template> </script>
<a :href="url">{{ text }}</a> <template>
</template> <div id="app">
<nav>
<NavLink url="/" text="Accueil" />
</nav>
</div>
</template>
Pour s'assurer que la prop est passée en continu pour que notre composant bénéficie des propriétés dont il a besoin, il est possible de définir les props en tant qu'objets.
<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul><li v-for="item in list" :key="item"> {{ item }} </li></ul>
</div>
</template>
<script>
export default {
props: {
list: { type: Array, default: () => [] },
title: { type: String, required: true },
count: { type: Number, default: 1 }
}}
</script>
1.5. La navigation avec le routeur Vue
Pour ajouter Vue add router, on choisit no pour hystory mode (valeur par défaut) Une fois l'installation faite, on voit dans le main.js que notre instance Vue possède une nouvelle propriété "router". C'est géré dans le index.js du dossier src/router; Vue.use(VueRouter) qui dit a Vue d'utiliser un pluggin En ouvrant App.vue vous verez 2 nouveaux composant directement reliés au Router: router-link qui se charge de la navigation dans l'application router-view qui dit à Vue Router, ou afficher le composant auquel est associé la route quand on visite une url.
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
Pour avoir une page individuelle pour chaque élément du menu, mais en utilisant une même page ItemDetail.vue pour voir le détail de l'élément. Pour cela, vous avez besoin que la route passe l'information de manière dynamique. Vue Router règle ce problème en permettant le matching de route dynamique.
const router = new VueRouter({
routes: [
// les parties dynamiques commencent par un deux-points
{ path: '/item/:name', component: ItemDetail }
]
})
La variable dynamique qui pourra être modifiée dans l'URL est marquée par ":". Cela permet au composant "ItemDetail" d'extraire les paramètres à utiliser :
1.6. Cycle de vie d’un composant
L'un des indicateurs les plus couramment utilisés pour mesurer la performance d'un site est le temps nécessaire avant que l'utilisateur puisse interagir avec le site. Il vaut mieux éviter que notre code entier ne commence à s'exécuter que lorsque le chargement de la page se termine. Le code peut s'exécuter à part, avant que vos composants ne soient affichés à l'écran. La plupart des frameworks utilisent le concept de cycle de vie des composants (components lifecycle), qui définit une série d'étapes par lesquelles un composant passe, de sa création à sa disparition. Bien sûr, Vue ne déroge pas à la règle.
Les 3 étapes majeures dans le cycle de vie d'un composant :
Create - représente la durée pendant laquelle le composant est en construction Mount - représente le moment ou le composant va être rendu sur notre page Destroy - représente le moment où le composant va être retiré de la page
Les hooks de cycle de vie (life cycle hooks), permettent d'accéder à des événements spécifiques autour de ces étapes. certaines actions ne sont pas réalisables pendant certains hooks du cycle de vie. Par exemple, modifier des attributs sur un élément HTML pendant beforeCreate serait impossible puisque l'élément n'existe même pas encore.
beforeCreates
created
beforeMount
mounted
beforeDestroy
destroyed
De la même façon que vous définiriez data ou computed, il s'agit simplement d'ajouter une autre propriété à votre objet de configuration de Vue. La seule différence réside dans le fait qu'il s'agit de fonctions plutôt que de simples chaînes de caractères :
<template>
<h1>Je suis un nouveau composant !</h1>
</template>
<script>
export default {
data: { msg: 'Bonjour !' },
beforeCreate() { console.log('Je ne suis pas encore créé') },
created() { console.log('Je suis créé !') },
beforeMount() { console.log('Je vais bientôt être monté sur le DOM!') },
mounted() { console.log('Je suis monté sur le DOM!') },
beforeDestroy() { console.log('Je suis sur le point de disparaître !') },
destroyed() { console.log('Je suis supprimé') }
}
</script>
1.7. Gérez les styles de votre application
Actuellement, lorsqu'il s'agit d'écrire du CSS, la plupart des codebases frontend utilisent un préprocesseur (comme Sass, LESS, etc. ). Ils permettent d'étendre les fonctionnalités CSS comme les opérateurs, les fonctions, les mixins, et bien d'autres choses. Ces styles sont généralement écrits au format :
Sass ? *.sass ou *.scss LESS ? *.less
Après avoir configuré votre application Vue CLI avec le bon préprocesseur (comme nous l'avions fait dans la partie précédente), il suffit de passer la prop lang au bloc de style. Assurez-vous de bien mettre le préprocesseur souhaité, ici scss.
<template>...</template>
<script>...</script>
<style lang="scss">
.button {
&.is-small { ... }
&.is-large { ... }
}
</style>
La technique des styles délimités (scoped styles) est devenue populaire récemment. Elle permet de fournir un attribut scoped au bloc de style, afin que le CSS ne s'applique qu'aux éléments du composant courant. Pour ce faire, un attribut data personnalisé est ajouté à la classe CSS et à l'élément HTML, afin que les styles restent « scopés », donc délimités. Grâce à cela, les effets de cascade sont minimisés en limitant leur périmètre d'action.
<style scoped>
.example { color: red; }
</style>
<template>
<div class="exemple">hello !</div>
</template>
Les modules CSS sont appréciés pour les possibilités de modularité et de composition de CSS offertes, comme illustré ci-dessous :
Comme pour les styles délimités, vous n'avez qu'à ajouter un attribut module à la balise "style" et il ajoutera vos styles avec un hash aléatoire par défaut. Cependant, l'utilisation des modules CSS nécessite d'ajouter la classe CSS avec le style $ dans une classe v-bind:class.
<template>
<h1 :class="$style.red">Mon titre en rouge</h1>
</template>
<style module>
.red { color: red; }
</style>
En gardant vos styles au bas niveau, vous vous assurez que les futurs développeurs connaîtront le contexte, dans lequel le style a été créé. L'avantage, c'est que cela permet d'améliorer la maintenabilité à long terme de votre application, tout en tirant parti du découpage du code fourni par Vue. Avec le CSS classique il est difficile de refactoriser sans connaître les effets de bord possibles. En revanche, si nous gérions nos styles avec Vue... N'importe quel développeur peut comprendre avec facilité la façon dont le code est lié, les effets de bord ne constituent plus vraiment un sujet de préoccupation.
Il peut être tentant de tester et de s'en tenir aux méthodes traditionnelles de CSS, en mettant tous les styles dans un fichier CSS partagé. Mais ce n'est pas forcément une bonne idée. ?? En effet, ce fichier ne peut pas être parsé de manière intelligente lorsque l'utilisateur visite une page. Donc, à moins que vous ne voyiez un grand nombre de réutilisations de styles à travers différents composants, ma recommandation générale est de ne pas les extraire dans un fichier CSS générique, mais de s'en tenir au style composant par composant.
1.8. Evénements vers des composants parents
Pour définir des événements personnalisés faisant l'objet d'une émission, c'est très facile à réaliser avec la fonctionnalité intégrée $emit de Vue. Avec comme paramètres: le nom de l'événement (qui doit être défini en kebab-case), et un payload optionnel utilisé pour passer des données à l'écouteur de l'événement.
// src/ChildComponent.vue
<template>
<button @click="emitCustomEvent">Emit Event</button>
</template>
<script>
export default {
methods: {
emitCustomEvent() {
this.$emit('custom-event-name', { message: 'Mon message personnalisé' })
}
}
}
</script>
Une fois qu'un événement est émis, le composant parent qui utilise le composant enfant est capable d'écouter l'événement via la directive v-on. Pour cela, vous devez :
1) Ajouter un écouteur d'événement (listener) v-on avec le nom de l'événement personnalisé sur le composant émettant l'événement. 2) Lui assigner une méthode recevant le payload comme 1er argument s'il existe.
// src/ParentComponent.vue
<template>
<div>
<p>{{ message }}</p>
<!-- Écoute les événements personnalisés et y assigne une méthode -->
<ChildComponent @custom-event-name="setMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
components: { ChildComponent },
data () {
return {
message: 'Hello'
}
},
methods: {
// Définit la méthode utilisée par le payload pour maj la propriété data
setMessage(payload) {
this.message = payload.message
}
}
}
</script>
Attention cependant : cette technique ne fonctionne que lorsqu'on communique directement depuis un composant enfant vers un composant parent. En d'autres termes, ne vous attendez pas à ce que votre événement soit émis dans l'ensemble de l'application.
1.9. Composants flexibles avec les slots
L'élément
<template>
<Card>
<template v-slot:title>
<h3>Donner des noms aux slots est utile</h3>
</template>
<template v-slot:text>
<p>On peut ajouter ce qu'on veut ici en donnant le nom du slot !</p>
</template>
<template v-slot:action>
<a href="#">En savoir plus</a>
</template>
</Card>
</template>
<template>
<div class="card">
<slot name="title">Titre de la carte</slot>
<slot name="text">Texte de la carte</slot>
<slot name="action">Action</slot>
</div>
</template>
1.10. le principe de state management
Lorsque l'on travaille avec des applications monopages (SPA), le concept de state management (gestion d'état) est important pour s'assurer que l'application utilise les bonnes données à tout moment.
Nous pouvons définir le state (ou état, en français) comme un instantané du data store à un moment donné. De multiples states sont utilisés à travers une application, ce qui explique la complexité inhérente à la gestion de ces éléments. Après tout, chaque composant utilisé contient sa propre propriété data, ce qui signifie qu'il gère son propre state.
Dans les discussions autour de la gestion du state, et parmi les termes couramment cités, apparaît l'idée d'une « source unique de vérité » (qui est aussi parfois abrégée en « SSoT » pour Single Source of Truth). Le concept fondamental derrière une source unique de vérité est d'éviter la duplication inutile de données dans l'application.
Le fait de stocker plusieurs copies des mêmes données dans une application est souvent la principale cause de bugs dans un système, car cela permet l'existence de différents jeux des « mêmes » données en même temps, ce qui est problématique, car :
1) du point de vue du code, cela s'avère bien plus difficile à gérer, car il existe une dépendance qu'il est facile d'oublier à mesure que le système se complexifie ;
2) des bugs apparaissent en plus grand nombre à la suite de cette fragmentation.
Dans notre vision du système de gestionnaire de state idéal, ce dernier devrait être capable de :
1) créer un espace de stockage de données unique qui servira de source unique de vérité pour toutes les données partagées ;
2) permettre à n'importe quel composant de récupérer des données directement ;
3) permettre à n'importe quel composant de modifier le data store unique directement.
Par chance, l'écosystème Vue.js dispose d'un système de state management capable de faire cela à notre place : Vuex. C'est un gestionnaire d'état et une bibliothèque pour les applications Vue. js. Le but unique de Vuex est de nous aider à créer un store centralisé qui nous permettra d'avoir cette "source unique de vérité" pour récupérer nos datas. Pour l'installer: "vue add vuex"
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
De la même manière que nous configurerions une propriété data pour mettre en place un nouveau data store, vous pouvez considérer cette propriété store comme le data store global que nous allons configurer avec Vuex.
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { month: 8, day: 12 },
mutations: {},
actions: {}
})
l'initialisation d'un nouveau store Vuex se fait par un objet contenant 3 clés : (1) state, (2) mutations et (3) actions.
Dans Vuex, notre data store est défini en tant que state dans l'objet de configuration store/index.js. Vous pouvez comparer cela à la propriété data que nous utilisons depuis le début.
Il peut paraître tentant de tout mettre dans le store global ; mais ce n'est pas ce qu'il faut faire, car une partie de ce qui rend l'architecture par composants aussi puissante est sa capacité à découper un certain nombre de sujets. L'idée est de remonter les données à un niveau global uniquement lorsque vous constaterez qu'il est nécessaire d'accéder aux données à partir de plusieurs composants.
Vuex est injecté à un niveau global à travers tous nos composants, cela signifie que nous avons accès à une propriété $ store qui nous permettra d'accéder directement à Vuex dans sa totalité. Pour récupérer les données dans le store:
{{ $store.state.day }}-{{ $store.state.month }}.
Vuex nous fournit un moyen d'associer le state à des variables que nous pouvons appeler dans nos composants, évitant ainsi de devoir appeler $ store à chaque fois : mapState. Cette méthode nous permet de demander à Vuex les propriétés de state de notre choix, et il les ajoutera à nos propriétés calculées.
<template>
<p>La date stockée dans Vuex est le
{{ day }}-{{ month }}.</p>
</template>
<script>
import { mapState } from 'vuex' En cas de conflit sur les noms:
export default { ...mapState({
computed: { customYear: 'year',
...mapState(['year', 'month', 'day']) uniqueMonth: 'month',
} day: 'day'
} })
</script>
Si cette date était référencée à plusieurs endroits, cela serait très difficile à maintenir. On peut donc aussi définir des prop calculées dans un store Vuex : les « getters », ou accesseurs. Ils peuvent être vus comme l'équivalent de la propriété calculée (computed) dans Vue.
export default new Vuex.Store({
state: { month: 8, day: 12 },
getters: {
formattedDate: state => {
return `${state.day}-${state.month}` }
}}
Chaque accesseur est une fonction qui reçoit le state comme argument et retourne une valeur. Ensuite, nous pouvons simplifier notre code encore davantage dans le composant, grâce à mapGetters, qui fonctionne comme mapState.
<template>
<p>La date stockée dans Vuex est le {{ formattedDate }}.</p>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['formattedDate'])
}}
</script>
La clé mutation. Comme son nom l'indique, contiendra un objet de toutes les propriétés responsables de modifications du state. Les mutations sont synchrones et ont comme mission principale de modifier le state.
export default new Vuex.Store({
state: { month: 8, day: 12 },
mutations: {
INCREASE_MONTH(state, payload) {
state.day += Number(payload)
}
},
actions: { } this.$store.commit('INCREASE_MONTH', 2);
Une action se définit en assignant une fonction qui prend context en argument. Ce context permet d'accéder au state ou a commit.
actions: {
incrementMonth(context) {
context.commit("INCREASE_MONTH")
}
}
Ainsi au lieu d'acter directement la mutation (avec commit), depuis une méthode d'un composant (ce qui n'est pas une bonne pratique), avec this.$store.commit(, on vat maintenant utiliser la méthode dispatch, et on vat lui donner le nom de l'action qu'on souhaite déclencher: this.$store.dispatch("incrementMonth"). On peut aussi utiliser ...mapActions(["incrementMonth"])
L'interret c'est que dans l'action, on peut selon le cas, acter la mutation qui la plus adaptée qui changera toutes les valeurs necessaire du state, au lieu de les lancer les une après les autres et raffraichier tout à chaque fois.
Nous pourrions rendre la mutation générique à quelque chose comme CHANGE_COUNT, mais en regardant l'historique, cela nous fournirait moins de détails, ce qui rend les choses plus difficiles à débugger. Par conséquent, il est préférable que les mutations gardent un seul usage. Laissez la logique aux actions.
31 millisecondes