Vue.js | Introduction

Présentation

Dans ce cours sur le framework front-end Javascript Vue.js, vous découvrirez les notions de base vous permettant de créer votre première Single Page Application. Vous y verrez comment configurer un projet, y récupérer des données depuis une API et les afficher de façon dynamique et stable.

Au-delà de l’appréhension du framework, ce cours vise à enseigner les principes fondamentaux régissant le développement d’application front-end moderne, et aujourd’hui partagés par la majorité des outils du marché comme React.js et Svelte. Vous y verrez les principes de séparation des préoccupations et de flux unidirectionnel des données. Vous apprendrez, entre autre, les concepts de hook et de cycle de vie d’une application.

Ce cours se focalise sur la version 3 du framework Vue.js. Il n’abordera pas des questions de déploiement d’application (DevOps) ou de développement web back-end.

REMARQUE

👉 Ce cours est dédié aux personnes ayant un niveau débutant ou intermédiaire dans le développement d’application frontend avec un framework moderne comme Vue.js. Il n’explorera pas des concepts particulièrement avancés, destinés à un public expérimenté. Si des notions plus avancées sur le framework vous intéressent, vous pouvez consulter la documentation Vue.js et ses nombreux exemples et tutoriels.

Prérequis

Ce cours présente quelques prérequis pour l’aborder sans difficulté :

• Savoir appréhender un fichier HTML : être en mesure de comprendre la structure d’un document HTML, en particulier les concepts de balise et d’attribut. Une connaissance de base des balises les plus communes (div, p, a, img, etc.) est requise.
• Savoir appréhender un fichier CSS : être en mesure de déclarer des règles de style impactant un document HTML. Comprendre les concepts de sélecteur, de déclaration et de propriété. Savoir effectuer une sélection par type, par classe et par identifiant. Il est aussi recommandé de savoir définir des règles permettant la conception d’un site en responsive.
• Avoir des bases algorithmiques appliquées au langage Javascript : être capable d’énoncer une variable, une condition, une itération, un objet et une fonction. Être familier avec les concept d’évènement Javascript et de fonction callback. Une connaissance basique des syntaxes ES6+, du concept de DOM et de sa manipulation, ainsi que du concept d’asynchrone est recommandé.

Si vous ressentez quelques lacunes concernant ces prérequis, vous pouvez explorer les notions annexes qui accompagnent ce cours. Ces annexes abordent des concepts et technologies liés à ce cours comme l’utilisation de Node.js, et des bundlers JS. Elles détaillent les concepts de DOM et d’asynchrone en Javascript. Elles contiennent enfin des fiches contextuelles pour comprendre la place des frameworks JS d’un point de vue historique et des métiers du web.

INFO

📖 Vous pouvez également consulter la documentation MDN au sujet du HTML, CSS et Javascript, ou encore les cours du site Openclassrooms sur le HTML & CSS et le Javascript. La chaine Youtube Grafikart.fr propose également une série de vidéo sur la Javascript disponible ici.