[ Tuto ] Vue JS 3 : les bases ! ( tutorial pour débutant en français )

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 119

  • @TechAvecBertrand
    @TechAvecBertrand  4 года назад +10

    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 :-)

  • @shinrakeyp
    @shinrakeyp 3 года назад +21

    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.

  • @Tibo437
    @Tibo437 3 года назад +12

    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 !

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      Merci à toi 🙂Oui de nouvelles vidéos sortent régulièrement, merci pour les encouragements ! :)

  • @vincentparay4440
    @vincentparay4440 2 года назад +4

    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é.

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Merci beaucoup Vincent ! content d'avoir pu te débloquer sur les bases de VueJS !

    • @thomasboulenger6961
      @thomasboulenger6961 3 месяца назад

      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

  • @the-code-provider
    @the-code-provider 9 месяцев назад +1

    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 !

  • @youssoundione515
    @youssoundione515 Год назад +1

    C'est la pédagogie qui m'impressionne le plus .. vraiment good job ..vous avez assuré

  • @JT-yp4ft
    @JT-yp4ft 3 года назад +3

    Merci beaucoup pour cette vidéo , tu est très pédagogue ! Ce fût un plaisir de regarder ce petit tutorial !

  • @reeker578
    @reeker578 3 года назад +2

    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 !! ;)

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад +1

      Hello :-) Oui ce sont vraiment deux logiques différentes, le front est un peu plus "tricky" parfois :-) Content de t'avoir aidé avec Vue :-)

  • @skygrace8459
    @skygrace8459 2 года назад +1

    Bertrand Merci beaucoup pour ce tuto!

  • @MyJuju276
    @MyJuju276 3 года назад +5

    Très bonne initiation, on espère avoir une suite ! Notamment sur la composition API 😉

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад +1

      Merci beaucoup :-) De la suite arrive bientôt !

  • @W0vo
    @W0vo Год назад +1

    Merci Bertrand!!!! Super utile et efficace comme vidéo. J'ai laissé un like au passage

  • @adrientheus6167
    @adrientheus6167 2 года назад +1

    Merci pour la vidéo Bertrand vous m'avez mis sur les rail !

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Parfait c'est justement l'objectif de ce tuto : débuter avec Vue JS 3 :-) merci pour le retour !

  • @TechAvecBertrand
    @TechAvecBertrand  3 года назад

    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 : 👉 ruclips.net/video/225wkShIcc8/видео.html 👍

    • @celestenkolo1012
      @celestenkolo1012 3 года назад

      Bonsoir Merci beaucoup pour ce cours et je veux savoir s il y a la suite

  • @zemiorka
    @zemiorka 3 года назад +1

    Merci Bertrand!

  • @VieuxFrère-x3b
    @VieuxFrère-x3b 10 месяцев назад +1

    merci pour la video, c'est vraiment interssante

  • @darkolite
    @darkolite 3 года назад +1

    Bonne immerssion dans vue.js. C'est ce qu'il me fallait. Merci pour la vidéo

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      Content d'avoir pu t'aider à commencer Vue JS 3 :=)

  • @franmesonero9592
    @franmesonero9592 3 года назад +1

    t'explique trés bien. Regards depuis Madrid

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      Merci beaucoup ! Content d'être vu depuis l'Espagne :-)

  • @Chess_Squad
    @Chess_Squad 2 года назад +1

    J'adore l'accent avec les "inpiut" ou "le virgule" lol
    Sinon super tutoriel, on monte grave en compétences!!!

  • @romainleclair5119
    @romainleclair5119 3 года назад +1

    Merci beaucoup, super vidéo !

  • @sebastienmartinez6249
    @sebastienmartinez6249 3 года назад +1

    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

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      Content que la vidéo te plaise :-) hésite pas à regarder sur la chaîne, j'en ai plusieurs sur Vue JS ;)

  • @angeliquefoucart1323
    @angeliquefoucart1323 4 года назад +1

    Merci pour cette mise à jour de ce tuto débutant Vue JS 3 ! 🙂

  • @JohnSmithhh
    @JohnSmithhh 2 года назад +1

    TOP ! Merci !

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Avec plaisir 🙂 content de pouvoir t'aider à débuter sur Vue JS 3 :)

  • @john-mikecourteaud9772
    @john-mikecourteaud9772 3 года назад +1

    Merci beaucoup pour la vidéo. Très belle initiation dans un langage clair !

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад +1

      Merci beaucoup John-Mike ! Content de pouvoir vous aider avec Vue JS 3 👍

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      N'hésitez pas à découvrir cette nouvelle vidéo sur les indispensables de l'écosystème de Vue 3 : ruclips.net/video/L5_KLnHjt1M/видео.html :-)

  • @just_me-gj2ks
    @just_me-gj2ks 11 месяцев назад +1

    Merci beaucoup

  • @LaravelJutsu
    @LaravelJutsu 2 года назад

    Au top ! Merci à toi :)

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад +1

      Avec plaisir 🙂 bonne découverte de Vue JS 3 !

  • @jc0164
    @jc0164 4 года назад +1

    Comme dab, nikel !! Un petit tuto vue3 avec recaptcha et traitement en php serait le bienvenue !!!! En tout cas, Merci !!:)

    • @TechAvecBertrand
      @TechAvecBertrand  4 года назад +2

      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 ! :-)

    • @jc0164
      @jc0164 4 года назад +1

      @@TechAvecBertrand peut être un espace membre ou une inscription a une newsletter en vue php mysql ????

    • @TechAvecBertrand
      @TechAvecBertrand  4 года назад

      Oui ça serait une très bonne idée, je note tout ça :-)

  • @TheRomuald59
    @TheRomuald59 3 года назад +1

    Merci pour cette video de qualité ! super boulot !

  • @fabiant171
    @fabiant171 2 года назад +1

    La documentation est superbement bien faite mais c'est quand même cool de voire comment d'autres personnes abordent le framework (y)

  • @codium1837
    @codium1837 2 года назад +1

    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.

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад +1

      Merci pour le retour, ça aide toujours à faire mieux :)

    • @codium1837
      @codium1837 2 года назад

      @@TechAvecBertrand J'aurais jamais pensé que tu répondrais :o
      En tous cas continu, c'est super.

  • @adadaprout
    @adadaprout 3 года назад +1

    Super contenu merci.

  • @bougboug7506
    @bougboug7506 9 месяцев назад +1

    Super vidéo 👍

  • @DODO-hi7og
    @DODO-hi7og 4 года назад +1

    Tjr au top 👌

    • @TechAvecBertrand
      @TechAvecBertrand  4 года назад +1

      Merci beaucoup Dodo :-) Content que ce tuto Vue JS 3 te plaise :-)

  • @alphago-59
    @alphago-59 2 года назад +1

    excellent

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Merci beaucoup :) content de pouvoir t'aider à apprendre Vue JS !

  • @naturaesensus9840
    @naturaesensus9840 3 года назад +1

    Super vidéo, comment dab

  • @mohamedelfodilihaddaden9978
    @mohamedelfodilihaddaden9978 4 года назад +1

    Sincèrement super tutorial. Merci infiniment.

    • @TechAvecBertrand
      @TechAvecBertrand  4 года назад +1

      Merci beaucoup Mohamed ! Content de pouvoir vous aider sur Vue JS 3 :-)

  • @PopCultureQuest
    @PopCultureQuest 3 года назад +3

    Merci pour la vidéo ! Est-ce que tu envisage de proposer une formation complète et plus poussée sur vuejs3 ?

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      Hello :) Merci beaucoup ! Pour l'instant ce n'est pas à l'ordre du jour, mais pourquoi pas à l'avenir :)

  • @gobajoseph5064
    @gobajoseph5064 2 года назад +1

    Top merci crrtains l'installe aussi avec node js c quoi la difference avec votre methode svp.
    Nb : debutant en js

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад +1

      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

  • @delphinerodriguez4066
    @delphinerodriguez4066 2 года назад +1

    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

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Pas d'erreur de frappe ? Un message d'erreur apparaît ? Sinon moi c'est Bertrand ;) haha !

  • @davidd4554
    @davidd4554 2 года назад +1

    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 :)

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад +1

      Oui peut-être une petite faute de frappe, tout simplement, sinon j'ai également une vidéo avec VueX, Vue-Cli et Vue Router :-)

    • @davidd4554
      @davidd4554 2 года назад

      @@TechAvecBertrand Oui j'ai également suivi la video sur VueX, Vue-Cli et Vue Router qui m'a aussi beaucoup appris ! Merci beaucoup !

  • @DeVs51
    @DeVs51 3 месяца назад +1

    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

    • @TechAvecBertrand
      @TechAvecBertrand  3 месяца назад

      Je note ça dans les idées de vidéos futures ;)

  • @TheBabanito
    @TheBabanito 3 года назад +2

    Merci beaucoup c'est top, mais parfois tu vas très vite ^^

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад +1

      C'est vrai que je suis parfois un peu speed ^^

  • @fabrizionastri9484
    @fabrizionastri9484 Год назад

    MErci pour ce super tuto. Serait-il possible d'avoir un lien vers le code source pour comparer/debugger mon code ? Merci

    • @TechAvecBertrand
      @TechAvecBertrand  Год назад

      Outch je ne pense plus avoir le code source sur moi :/ essaye de taper ton code dans chatGPT pour le debug ça devrait marcher ^^

  • @elvinkyungu
    @elvinkyungu 2 года назад +1

    Salut mon super coach, pourquoi n'est pas nous faire un projet complet avec Vue Js ?!, ce sera vraiment super important !

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Très bonne idée ! Certainement dans une prochaine vidéo :)

  • @blandinerenard1269
    @blandinerenard1269 3 года назад +1

    Bonjour Bertrand, super vidéo. une petite question, comment integre des sessions dans Vuejs3

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      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/

  • @franckrichard9812
    @franckrichard9812 3 года назад

    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.

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      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 😁

    • @franckrichard9812
      @franckrichard9812 3 года назад +1

      @@TechAvecBertrand oui merci Bertrand pour ton lien il est top .... tout fonctionne du premier coup.

  • @clem_chret
    @clem_chret 2 года назад +2

    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.

  • @harryal100
    @harryal100 Год назад

    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

    • @TechAvecBertrand
      @TechAvecBertrand  Год назад

      J'ai créé un simple fichier index.html, où tu veux sur ton ordi :)

  • @Baal93Ash
    @Baal93Ash 2 года назад +1

    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.

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Vraiment content de pouvoir t'aider avec Vue JS :)

  • @akiyemimaximeodebi2889
    @akiyemimaximeodebi2889 2 года назад

    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

    • @TechAvecBertrand
      @TechAvecBertrand  2 года назад

      Problème à l'import du script ou alors de casse ( Vue au lieu de vue par exemple )

  • @izukendkuruko
    @izukendkuruko Год назад

    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 ?

  • @vareen_4094
    @vareen_4094 3 года назад +1

    Quel est ton logiciel ou tu code ?

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад +1

      Hello, c'est Visual Studio code, code.visualstudio.com

  • @mosdev1663
    @mosdev1663 3 года назад +1

    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 ..

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      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 :)

  • @zoheebishaque5643
    @zoheebishaque5643 4 года назад +2

    Salut camarade tu pourrais nous faire un cour sur vue cli

  • @orsonwelles5407
    @orsonwelles5407 3 года назад +2

    C'est vraiment dommage de présenter Vue 3 sans utiliser composition API.
    Bonne introduction à Vue.JS tout de même

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад +3

      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 :-)

    • @nexaroth
      @nexaroth 3 года назад +1

      @@TechAvecBertrand Bonjour Bertrand, merci pour ta vidéo. Je confirme le "besoin" de voir naître un jour un tuto avec Composition API !

    • @TechAvecBertrand
      @TechAvecBertrand  3 года назад

      J"essayerai de bosser sur un tuto dessus à l'occasion :-)

  • @sebastiencamacho8429
    @sebastiencamacho8429 Год назад

    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.

    • @TechAvecBertrand
      @TechAvecBertrand  Год назад

      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.

    • @sebastiencamacho8429
      @sebastiencamacho8429 Год назад

      @@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.