Pierwszy komponent Vue.js

Ten wpis jest 2 częścią z 8 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 lub na szkoleniu: Sprawdź szkolenia Type of Web z Vue.js!

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! 🙂

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

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

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
2 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
H3xas
H3xas
1 rok temu

Hej,

Świetna inicjatywa z kursem Vue.js!
Mam jednakże parę sugestii to powyższego artykułu, aby nie wprowadzić czytelnika w błąd.

Powiedziałbym, że potrzebna jest drobne doprecyzowanie. Jeżeli tworzymy główny obiekt Vue i wszystko obecnie tworzymy w jednym pliku (poprzez dołączenie odnośnika do Vue poprzez tag

wojtiku
wojtiku
2 lat temu
Reply to  H3xas

Bardzo dobra uwaga z tym mount i el. Nie chcę jednak na początku kursu wprowadzać zbyt wielu koncepcji. Dlatego używam tego jednego, „rekomendowanego” (np. vue-cli tak inicjalizuje główną instancję) sposobu. Jest duża szansa, że wrócimy do tego w dalszej części kursu :).

Jeśli chodzi o ostatni punkt to, bazując na własnej wiedzy, niestety nie mogę się zgodzić. Powód dla którego w głównym komponencie Vue pozwala użyć po prostu obiektu data, a nie funkcji zwracającej obiekt jest taki, że ten komponent może mieć tylko jedną instancję. W przypadku innych komponentów tych instancji może być wiele i dlatego data musi zwracać zawsze nowy obiekt o NOWEJ referencji. Inaczej wiele instancji komponentu współdzieliłoby dane. W przypadku komponentu głównego instancja jest jedna i problem nie występuje. Ja jednak polecam zawsze używać data jako funkcji – w ten sposób nigdy nie popełnisz błędu. 🙂