Pierwszy komponent Vue.js

Ten wpis jest 2 częścią z 6 w kursie Vue.js

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

See the Pen RMJPoK by Wojciech Urbański (@wojtiku) on CodePen.

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.