Przy okazji tworzenia swojej pierwszej aplikacji w Vue, opisałem dostarczany przez tę bibliotekę mechanizm metod. Mechanizm ten pozwala na definiowane w modelu widoku funkcji, które następnie bardzo łatwo dodać do samego widoku.
Dziś dokładniej przyjrzymy się tej funkcjonalności. Definiowanie metod jest raczej dość proste, jednak myślę że warto poświęcić im osobny wpis. Jestem pewny, że znajomość tego zagadnienia szybko okaże się bardzo przydatna.
Na potrzeby prezentacji zaczynam od pustego dokumentu HTML. Treść elementu body wygląda tak:
|
1 2 3 4 5 6 7 8 9 10 |
<body> <div id="vueApp"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> |
Jak zwykle dodaję Vue za pomocą CDNu, oraz własny skrypt w pliku app.js. Na początku plik ten jest pusty.
Oprócz skryptów dodaję też element div o id równym vueApp. Póki co nie wpisuję do niego żadnej zawartości.
Pierwszym moim celem jest stworzenie licznika, którym mógłbym manipulować. Licznik będzie miał domyślną wartość równą zero. Wartość ta ma być wyświetlona w widoku aplikacji. Oprócz tego w widoku będzie również znajdować się przycisk, kliknięcie którego spowoduje podniesienie aktualnego stanu licznika o jeden. Wartość licznika w widoku powinna aktualizować się na bieżąco.
Zadanie jest bardzo proste, jednak nie uda się łatwo wykonać je wykorzystując tylko wbudowane do Vue dyrektywy. Muszę napisać własną funkcję.
Aby to zrobić, do pliku app.js wpisuję następujący kod:
|
1 2 3 4 5 6 7 8 9 10 11 |
var vueApp = new Vue({ el: '#vueApp', data: { count: 0, }, methods: { clicker: function(){ this.count++; } } }) |
W tym skrypcie tworzę nową instancję Vue i przypisuję ją do elementu o id vueApp. W obiekcie data tworzę jedno pole – count. Tutaj będę przechowywać wartość licznika, która początkowo równa jest zero.
Kolejny krok to zdefiniowane funkcji, która manipulowałaby wartością count. Aby dodać do Vue własną metodę, w głównym obiekcie tworzę pole methods. Jego elementy to funkcje które mogę wykorzystywać w widoku aplikacji.
Do methods dodaję pole o nazwie clicker. Ta nazwa to identyfikator, który zostanie użyty do wywoływania funkcji, zadeklarowanej jako wartość pola.
To wszystko czego potrzebuję. Metoda jest już gotowa i teraz wystarczy dodać ją do widoku. Aby to zrobić uzupełniam div vueApp następującą treścią:
|
1 2 |
<h3>{{count}}</h3> <button @click="clicker">Click me!</button> |
Najpierw do widoku dodaję nagłówek, którego treść to dynamicznie wpisana wartość pola count. Po nagłówku do widoku trafia przycisk o wartości Click me!. Przycisk ma jeden atrybut: @click jest to skrócona wersja v-on:click, czyli przypisania event listenera. Jeśli dany element zostanie kliknięty, program wywoła metodę o nazwie podanej jako wartość tego atrybutu. W tym wypadku jest to clicker czyli moja funkcja zwiększająca wartość count o jeden.
I tak naprawdę to wszystko. Oczywiście mój przykład jest dramatycznie uproszczony. W prawdziwej aplikacji metod będzie pewnie dużo więcej i posiadać będą trochę bardziej skomplikowaną logikę, jednak ich obsługa będzie prawie zawsze wyglądała podobnie. W kolejnym poście pokażę jak wykorzystywać metody w trochę bardziej rozbudowanym środowisku, wraz z komponentami
Jednak na dziś to wszystko. Jeśli chcesz być na bieżąco z postami na blogu zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :).