Na blogu opisywałem już jak wzbogacać pisaną aplikację Vue o własne metody. Pisałem już też jak do takiej aplikacji dodawać gotowe komponenty, które można używać wielokrotnie. W tym wpisie połączę te dwa tematy.
Zademonstruję dziś jak wzbogacać tworzone komponenty o własne metody. Takie interaktywne kawałki widoku to bardzo naturalne połączenie. Przy okazji zademonstruję też dodatkowy sposób na definiowanie templatów komponentów.
Jak zwykle zaczynam z pustym plikiem app.js oraz dokumentem HTML index.html, który zawiera bardzo podstawową treść:
|
1 2 3 4 5 6 7 8 9 |
<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> |
Do dokumentu dołączam bibliotekę Vue z CDNu oraz plik app.js, który zawierać będzie mój skrypt.
Celem dzisiejszego wpisu będzie dodanie do widoku aplikacji elementów reprezentujących pieski. Na każdego pieska będzie można zagłosować korzystając z przypisanego do elementu przycisku. Widok elementu wyświetlać powinien imię psa, aktualną ilość głosów jaką zdobył oraz przycisk do głosowania.
Najlepszym rozwiązaniem będzie stworzenie specjalnego komponentu, dla każdego pieska. Tym razem zdefiniuję template trochę inaczej. Do pliku HTML dodaję następujący kod:
|
1 2 3 4 5 6 7 8 9 10 |
<div id="vueApp"> </div> <template id="dog-template"> <div class="dogElem"> <h3>{{name}} the dog</h3> <p>Score: <b>{{score}}</b></p> <button type="button" @click="voteDog">VOTE</button> </div> </template> |
Po za elementem będącym widokiem aplikacji tworzę nowy element template o id dog-template. Ten kod będzie wzorem dla mojego komponentu. Ważny jest atrybut id, będzie on służył do przypisania do konkretnego komponentu.
Kolejna ważna informacja, którą należy zapamiętać, to to, że każdy template składający się z wielu elementów, musi zawierać jeden główny element, który oplata całą resztę. W moim przypadku jest to div o klasie dogElem.
Wewnątrz dogElem dodaję nagłówek zawierający imię psa, paragraf z ilością głosów, oraz przycisk, po kliknięciu którego do puli dodany zostanie nowy głos. Jak widać będę musiał zdefiniować zmienne name i score oraz metodę voteDog.
Aby to zrobić przechodzę do pliku app.js i dodaję następującą treść:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Vue.component('dog', { template: '#dog-template', props: ['name', 'score'], methods: { voteDog: function(){ this.score++; } } }) var vueApp = new Vue({ el: '#vueApp', }) |
Tworzę nowy komponent o nazwie dog.W opcjach, do pola template zamiast łańcucha znaków z kodem HTML, dodaję po prostu selektor zdefiniowanego w widoku templatea. Podczas renderowania aplikacji, Vue usunie kod elementu template o id dog-template z widoku i wstawi go do aplikacji w miejsce gdzie dodam elementy dog.
Mój element będzie miał również dwa atrybuty name oraz score, które definiuję w tablicy props. Ich wartości wstawione zostaną w odpowiednie miejsca w widoku.
Na koniec pojawia się pole methods, które zachowuje się dokładnie tak samo jakbym dodał je do głównego obiektu Vue. Wszystkie pola w obiekcie methods to funkcje, które mogę wywoływać wewnątrz komponentu. Tym razem dodaję funkcję voteDog, która zwiększa wartość zmiennej score.
Na koniec definiuję główny obiekt Vue aby wskazać w nim element, w którym zawarta ma być aplikacja. Teraz wystarczy dodać moje nowe komponenty do widoku. Przy ostylowuję trochę nowy element. Oto finalna wersja dokumentu html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style media="screen"> .dogElem { border: 1px solid black; float: left; padding: 10px; margin: 10px; width: 130px; text-align: center; } </style> </head> <body> <div id="vueApp"> <dog name="Maja" score="0"></dog> <dog name="Milus" score="0"></dog> </div> <template id="dog-template"> <div class="dogElem"> <h3>{{name}} the dog</h3> <p>Score: <b>{{score}}</b></p> <button type="button" @click="voteDog">VOTE</button> </div> </template> <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> </html> |
I gotowe, w ten banalny sposób do mojej aplikacji dodałem interaktywny komponent. Nowy element mogę używać teraz wiele razy przy bardzo małym nakładzie pracy. Dodatkową zaletą jest to, że mógłbym go bardzo łatwo przenieść do innej aplikacji, lub do prywatnej biblioteki komponentów.
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 :).
Super wprowadzenie, dzięki – jestem zielony w temacie frameworków i myślę, że vue.js to coś dla mnie na początek. Niestety moja wiedza odnośnie samego JS jest na poziomie podstawowym i mam trochę problemów…
Jak rozumiem tutaj tworzymy komponent, który zaciąga template po ID=”dog-template”z pliku index.html.
A jak to zmodyfikować, żeby cały segment zapisać w pliku app.js?
score należy usunąć jako props a dodać w polu data. Vue będzie rzucał warningami:
data: function () {
return {
score: 0
}
},
methods: {
voteDog() {
this.counter++;
}
}