Tworzenie pierwszego komponentu Vue.js

Vue.js to framework oparty na komponentach, co oznacza, że ​​aplikacje są tworzone przy użyciu komponentów wielokrotnego użytku. Każdy komponent zawiera własny kod HTML, CSS i JavaScript. Ten artykuł przeprowadzi Cię przez proces tworzenia pierwszego komponentu Vue.js od podstaw.

Tworzenie nowego komponentu Vue

Komponenty Vue.js są zazwyczaj przechowywane w plikach .vue. Każdy plik komponentu składa się z trzech głównych sekcji: '<template>', '<script>' i '<style>'. Utwórzmy prosty komponent o nazwie Greeting.vue.

1. Przejdź do folderu swojego projektu: Użyj terminala, aby przejść do katalogu swojego projektu Vue:

cd my-vue-project

2. Utwórz nowy plik komponentu: W katalogu src/components utwórz nowy plik o nazwie Greeting.vue.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Ten komponent Greeting.vue zawiera:

• <template>: Definiuje strukturę HTML komponentu.
• <script>: Zawiera logikę JavaScript dla komponentu, taką jak właściwości danych i metody.
• <style>: Zawiera style CSS o zakresie tego komponentu. Atrybut scoped zapewnia, że ​​style mają zastosowanie tylko do tego komponentu.

Korzystanie z komponentu

Po utworzeniu komponentu musisz go użyć w swojej aplikacji Vue. Otwórz plik src/App.vue i zmodyfikuj go, aby uwzględnić komponent Greeting:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

W tym zaktualizowanym pliku App.vue:

• Importuj komponent: Użyj polecenia import Greeting from './components/Greeting.vue';, aby zaimportować komponent Greeting.
• Zarejestruj komponent: Dodaj Greeting do obiektu components w bloku export default.
• Użyj komponentu: Wstaw znacznik '<Greeting />' do sekcji '<template>', aby użyć komponentu w swojej aplikacji.

Testowanie komponentu

Zapisz zmiany i upewnij się, że serwer deweloperski działa. Otwórz przeglądarkę i przejdź do http://localhost:8080. Powinna zostać wyświetlona zawartość komponentu Greeting na stronie.

Wniosek

Udało Ci się utworzyć i użyć swojego pierwszego komponentu Vue.js. Komponenty są podstawowymi elementami aplikacji Vue.js, umożliwiającymi hermetyzację i zarządzanie różnymi częściami interfejsu użytkownika. W miarę jak będziesz coraz lepiej znać Vue.js, możesz odkrywać zaawansowane funkcje, takie jak rekwizyty komponentów, zdarzenia i haki cyklu życia, aby tworzyć bardziej interaktywne i złożone aplikacje.

Eksperymentuj z komponentami Vue.js i poszerzaj swoją wiedzę, aby tworzyć dynamiczne i angażujące aplikacje internetowe.