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

[img=scotland-1761292_1280]

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.

Mały hint Na różnych stronach znajdziesz różne zapisy bindowania danych do atrybutów - v-bind lub : (dwukropek). Możesz używać dowolnego zapisu, osobiście preferuję : bo jest krótsze :) Podobnie jest z eventami - v-on lub @ 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.