Piszemy aplikację we Vue.js — cz. 2— nawigacja
07.01.2017 15:51
[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.