Dodanie Vue.js do strony
Żeby zacząć korzystać z Vue, wystarczy, że dodasz odpowiedni tag <script> do pliku html:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
W dalszych częściach kursu omówimy bardziej skomplikowane techniki dołączania Vue.js do Twojej strony, ale pamiętaj, że powyższy sposób w zupełności wystarczy i jest poprawny. Nie potrzebujesz niczego więcej by zacząć pracę!
Pierwszy komponent
Wyświetlanie danych we Vue odbywa się dzięki tzw. wąsom znanym z wielu języków szablonów (takich jak Handlebars). Wystarczy, że nazwę zmiennej owiniesz w podwójne nawiasy klamrowe ({{ appTitle }}), a framework sam poszuka odpowiedniego pola z danymi i wyświetli jego wartość. Zadba również o to, żeby zaktualizować wyświetlany tekst, gdy wartość ta ulegnie zmianie:
<div id="app">
<h1>{{ appTitle }}</h1>
</div>
Aby Vue mogło zmienić zwykłe dane w reaktywne, musisz zwrócić je z metody data(). Dzięki temu framework będzie w stanie śledzić ich zmiany i odpowiednio aktualizować elementy DOM.
Teraz musisz już tylko zainicjalizować nową instancję Vue i podłączyć ją do elementu DOM za pomocą metody $mount:
new Vue({
data() {
return {
appTitle: 'Pierwsza aplikacja Vue!',
};
},
}).$mount('#app');
Reaktywność v-model
Właśnie napisałaś/eś swoją pierwszą aplikację używając Vue.js. Szkoda tylko, że jest taka nudna — nie robi nic poza wyświetlaniem tekstu.
Zróbmy coś ciekawszego! :) W tym celu wykorzystamy dyrektywę v-model. Odpowiada ona za powiązanie wartości inputa z polem danych. W tym wypadku ustawia ona value inputa na wartość pola appTitle i podpina się pod zdarzenie input w celu aktualizacji pola appTitle kiedy użytkownik coś w nie wpisze:
<div id="app">
<input v-model="appTitle" />
<h1>{{ appTitle }}</h1>
</div>
Gratulacje! Teraz Twoja aplikacja jest dynamiczna! Oczywiście to dopiero początek tego, co potrafi Vue.js — więcej w kolejnych częściach kursu lub na szkoleniu: zapisz się na szkolenie z Vue.js.
Aby być na bieżąco z kolejnymi wpisami, zapisz się na newsletter poniżej i śledź Type of Web na Facebooku! :)
Ćwiczenie
W wąsach możesz wpisać nie tylko nazwę pola danych, ale również wyrażenie JavaScript np. {{ "To jest " + appTitle }}. Wykorzystaj to, aby wyświetlić na ekranie liczbę dwa razy większą niż wpisana w pole formularza liczba.