Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Piszemy aplikację we Vue.js — cz. 2— nawigacja

W pierwszej części poznałeś jak zacząć projekt z Vue.js, utworzyliśmy strukturę katalogu i pierwszy widok - stronę główną.

Teraz zaczniemy tworzyć komponenty reużywalne - jako pierwsza będzie nawigacja.

Ładniej sformatowany tekst dostępny na moim blogu

Nawigacja

Zaczniemy od nawigacji, w trakcie pisania aplikacji będzie się zmieniać i będziemy dodawać kolejne rzeczy.
Bazowa struktura to zwykła pętla po danych, które będzie przekazywać z innego komponentu. <template> <nav class="menu"> <ul> <li v-for="item in items"> <a :href="item.url"> {{ item.name }} </a> </li> </ul> </nav> </template> <script> export default { name: 'menu', props: { items: { type: Array, required: true } } } </script>

Jak widzisz, do komponentu przekazujemy tablice Items, która zawiera obiekt z name i url.

[b]Mały hint[/b]
Na różnych stronach znajdziesz różne zapisy bindowania danych do atrybutów - [b]v-bind[/b] lub [b]:[/b] (dwukropek). Możesz używać dowolnego zapisu, osobiście preferuję [b]:[/b] bo jest krótsze :)
Podobnie jest z eventami - [b]v-on[/b] lub [b]@[/b] i tu również używam krótszego.
Pamiętaj również, że dane które otrzymujesz z innego komponentu lub z API musisz zbindować, nawet ścieżkę do zdjęcia. W innym wypadku aplikacja zadziała, ale 1. nie wyświetlą się wszystkie obrazki, tylko te które aplikacja zdążyła pobrać do czasu wyświetlenia, 2. w konsoli znajdziesz warningi dla każdego elementu.

Teraz musimy umożliwić wyświetlenie nawigacji w nagłówku. Zrobimy to za pomocą slotów.

W naszym pliku Header.vue tworzymy prostą strukturę: <template> <header> <h1> Logo </h1> <slot name="navigation"></slot> </header> </template>

A w pliku Homepage.vue dodajemy komponent z nawigacją. <template> <div> <header-component> <div slot="navigation"><navigation :items="menu"></navigation></div> </header-component> <main> // lista ogłoszeń </main> <footer-component></footer-component> </div> </template> <script> import FooterComponent from '../components/Footer.vue'; import HeaderComponent from '../components/Header.vue'; import Navigation from '../components/Menu.vue'; export default { name: 'app', components: { FooterComponent, HeaderComponent, Navigation }, data() { return { menu: [ { name: 'Strona główna', url: '#' }, { name: 'Lista ogłoszeń', url: '#' } ] } } } </script>
Jak widzisz, dane przekazujemy poprzez :items="menu". Tak jak w przypadku bindowania danych do atrybutów tu też są 2 możliwości:
- zapis items="menu" przekaże do komponentu string _menu_. Zawsze przekazywana wartość będzie stringiem!
- zapisz :items="menu" przekaże dane ze zmiennej _menu_. Gdybyśmy przekazywali liczby lub wartości logiczne i musi nam się zgadzać typ danych to przekazujemy w ten sposób.

I tym sposobem po kompilacji ujżysz menu ;) Oczywiście musisz je sobie ostylować.

W kolejnym wpisie zrobimy nawigację w stopce, z nagłówkami i ikonami. 

oprogramowanie internet programowanie

Komentarze

0 nowych
Waka   10 #1 08.01.2017 00:02

Vue.JS? O lol... nowy framework. Webdevowie to chyba jacyś hipsterzy. "Kodzę w wedgdf.JS, pewnie nawet nie słyszałeś, wczoraj wymyślili" :P Innego wytłumaczenia nie ma :P
BTW widzę, że bazuje na template'ach, mniej więcej jak, z punktu widzenia stawiania stron, archainczym Django. Webdev zatacza koło :D

Autor edytował komentarz w dniu: 08.01.2017 00:18
HitcH   5 #2 08.01.2017 10:59

@Waka: Vue.js już od ponad 1.5 roku istnieje, hype na niego jest od wersji 2.0 gdzie wprowadzili (a raczej wprowadził, bo autor to jedna osoba) mega dużo usprawnień (np. virtual DOM).

  #3 08.01.2017 12:30

@Waka #1: Pisząc tradycyjny program potrzebujesz znać język, sql, a także narysować interfejs (w przypadku np. Javy, silnik od GUI jest natywnie).

Pisząc strony www potrzebujesz html, css, php / asp.net, java script lub frameworki typu angular / entity / jquery / bootstrap, dodatkowo sql. Dodatkowo trzeba męczyć się z sytuacjami implementacji języków przez przeglądarki. Pracuję w branży IT i nie jest przesadą, gdy słyszę od koderów, że niedługo do napisania hello world trzeba będzie robić specjalizację.

Taka jest cena tego, że chce się nagiąć Web, jako platforma desktopowa. Stopień komplikacji napisania realnej aplikacji jest niemały, a dodatkowo ciągle powstają nowe frameworki.

Waka   10 #4 08.01.2017 17:59

@HitcH: Niby tak ale traf na nietypowy problem i spróbuj znaleźć w Google czy zapytać na Stacku o rozwiązanie... jest problem, bo mało kto zdążył dogłębnie poznać bibliotekę wymyśloną wczoraj.

HitcH   5 #5 08.01.2017 20:11

@Waka: każdy problem jaki miałem udawało się znaleźć :) Społeczność jest już dość spora, za autorem stoją duże firmy, możesz zobaczyc na stronie vuejs.org ;)