Wstęp
Witam wszystkich serdecznie! Jest to mój pierwszy post na blogu. Nie będę się rozpisywał na temat mojej osoby bo to nie miejsce na takie rzeczy, jeśli chodzi o informacje o mnie to znajdziecie je w tym miejscu. W ramach projektu nad który pracuję miałem za zadanie napisać panel webowy do zarządzania klientami oraz zamówieniami. Z racji że głównie zajmuję się back-endem i nie śledziłem najnowszych trendów w jakim kierunku zmierza front-end, to mój wybór na początku padł na ASP.NET Core MVC. W trakcie jak aplikacja powstawała zacząłem się zastanawiać czy ja to wszystko potrzebuję? Może dałoby się skorzystać z czegoś innego? No i tak, o angularze to pewnie każdy słyszał, część moich znajomych opowiadało mi o react.js, gdzieś też przewijało się to vue.js, stwierdziłem że dam szansę i spróbuję. Ani trochę tego nie żałuję.
Wyświetlanie właściwości
Vue js służy do budowania stron. Główny nacisk jest kładziony na tworzenie komponentów z których składa się później całą stronę. Doskonale się nadaje do tworzenia SPA – Single-Page Applications. Zasada jest prosta, tworzymy obiekt „aplikacji” i mówimy w obrębie jakiego elementu ta aplikacja ma działać. #app odpowiada elementowi div z id=”app”, w data przechowujemy właściwości z których aplikacja będzie korzystać.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function () { var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) } </script> <div id="app"> {{message}} </div> |
Powyższy kod wyświetli nam na ekranie wartość właściwości message – Hello Vue!
Komponenty
Przejdźmy do troszkę ciekawszego przykładu, tworzenie własnego komponentu. Cała idea Vue.js opiera się na komponentach. Dla przykładu utworzymy sobie komponent z jedną właściwością, który będzie przyjmował imię i wyświetlał wiadomość Hello imię. Rejestrujemy komponent greetings-component z którego później będziemy korzystać, właściwość props oznacza pola które można przekazać i z których można korzystać w obrębie komponentu, w tym wypadku interesuje nas tylko imię. Template jest to szablon html z jakiego ma składać się nasz komponent. Po utworzeniu komponentu możemy zacząć z niego korzystać, w html tworzymy znaczniki z taką samą nazwą jak nasz komponent i przypisujemy właściwości. Poniżej w kodzie zrobiłem przypisanie na dwa sposoby, można zrobić v-bind:nazwaWłaściwości lub skorzystać ze skróconej wersji :nazwaWłaściwości.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Vue.component('greetings-component', { props: ['name'], template: '<p>Hello {{ name }}</p>' }); var app = new Vue({ el: '#app', data: { myName: 'Jakub', myFriendName: 'Dawid' } }) <div id="app"> <greetings-component v-bind:name='myName'></greetings-component> <greetings-component :name='myFriendName'></greetings-component> </div> |
Powyższy kod wyświetli nam na ekranie Hello Jakub oraz Hello Dawid.
Pętla
Jako dodatek na koniec, przedstawię jeszcze działanie pętli w Vue. Komponent zostaje bez zmian, jedynie zmiany będą w naszym app oraz w html. Z racji że korzystamy z pętli to potrzebujemy jakąś kolekcję, utworzyłem kolekcję imion w app.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var app = new Vue({ el: '#app', data: { names: ['Jakub', 'Dawid', 'Andrzej'] } }) <div id="app"> <div v-for='name in names'> <greetings-component :name='name'></greetings-component> </div> </div> |
Link do całego przykładu:
https://github.com/brzooz/Blog/tree/master/Vue/FirstComponent
Jedna myśl na temat “Vue.js – Podstawy + pierwszy komponent”