Kurs Vue.js krok po kroku – wprowadzenie i hello world

Vue.js wdarł się przebojem na scenę JavaScriptowych frameworków. Zdecydowanie 2016 to był jego rok. Wydawało się, że na rynku gdzie niepodzielnie króluje duet Angular / React już nic ciekawego się nie przebije do głównego nurtu, a jednak. Niesamowita prostota, dobra dokumentacja, niska bariera wejścia i niesamowicie szybko rosnący ekosystem spowodował prawdziwy boom.

vue.js 2016

Kiedy po raz pierwszy zobaczyłem proste akcje wykonane w Vue.js byłem zdumiony. Jako klasyczny backendowiec z dużą dozą niechęci dla JavaScriptu (parafrazując pewien popularny slogan „w nienawiści do JavaScriptu tak zostałem wychowany”) byłem zaskoczony w jak prosty sposób mogę użyć tego frameworka do ułatwienia sobie życia w sytuacji kiedy muszę „niestety” przeprosić się z frontendem. JS jeszcze nigdy nie był dla mnie tak prosty ale przede wszystkim jeszcze nigdy tak szybko mi się go nie używało, nie tracąc na niego tyle czasu co zwykle.

Dokładając swoją cegiełkę do popularności Vue.js chciałbym przedstawić poniższy kurs jako wprowadzenie i pierwsze kroki z tym frameworkiem. Kurs przejdzie od totalnych podstaw, poprowadzi za rękę i doprowadzi cię do miejsca w którym wykonasz już proste komponenty i będziesz mógł dalej zgłębiać swoją wiedzę w tym temacie.

Kurs kieruję do backendowców, którzy do tej pory mocno stronili od JS, ale także do każdego kto by chciał zacząć z Vue.js ale nie miał okazji aby zacząć, zmotywować się, coś zrobić, albo dla którego dostępne kursy były na zbyt wysokim poziomie zakładającym jakiś stopień wiedzy JS.

Kurs składa się z kilkunastu krótkich lekcji (w wersji video chciałem aby lekcje były maksymalnie kilkuminutowe) i kończy się pokazaniem jak użyłem Vue.js w mojej aplikacji w konkursie „Daj się poznać 2017”.

Hello World

W kolejnej części przygotujemy sobie środowisko do dalszej pracy ale już teraz chciałem ci pokazać, że naukę JS można zacząć dosłownie TU I TERAZ. Nie musisz się przygotowywać, nie musisz mieć programów, pobierać plików. Koniec z wymówkami! Odpal swoje pierwsze hello world w dosłownie mniej niż kilka minut.

Otwórz proszę serwis jsfiddle.net i zaczynamy. Ekran masz podzielony na sekcję HTML, CSS i JS. W JS z gotowych ustawień wybierz Vue.js 2.x, a w HTML wstaw DIVa na którym będziemy operować. W sekcji JS definiujemy odpalenie Vue na elemencie DIVa którego właśnie utworzyliśmy. Teraz przekażmy mu dane. I gotowe. Twoje pierwsze Hello World.

Za prosto? Spokojnie, w kolejnych odcinkach zajmiemy się bardziej zaawansowanymi przykładami ale obiecuję ci – będzie równie łatwo i przyjemnie. Zaczynasz naukę ze mną, dałeś się namówić? Daj znać w komentarzu.

* ilustracja z bloga autora Vue.js, polecam artykuł podsumowujący rok 2016

Kurs Vue.js krok po kroku

  1. Wprowadzenie i hello world
  2. Chrome DevTools
  3. Warunki i pętle
  4. Zdarzenia i metody
  5. Przypisywanie atrybutów
  6. kolejne
  7. odcinki
  8. wkrótce

Przede wszystkim admin, potem webdeveloper choć kiedyś było odwrotnie. Obecnie Full Stack Engineer, CTO i System Architect. Po godzinach fan dobrych seriali, których nigdy nie ma czasu obejrzeć. Kawożłop. Koneser prawdziwego piwa. W czasie pomiędzy kontuzjami biega.

  • Riu

    Świat się kończy…@nrm idzie we front-end 😀

    • nrm

      Nie idę. Moim zdaniem to takie minimum z minimum i nawet jak ktoś siedzi w backendzie to raz na jakiś czas zahaczy o grzebanie w jakimś froncie i to się wtedy przydaje.

  • SowaProgramuje

    Super, czekam na więcej! 😉

  • Piotr Zawadzki

    Chętnie się przyłączę, skoro mówisz, że to takie proste 😉

    • nrm

      Będziesz zdumiony jak zobaczysz jakie to jest proste 😉

    • Jako zasiedziały backendowiec potwierdzam, że to jest proste 🙂

  • Daredzik

    Troszkę tak zalatuje angularem 1 😉

  • DevQuayle

    Hej fajny artykuł, na pewno będę śledił

  • neruda

    Bardzo dobra robota, tylko nie olej proszę, bo juz parę kursów takich widziałem. Zapotrzebowanie jest 🙂 Jeśli nawet wydasz płatny kurs ale jakiś taki więcej niż podstawy, to chętnie kupię, i pewnie nie tylko ja 🙂

  • neruda

    Widzę że praca postępuje 🙂

    • nrm

      Mówisz o video? Mam chwilową przerwę bo za dużo pracy ale to będzie na 1000%. Będę teraz nagrywał po kilka odcinków na raz żeby właśnie mieć tego więcej na takie wypadki. ;(

      • neruda

        No mega 🙂 Juz nie pamietam żebym tak czekał na jakiś kurs, jak na ten o Vue.js

        • nrm

          O kurczę, nie sądziłem, że aż tak. Teraz mi głupio 😉 Ale nowa robota plus projekty plus konkurs DSP wyjechały mnie z czasu do zera. Ale będzie lepiej 😉 To taki okres przejściowy mam nadzieję 😉

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL