Vue.js, to obecnie trzeci (po React.js i Angular) pod względem popularności framework JavaScript. Wiele jednak wskazuje na to, że jeszcze w tym roku się to zmieni. Jako ogromnego fana Vue.js zupełnie mnie to nie dziwi. Mam nadzieję, że po zapoznaniu się z kursem Vue, którego pierwszy odcinek właśnie czytasz, również podzielisz moją pasję do tego frameworka.
Mirek / nrm |
Krótki opis | |
---|---|---|
Kurs Vue.js krok po kroku – wprowadzenie i hello world | 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 Vue.js krok po kroku – Chrome DevTools | Zanim przejdziemy do praktycznej części kursu warto wykonać jeszcze jeden drobny krok i zainstalować vue-devtools. To rozszerzenie dla przeglądarki Chrome, która bardzo ułatwia pracę z vue.js. W prosty i czytelny sposób pokazuje nam „debug mode” naszej aplikacji i ułatwia pracę na poszczególnych elementach. | |
Kurs Vue.js krok po kroku – warunki i pętle | Po dwóch odcinkach wprowadzających wreszcie możemy przystąpić do konkretów. Dzisiaj nauczymy się jak korzystać z warunków i pętli w Vue.js. V-IF, V-ELSE, V-SHOW, V-FOR. | |
Kurs Vue.js krok po kroku – Zdarzenia i metody | W tym odcinku dowiemy się czym są i jak działają zdarzenia oraz jak definiujemy metody w Vue.js. Bohaterem dzisiejszego odcinka jest dyrektywa v-on, która.. | |
Kurs Vue.js krok po kroku – Przypisywanie atrybutów | Dzisiaj zajmiemy się przypisywaniem wartości do różnych atrybutów HTML. Coś co w zasadzie będziemy robili bardzo często i coś co jest absurdalnie proste (jak w zasadzie wszystko inne w Vue.js). | |
Kurs Vue.js krok po kroku – Obliczone właściwości | Kurs Vue.js krok po kroku. Dzisiaj zajmiemy się „obliczonymi właściwościami” czyli „computed properties”. Co to jest i jak to stosujemy we Vue.js? | |
Kurs Vue.js krok po kroku – Komponenty | Czym są komponenty w Vue.js? Jak je tworzyć? Prosty przykład jak zdefiniować swój pierwszy komponent w Vue.js i jak go wykorzystać w swojej aplikacji. | |
Kurs Vue.js krok po kroku – vue-loader | Jak zapanować nad rozrastającą się aplikacją w Vue.js? Jak rozbić nasze komponenty na pliki? Czym jest vue-loader i jak z niego korzystać? |
Michał Miszczyszyn / typeofweb |
Krótki opis | |
---|---|---|
Wprowadzenie do kursu Vue.js od podstaw | Oto kurs Vue.js! Moje gratulacje za podjęcie tego tematu! Vue.js to bardzo popularna biblioteka i warto ją poznać! Poznaj framework JavaScript Vue! | |
Pierwszy komponent Vue.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Vue.js jest reaktywnym frameworkiem JavaScript. Znaczy to, że dowolna zmiana danych używanych do wyświetlania strony sprawia, że widok automatycznie jest aktualizowany tak, aby odzwierciedlić tę zmianę. Dodanie Vue.js do strony Żeby zacząć korzystać z Vue, wystarczy, że dodasz odpowiedni tag do pliku html: W dalszych częściach kursu omówimy bardziej skomplikowane techniki dołączania Vue.js do Twojej strony, ale pamiętaj, … | |
Dynamiczne atrybuty w Vue.js – dyrektywa v-bind | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W poprzednim wpisie pokazałem Ci jak wyświetlić dynamiczne dane w Vue.js za pomocą wąsów, czyli podwójnych nawiasów klamrowych ({{ nazwaZmiennej }}). Dziś dowiesz się jak przekazać je do atrybutów elementu HTML za pomocą dyrektywy v-bind. Dyrektywa v-bind Dyrektywy w Vue.js to specjalne atrybuty z przedrostkiem v-. Wartością takiej dyrektywy jest wyrażenie JavaScript. Dyrektywy mają za zadanie reaktywne aktualizowanie drzewa … | |
Dyrektywy warunkowe w Vue.js | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Pisząc aplikacje w Vue.js często spotkasz się z sytuacją, w której wyświetlenie lub nie danego elementu będzie zależało od wartości zmiennej. Właśnie do tego służą dyrektywy warunkowe v-if, v-else, v-else-if, (oraz w pewnym sensie v-show), które odpowiadają instrukcjom warunkowym znanym z JavaScript. To właśnie te dyrektywy Ci dziś zademonstruję. Pokazywanie i ukrywanie elementów za pomocą dyrektywy v-if Najbardziej podstawową dyrektywą umożliwiającą pokazywanie elementów … | |
Pętle w Vue.js z użyciem dyrektywy v-for | Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Pisząc aplikacje w Vue.js bardzo często bedziesz chciał(a) wyświetlić listę elementów w pętli na podstawie tablicy. Właśnie w tym celu „język szablonów” wbudowany w Vue.js udostępnia dyrektywę v-for. W najprostszej postaci odpowiada ona pętli for znanej z JavaScriptu. Wyświetlanie listy przy użyciu dyrektywy v-for Dyrektywa v-for używa specjalnej składni aktualnyElementy in tablicaZDanymi gdzie tablicaZDanymi jest… źródłową tablicą … | |
Atrybuty class i style w Vue.js | Vue traktuje inaczej dwa atrybuty html - `class` i `style` - sprawiając, że korzystanie z tego frameworka jest przyjemniejsze i łatwiejsze. | |
Metody oraz pola typu computed w Vue.js | Metody oraz pola typu computed pozwalają zgrabnie enkapsulować logikę wyliczania wartości na podstawie pól danych komponentu i prowadzą do lepszego kodu. |