[ Tuto ] Vue JS 3 : les bases ! ( tutorial pour débutant en français )
Вставка
- Опубліковано 20 вер 2024
- ⚠️ Vue JS 3 vient de sortir ! 👉 Je vous propose une mise à jour de mon tuto d'initiation à VueJS, en français, et pour débutant !
Dans ce cours vidéo, vous pourrez découvrir les bases du framework javascript VueJS dans sa nouvelle version ! J'espère que ce tutoriel vous permettra de bien vous familiariser avec Vue !
IMPORTANT : Prenez le temps de mettre en pause le tutoriel, de refaire les manipulations sur votre ordinateur, de manipuler Vue JS, de revenir en arrière sur le tutorial,... afin de bien prendre en main Vue JS 3 !
==============
Installer VueJS : v3.vuejs.org/g...
CDN : unpkg.com/vue@...
===============
______
Mon site web : bertrandbourgy...
Mon Facebook : / bourgybertrand
____
Musique par Cynthia Delfosse
#vueJS #debutant #tuto
![[TUTO] Vue JS : les bases en 35 minutes !](http://i.ytimg.com/vi/D3oivlcoEvw/mqdefault.jpg)
![[TUTO] Vue JS : les bases en 35 minutes !](/img/tr.png)
Salut tout le monde ! Voici la mise à jour de mon guide d'initiation à Vue JS, basé sur la version 3 ! J'espère que ça vous aidera :-)
SOMMAIRE
00:00 Introduction
01:03 Installation / Setup
04:05 Instance de Vue
05:25 Les données
06:15 Rendu déclaratif
08:15 Réactivité
09:05 v-bind
10:05 Directives
14:15 Méthodes
16:05 Les événements
21:05 Les composants
36: 05 Conclusion / Outro
Pro tip / 39:50 LIKE la vidéo, et merci Bertrand.
Je commente jamais les vidéos, mais vraiment super tuto. Je me lance dans le dev et j'avoue que je savais pas trop quoi choisir comme framework front. Tu m'as fait adorer Vue en 40 minutes, ca c'est de la pédagogie ;) J'espère que tu ne t'arrêteras pas de faire des vidéos !
Merci à toi 🙂Oui de nouvelles vidéos sortent régulièrement, merci pour les encouragements ! :)
Hello tout le monde ! J'espère que ce tuto Vue JS 3 vous aide bien ! Je viens de sortir une initiation aux bases de Git : 👉 ua-cam.com/video/225wkShIcc8/v-deo.html 👍
Bonsoir Merci beaucoup pour ce cours et je veux savoir s il y a la suite
Je commente aussi rarement. Super tuto qui éclaire bien des aspects. Merci et bravo pour cette approche très pédagogique (ce n'est pas donné à tous le monde de savoir être aussi clair !). En tous cas, cela m'a bien débloqué.
Merci beaucoup Vincent ! content d'avoir pu te débloquer sur les bases de VueJS !
Quoi dire de plus, tuto effectivement excellent
je découvre la programmation d'extensions sur sketchup, et vue.js est un outils très pratique pour les boites de dialogues
Merci du fond du coeur trandBer, t'es un goat, CA c'est du didacticiel propre, concis et qui va droit au but, je m'abonne !
Merci beaucoup à toi :)
C'est la pédagogie qui m'impressionne le plus .. vraiment good job ..vous avez assuré
Merci beaucoup ! :)
Merci beaucoup pour cette vidéo , tu est très pédagogue ! Ce fût un plaisir de regarder ce petit tutorial !
Merci à toi 😊
Développeur full back end de profession, j'ai un peu de mal à me lancer dans le front mais tes explications sont vraiment claires et ta vidéo est très efficace ! Je progresse, merci !! ;)
Hello :-) Oui ce sont vraiment deux logiques différentes, le front est un peu plus "tricky" parfois :-) Content de t'avoir aidé avec Vue :-)
Très bonne initiation, on espère avoir une suite ! Notamment sur la composition API 😉
Merci beaucoup :-) De la suite arrive bientôt !
Merci Bertrand!!!! Super utile et efficace comme vidéo. J'ai laissé un like au passage
Merci beaucoup :D
Bonne immerssion dans vue.js. C'est ce qu'il me fallait. Merci pour la vidéo
Content d'avoir pu t'aider à commencer Vue JS 3 :=)
Bertrand Merci beaucoup pour ce tuto!
Avec plaisir :)
Merci pour la vidéo Bertrand vous m'avez mis sur les rail !
Parfait c'est justement l'objectif de ce tuto : débuter avec Vue JS 3 :-) merci pour le retour !
merci pour la video, c'est vraiment interssante
Merci à toi 😊
t'explique trés bien. Regards depuis Madrid
Merci beaucoup ! Content d'être vu depuis l'Espagne :-)
J'adore l'accent avec les "inpiut" ou "le virgule" lol
Sinon super tutoriel, on monte grave en compétences!!!
Merci 😅
Merci pour cette mise à jour de ce tuto débutant Vue JS 3 ! 🙂
Avec plaisir :-)
Merci beaucoup pour la vidéo. Très belle initiation dans un langage clair !
Merci beaucoup John-Mike ! Content de pouvoir vous aider avec Vue JS 3 👍
N'hésitez pas à découvrir cette nouvelle vidéo sur les indispensables de l'écosystème de Vue 3 : ua-cam.com/video/L5_KLnHjt1M/v-deo.html :-)
Merci pour cette video de qualité ! super boulot !
Avec plaisir 🙂 Merci pour ton retour !
pas evident sur la fin avec les composants pour moi qui début sur vue mais ça reste clair, hâte d'en voir plus
Content que la vidéo te plaise :-) hésite pas à regarder sur la chaîne, j'en ai plusieurs sur Vue JS ;)
Merci beaucoup, super vidéo !
Avec plaisir 🙂
Merci Bertrand!
Avec plaisir :)
Comme dab, nikel !! Un petit tuto vue3 avec recaptcha et traitement en php serait le bienvenue !!!! En tout cas, Merci !!:)
Merci beaucoup jc !! :-) C'est une bonne idée, je suis en train de réfléchir à une vidéo simple sur le dev d'un petit front / back, ça pourrait être une bonne suite. Je note dans la liste des sujets ! :-)
@@TechAvecBertrand peut être un espace membre ou une inscription a une newsletter en vue php mysql ????
Oui ça serait une très bonne idée, je note tout ça :-)
TOP ! Merci !
Avec plaisir 🙂 content de pouvoir t'aider à débuter sur Vue JS 3 :)
Au top ! Merci à toi :)
Avec plaisir 🙂 bonne découverte de Vue JS 3 !
Merci encore pour cette belle vidéo pourrait tu stp nous faire une vidéo avec un projet ,pour les actu docs de vue js version 2024 je te remercie d avance cdt
Je note ça dans les idées de vidéos futures ;)
La documentation est superbement bien faite mais c'est quand même cool de voire comment d'autres personnes abordent le framework (y)
Merci beaucoup Fabian :)
Merci beaucoup
Avec plaisir ;)
Super vidéo 👍
Merci beaucoup 👍
Merci pour la vidéo ! Est-ce que tu envisage de proposer une formation complète et plus poussée sur vuejs3 ?
Hello :) Merci beaucoup ! Pour l'instant ce n'est pas à l'ordre du jour, mais pourquoi pas à l'avenir :)
Super contenu merci.
Merci à toi 😊
Top merci crrtains l'installe aussi avec node js c quoi la difference avec votre methode svp.
Nb : debutant en js
Cette méthode permet de mettre VueJS facilement un peu partout, bien pour débuter :). Avec Node c'est plus adapté pour des projets plus grands
Super vidéo, comment dab
Merci beaucoup pour ta fidélité Harouna :-)
Merci beaucoup pour ce super tuto, j'ai juste un soucis avec le deuxième component "ajout", les erreurs disparaissent et tout semble fonctionner mais les ajouts à l'intérieur du tableau todos ne se font pas. J'ai peut-être raté quelque chose. Encore un grand merci ! J'ai au moins compris les bases et surtout le rôle des différents dossiers et fichiers que je retrouve dans mon projet Vue-CLI avec Vue router et Vue X et c'est ce que je recherchais avant tout ! Bonne continuation :)
Oui peut-être une petite faute de frappe, tout simplement, sinon j'ai également une vidéo avec VueX, Vue-Cli et Vue Router :-)
@@TechAvecBertrand Oui j'ai également suivi la video sur VueX, Vue-Cli et Vue Router qui m'a aussi beaucoup appris ! Merci beaucoup !
Bien jusqu'a la 30ème minutes, après ça va vite, les explications semblent difficile a transmettre. Cela ne veut pas dire que la vidéo est mauvaise, seulement qu'il est préférable de prendre un peu plus de temps quant ça se complexifie pour être sur que tous le monde arrive a suivre, sans devoir relancer 4 fois le morceau d'avant, tout en commençant à chercher ce qui bug.
Super vidéo, pour la suite n'hésite pas a reprendre certaine notion, pédagogiquement c'est efficace.
Merci pour le retour, ça aide toujours à faire mieux :)
@@TechAvecBertrand J'aurais jamais pensé que tu répondrais :o
En tous cas continu, c'est super.
Moi je trouve c'est compliqué, j'aime pas les jeux de piste et ici j'ai vrmt l'impression que c'est ce truc vient de là qui lui même vient de là etc... Faudra m'habituer j'imagine mais j'aime pas bcp jusqu'ici.
Ca va venir avec l'habitude :)
Bonjour Ludovic et merci pour cette initiation, je débute vue.js, je comprends ta vidéo, elle est bien expliquer. Quand j'arrive au moment de mettre le composant note, cela ne fonctionne pas. J'ai essayer aussi en localhost, ca ne marche pas non plus?
aurais tu un conseil, merci
Pas d'erreur de frappe ? Un message d'erreur apparaît ? Sinon moi c'est Bertrand ;) haha !
Bonjour Bertrand, super vidéo. une petite question, comment integre des sessions dans Vuejs3
Hello :) Par session, tu veux dire l'authentification ? Souvent, on gère ça plutôt côté back-end, donc ça dépend un peu de la techno utilisée. Par exemple, via Firebase : blog.logrocket.com/vue-firebase-authentication/
J'ai beau comprendre toute la partie technique, je ne vois pas a quoi cela servirais dans du Web. Une personne pourrait-elle m'expliquer en faisant court ?
Tjr au top 👌
Merci beaucoup Dodo :-) Content que ce tuto Vue JS 3 te plaise :-)
Merci beaucoup comme d'hab excellent cours !
Par contre la partie Composants quand je l'ai regardé dans ma tête y'avait une bande de singes qui se chamaillaient et sautaient de branche en branche.... Je pense que j'ai besoin de regarder plusieurs fois cette partie car je sais qu'une fois acquise j'aurai capté une grosse partie.
Vraiment content de pouvoir t'aider avec Vue JS :)
MErci pour ce super tuto. Serait-il possible d'avoir un lien vers le code source pour comparer/debugger mon code ? Merci
Outch je ne pense plus avoir le code source sur moi :/ essaye de taper ton code dans chatGPT pour le debug ça devrait marcher ^^
j'ai pas compris où tu commences à travailler. Dans quel dossier ou fichier ? je suis vraiment débutant donc j'étais perdu dès le début. Merci pour tes vidéos
J'ai créé un simple fichier index.html, où tu veux sur ton ordi :)
Sincèrement super tutorial. Merci infiniment.
Merci beaucoup Mohamed ! Content de pouvoir vous aider sur Vue JS 3 :-)
Salut mon super coach, pourquoi n'est pas nous faire un projet complet avec Vue Js ?!, ce sera vraiment super important !
Très bonne idée ! Certainement dans une prochaine vidéo :)
excellent
Merci beaucoup :) content de pouvoir t'aider à apprendre Vue JS !
Salut Bertrand, merci pour ce travail.. Aurais-tu le temps de nous initier à l'intégration de Leaflet avec Vue3 car actuellement pas grand chose sur le sujet depuis le passage de Vue2 à Vue3 notamment avec l'API Js et getCurrentLocation.. En tous cas toujours top de suivre tes explications Bertrand, Merci ..
Hello et merci pour ton retour :) Pour l'instant ce n'est pas au programme mais bon, je le note toujours on ne sait jamais :)
Salut monsieur c'est maxime , merci pour la vidéo. j' ai un petit souci , après avoir écrire ,dans inceptif il dit que le vue n'est pas définit veillez m'aider
Problème à l'import du script ou alors de casse ( Vue au lieu de vue par exemple )
Salut camarade tu pourrais nous faire un cour sur vue cli
C’est en projet :-)
@@TechAvecBertrand merci 👍
👍 :-)
super !! merci encore Bertrand ... . j'essaie de créer un plugin Wordpress avec tes tutos mais je n'arrive pas à utiliser les Directives vue sous php..., peut-on utiliser diretement des pages.vue? j'ai j'ai déja développé sous vue3 et ça fonctionne parfaitement.
Bonjour Franck, pas de soucis :-) Comment est développé le projet de base ? La logique, c"est que PHP va générer tout le HTML / CSS / JS, y compris ton app vue et ensuite s'exécuter côté navigateur. Donc en théorie tout devrait marcher. Pour une architecture plus élaborée, tu peux te baser là dessus : github.com/matgargano/vue-wordpress-plugin
j'espère avoir pu aider 😁
@@TechAvecBertrand oui merci Bertrand pour ton lien il est top .... tout fonctionne du premier coup.
Merci beaucoup c'est top, mais parfois tu vas très vite ^^
C'est vrai que je suis parfois un peu speed ^^
Quel est ton logiciel ou tu code ?
Hello, c'est Visual Studio code, code.visualstudio.com
C'est vraiment dommage de présenter Vue 3 sans utiliser composition API.
Bonne introduction à Vue.JS tout de même
Hello, justement je voulais éviter pour garder un tuto à jour ( avec Vue 3 donc ) mais toujours simple et adapté aux débutants (pour la même raison, je l'intègre via un CDN et pas avec npm. Maintenant Composition API est un sujet intéressant qui mériterait une vidéo à lui tout seul. Merci pour ton retour :-)
@@TechAvecBertrand Bonjour Bertrand, merci pour ta vidéo. Je confirme le "besoin" de voir naître un jour un tuto avec Composition API !
J"essayerai de bosser sur un tuto dessus à l'occasion :-)
Je crois qu'il y a un souci avec le titre, il s'agit plutôt d'un tuto vue js 2, aucune mention ni utilisation n'est faite de l'API composition (qui est quand même le grand changement qu'apporte vue js 3), le code de la vidéo se fait sur la base de l'API Option qui est la structure de vue js 2. Pour les viewers, référez vous à la doc pour comprendre la différence. Moi qui est novice, cette vidéo m'a plus embrouillé qu'autre chose avant que je comprenne cette différence essentielle.
Bonjour Sébastien et merci pour ton avis. Le code proposé ici ne fonctionnerait pas avec Vue 2. Composition API est une grosse nouveauté de Vue 3, mais n'est en rien une obligation pour autant. Mon approche est de faire découvrir une implémentation minimale pour bien comprendre.
@@TechAvecBertrand Je salue l'effort des personnes qui font des tutos, c'est du travail et je suis reconnaissant pour ça. Mais je pense vraiment que ton angle d'approche porte à confusion (pas seulement la tienne, la plupart des vidéos vue 3 en fr). Tu fais du code avec la structure de l'api option (qui est la base de vue 2) mais qui ne fonctionnerait pas avec vue 2. Tout ça avec une installation via le CDN, qui nous fait passer à côté de la structure de fichier de base.
Si un novice veut créer un projet vue 3 via npm il se retrouvera avec une structure de fichier par défaut qu'il ne comprendra pas, avec la balise , il essaiera de reproduire ta structure (data, methods...) et ça ne marchera pas à cause du 'setup' justement... C'est ce qui m'est arrivé. Et je pense que je ne suis pas le seul.
A minima faire une petite explication de l'api composition avec le lien vers la doc, en expliquant que tu ne l'utiliseras pas, il s'agit quand même d'une vidéo sur vue 3.
Ce n'est que mon avis et merci pour ton effort en tout cas, juste dommage que cet effort ne clarifie pas ces points d'ombre.
Amicalement.