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.
reklama
Ł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 rel="nofollow" :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.