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"