VUE3
OUALI MOHAMED
INTRODUCTION
https://vuejs.org/
https://vuejsexamples.com/
https://www.udemy.com
2022/2023
INTRODUCTION
Vue est un framework JavaScript
Facilite la création d'applications front-end
Facilite la création d'applications interactives et réactives.
FRAMEWORK
Bibliothèque tierce ( Third part library)
Propose des fonctionnalités utilitaires
Propose des règles sur la façon de créer votre site Web JavaScript
REACTIVE
Les applications réagissent aux entrées de l'utilisateur
Met à jour l'écran de manière dynamique
Les actions se produisent instantanément comme sur une application mobile
COMMENT UTILISER VUE
Widget approach
Vue contrôle des parties de la page html ou 1 page.
Les autres parties sont générées à partir du serveur.
Single Page Application Approach
Vue contrôle l'intégralité du front-end d'un site Web
Le serveur n'envoie qu'une page HTML, puis Vue contrôle l'interface utilisateur.
POURQUOI DEVRIEZ-VOUS UTILISER VUE ?
Vue est l'un des frameworks les plus faciles à apprendre, ce qui est utile pour les
débutants.
Vue est plus léger et convivial pour quelqu'un qui n'a pas beaucoup d'expérience en
développement.
Easy to get started
Il suffit d’inclure une balise de script pointant vers la dernière version de Vue.
POURQUOI DEVRIEZ-VOUS UTILISER VUE ?
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>
</head>
POURQUOI DEVRIEZ-VOUS UTILISER VUE ?
Vue possède un écosystème solide
vue-router for client-side routing
vuex for managing state
vue-test-utils for unit testing
vue-devtools for debugging
Vue Command Line Interface
POURQUOI DEVRIEZ-VOUS UTILISER VUE ?
Vue possède un système réactif (Reactivity System)
L'application Vue crée un composant racine (root component) entièrement réactif
Permet de gérer les événements
Peut de détecter les changements de dépendance séparément de l'arborescence des composants de
l'application.
https://vuejs.org/
CREATING THE VUE APP
01 - CREATING THE VUE APP
Images + CSS
Dossier JavaScript
Fichier HTML
13
index.html
main.js
Comment utiliser Vue3 pour afficher la variable "product"
dans la partie HTML <h1>
14
CREATING THE VUE APP
1. On doit changer le code JS
Va créer notre application Vue
Objet
Propriété : data
qui retourne un objet
const mountedApp = app.mount("#app");
16
<h1>{{ product }}</h1>
JAVASCRIPT EXPRESSION
Permet d’exécuter du code JavaScript dans du code HTML
<h1>{{ product }}</h1>
<p>{{ firstName + " " + lastName }}</p>
<p>{{ quantityInStock == 0 ? true : false }}</p>
<p>{{ infos.show() }}</p>
C’est ce qu’on appelle l’interpolation
REACTIVITY SYSTEM
La modification du contenu html est automatique
A chaque fois que la variable "product" est modifiée le contenu dans la page HTML
change instantanément.
Vue JS est un framework réactif qui va prendre en charge la détection de tout
changement des données de votre Vue app.
TAF1
Ajouter une description dans la partie "data" de votre Vue app.
Afficher la description en utilisant un élément "p"
