Vue.js - pierwsza aplikacja.

Najlepsza metoda na rozpoczęcie swojej przygody z frameworkiem Vue.js, to napisanie aplikacji z jego użyciem.

W tym wpisie poprowadzę Cię przez proces tworzenia prostej aplikacji typu “todo”.

Zanim jednak zaczniemy naszą przygodę z Vue.js, niezbędne jest przygotowanie środowiska developerskiego gotowego do pracy z frameworkiem.

Narzędzia używane w ramach pracy z Vue.js bazują na Node.js, stworzonym w 2009 roku prostym środowisku uruchomieniowym dla aplikacji serwerowych napisanych w języku JavaScript. Node.js bazuje na silniku używanym w przeglądarce Google Chrome i dostarcza API do wykonywania kodu JavaScript-owego poza środowiskiem przeglądarki internetowej.

Node.js, to jednak rozwiązanie nie tylko dla aplikacji serwerowych, bowiem dostarcza on w ostatnim czasie podstawy dla nowej generacji cross-platformowych środowisk deweloperskich i ich narzędzi.

Zacznijmy więc od instalacji Node.js - instalator dostępny jest pod adresem https://nodejs.org.

Kiedy już zainstalujesz Node.js wykonując poniższe polecenie w terminalu (konsoli), możesz sprawdzić poprawność instalacji.

node -v

Jeżeli zobaczysz informację o używanej wersji Node.js, instalacja przebiegła pomyślnie.

Instalator Node.js instaluje również Node Package Manager (NPM), który używany jest do zarządzania paczkami (zależnościami) w projekcie. Poniższe polecenie pozwala na wyświetlenie aktualnie używanej wersji NPM-a, a zarazem sprawdzenie poprawności jego instalacji.

npm -v

Następnie zainstalujmy Vue CLI (Vue Command Line Interface), który dostarcza standardowy sposób tworzenia i zarządzania projektami Vue.js w trakcie development’u.

Aby zainstalować @vue/cli, należy wykonać poniższe polecenie.

npm install --global @vue/cli

Oprócz wspomnianych powyżej rzeczy do pracy z Vue.js, niezbędna jest przeglądarka (zachęcamy do korzystania z przeglądarki Google Chrome, a do edycji kodu - Visual Studio Code).

Projekty Vue.js są tworzone i zarządzane z poziomu wiersza poleceń (terminala, konsoli). Aby utworzyć nowy projekt Vue, należy wykonać poniższe polecenie.

vue create todo --default

Kiedy już CLI Vue utworzy dla nas projekt we wskazanej przez Ciebie ścieżce, wewnątrz folderu todo znajdziesz następujące pliki.

public/index.hml - Plik HTML ładowany przez przeglądarkę, zawierający element HTML, wewnątrz którego aplikacja jest wyświetlana oraz element script, który ładuje pliki naszej aplikacji.

src/main.js - Plik JavaScript odpowiedzialny za konfigurację naszej aplikacji Vue.js, używany również do instalacji lub rejestracji zależności, na jakich aplikacja bazuje.

src/App.vue - Komponent Vue.js, zawierający zawartość HTML wyświetlaną dla użytkownika, kod JavaScript na którym pracuje nasza zawartość HTML oraz style CSS nadające odpowiedni wygląd elementom naszej aplikacji.

src/assets/logo.png - Folder assets używany jest do przechowywania statycznej zawartości, takiej jak np. obrazki - w nowym projekcie Vue.js domyślnie zawiera plik logo.png, który jest obrazkiem reprezentującym logo Vue.js.

Kiedy utworzyliśmy nowy projekt Vue.js wykorzystując polecenie vue... , zestaw narzędzie, który zainstalowaliśmy na początku, zawierający wszystkie niezbędne elementy niezbędne do kompilacji naszego projektu, jego pakowania oraz dostarczania do przeglądarki został przygotowany. Teraz wystarczy przejść do naszego projektu i uruchomić go wykorzystując następujące polecenia.

cd todo
npm run serve

Kiedy proces przygotowania naszej aplikacji zakończy się, zobaczymy informację podobną do poniższej, która potwierdza uruchomienie oraz informuje nas o porcie, pod jakim aplikacja jest dostępna.

App running at:
Local: http://localhost:8080/
Network: http://192.168.0.77:8080/
Note that the development build is not…

Kiedy przejdziesz pod wskazany adres, zobaczysz domyślną zawartość generowaną przez CLI dla nowo utworzonej aplikacji.
W pliku App.js znajdującym się w folderze src, dotychczasową zawartość zastąpmy nową, na której będzie bazowała nasza aplikacja.

<template>
	<div id=”app”>
		<h4>
			Aplikacja ToDo
		</h4>
	</div>
</template>
<script>
	export default {
		name: 'app'
	}
</script>

Kiedy zapiszesz te zmiany, aplikacja automatycznie zostanie zrekompilowana, a okno przeglądarki przeładowane.

Nasza dotychczasowa aplikacja nie wygląda zbyt okazale, w związku z czym dodajmy do naszego projektu framework CSS, który załatwi temat stylowania elementów za nas.

Zatrzymajmy proces developreski Vue.js poprzez kombinację klawiszy Ctr + C (Cmd + C). Następnie wykorzystując NPM zainstalujmy framework Bootstrap.

npm install bootstrap

Kolejno w pliku main.js w folderze src dodajmy następującą linijkę (nad fragment kodu new Vue({...}).

import “bootstrap/dist/css/bootstrap.min.css”;

Ta linia kodu powoduje, że zestaw styli CSS dostarczany przez framework będzie dołączony do naszej aplikacji.

Kiedy Bootstrap jest już częścią naszej aplikacji, możemy dodać odpowiednie klasy powodujące ostylowanie naszych elementów HTML.

Do nagłówka 4-stopnia dodajmy następujące klasy.

bg-primary text-white text-center p-2

Teraz użyj polecenia.

npm run serve

Nasza aplikacja powinna w tym momencie prezentować się zdecydowanie lepiej.

Następnym krokiem jest dodania dynamicznej zawartości - zmodyfikujmy więc nasz komponent App, tak aby wyświetlał nam wartość z obiektu zwracanego przez funkcję data().

<template>
	<div id=”app”>
		<h4 class="bg-primary text-white text-center p-2">
			{{ name }} - Aplikacja ToDo
		</h4>
	</div>
</template>
<script>
	export default {
		name: 'app',
			data() {
				return {
					name: “ZmieńKarierę.pl”
				}
			}
	}
</script>

Dodany przez nas element warunkuje wstawienie danych z funkcji data, kiedy wyświetlana jest zawartość HTML naszej aplikacji. Mechanizm ten nazywany jest interpolacją (ang. text interpolation binding). Dane te wstawiane są z wykorzystaniem składni podwójnych nawiasów klamrowych {{ … }}.

W naszym przypadku wartość zmiennej name wstawiana jest do elementu h4. Co istotne, każda zmiana wartości tej zmiennej spowoduje, że nowa wartość zostanie wstawiona do szablonu HTML.

Vue.js wspiera wiele możliwości wstawiania dynamicznej zawartości do szablonów HTML. Dodajmy do naszej aplikacji kolekcję obiektów zawierających zadania do wykonania. Aby to zrobić, do naszej aplikacji musimy dopisać następujący fragment kodu.

<template>
	<div id=”app”>
		<h4 class="bg-primary text-white text-center p-2">
			{{ name }} - Aplikacja ToDo
		</h4>
		<div class=”container-fluid p-4>
	<div class=”row”>
	<div class=”col font-weight-bold’>Zadania</div>
	<div class=”col-2 font-weight-bold”>Zrobione</div>
</div>
<div class=”row” v-for=”t in tasks” v-bind:key=”t.action”>
	<div class=”col”>{{ t.action }}</div>
	<div class=”col-2”>{{ t.done }}</div>
</div>
	</div>
</template>
<script>
	export default {
		name: 'app',
			data() {
				return {
					name: “ZmieńKarierę.pl”,
					tasks: [{ action: “Kupić kwiaty”, done: false },
						{ action: “Zadzwonić do Mamy, done: true },
						{ action: “Napisać aplikację z Vue.js, done: false }
				}
			}
	}
</script>

Aby wyświetlić listę naszych zadań, wykorzystujemy dyrektywę v-for, która dla każdego elementu naszej kolekcji (tablicy) wstawia jego wartości do naszego szablonu HTML.

Nasza aplikacja zaczyna wyglądać coraz lepiej, jednak wyświetlanie wartości true/ false na liście naszych zadań, zdecydowanie nie jest tym czego może oczekiwać użytkownik. Dodajmy więc do niej znacznik input.

<template>
	<div id=”app”>
		<h4 class="bg-primary text-white text-center p-2">
			{{ name }} - Aplikacja ToDo
		</h4>
		<div class=”container-fluid p-4>
	<div class=”row”>
	<div class=”col font-weight-bold’>Zadania</div>
	<div class=”col-2 font-weight-bold”>Zrobione</div>
</div>
<div class=”row” v-for=”t in tasks” v-bind:key=”t.action”>
	<div class=”col”>{{ t.action }}</div>
	<div class=”col-2”>
	<input type=”checkbox” v-model=”t.done” class=”form-check-input” />
</div>
</div>
	</div>
</template>

Dodana kolejna dyrektywa v-model konfiguruje nasz znacznik input w taki sposób, aby wyświetlał on odpowiednią wartość na bazie pewnego wyrażenia.

W tym miejscu działa mechanizm dwustronego wiązania danych (ang. two-way data binding), który powoduje, że każda zmiana wartości wewnątrz elementu input (zacznaczenie lub odznaczenie checkbox-a) ma swoje odzwierciedlenie wewnątrz zmiennej znajdującej się w funkcji data, a każda zmiana wartości zmiennej w funkcji data spowoduje zmianę wartości elementu input (zmiana wartości zmiennej na true spowoduje zaznaczenie checkbox-a i odwrotnie).

W naszej aplikacji brakuje jeszcze jednego bardzo istotnego elementu - możliwości dodawania nowych zadań przez użytkownika, w związku z czym dodajmy kolejny fragment kodu.

<template>
	<div id=”app”>
		<h4 class="bg-primary text-white text-center p-2">
			{{ name }} - Aplikacja ToDo
		</h4>
		<div class=”container-fluid p-4>
	<div class=”row”>
	<div class=”col font-weight-bold’>Zadania</div>
	<div class=”col-2 font-weight-bold”>Zrobione</div>
</div>
<div class=”row” v-for=”t in tasks” v-bind:key=”t.action”>
	<div class=”col”>{{ t.action }}</div>
	<div class=”col-2”>
	<input type=”checkbox” v-model=”t.done” class=”form-check-input” />
</div>
</div>
<div class="row py-2">
        <div class="col">
          <input v-model="newItemText" class="form-control" />
        </div>
        <div class="col-2">
          <button class="btn btn-primary" v-on:click="addNewTodo">Dodaj</button>
        </div>
 </div>
</div>
	</div>
</template>
<script>
	export default {
		name: ‘app’,
			data() {
				return {
					name: “ZmieńKarierę.pl”,
					tasks: [{ action: “Kupić kwiaty”, done: false },
						{ action: “Zadzwonić do Mamy, done: true },
						{ action: “Napisać aplikację z Vue.js, done: false },
					newItemText: “”
				}
			},
methods: {
	addNewTodo() {
		this.tasks.push({
			action: this.newItemText,
			done: false
		});
		this.newItemText = “”;
	}
}
	}
</script>

Do naszej aplikacji dodaliśmy przycisk, który wykorzystuje dyrektywę v-on dodającą do wskazanego elementu nasłuchiwacz zdarzenia w naszym przypadku - zdarzenia click, które po wyzwoleniu wywołuje metodę z obiektu methods o wskazanej nazwie.

Nasza prosta aplikacja jest już gotowa. Przydałoby się dodać do niej możliwość przechowywania w sposób stały naszych zadań oraz usuwanie tych zakończonych, ale te dwa elementy zostawiam do dodania już Tobie.

Jeżeli nadal nie czujesz się jednak pewny w swoich działaniach z Vue.js, zapraszamy na nasz kanał w serwisie YouTube oraz do skorzystania z naszej oferty kursów online i stacjonarnych.