Construiți-vă prima componentă Vue.js

Vue.js este un cadru bazat pe componente, ceea ce înseamnă că aplicațiile sunt construite folosind componente reutilizabile. Fiecare componentă încapsulează propriul său HTML, CSS și JavaScript. Acest articol vă va ghida prin procesul de construire a primei componente Vue.js de la zero.

Crearea unei noi componente Vue

Componentele Vue.js sunt de obicei stocate în fișiere .vue. Fiecare fișier component este format din trei secțiuni principale: '<template>', '<script>' și '<style>'. Să creăm o componentă simplă numită Greeting.vue.

1. Navigați la folderul proiectului dvs.: Folosiți terminalul pentru a vă muta în directorul proiectului Vue:

cd my-vue-project

2. Creați un fișier component nou: În directorul src/components, creați un fișier nou numit 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>

Această componentă Greeting.vue conține:

• <template>: Definește structura HTML a componentei.
• <script>: Conține logica JavaScript pentru componentă, cum ar fi proprietățile și metodele datelor.
• <style>: Conține stilurile CSS vizate de această componentă. Atributul scoped asigură că stilurile se aplică numai acestei componente.

Utilizarea componentei dvs

După crearea componentei, trebuie să o utilizați în aplicația Vue. Deschideți fișierul src/App.vue și modificați-l pentru a include componenta 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>

În acest fișier actualizat App.vue:

• Importați componenta: Folosiți import Salutare din './components/Greeting.vue'; pentru a importa componenta Salut.
• Înregistrați componenta: Adăugați Salut la obiectul components în blocul export default.
• Utilizați Componenta: Introduceți eticheta '<Greeting />' în secțiunea '<template>' pentru a utiliza componenta în aplicația dvs.

Testarea componentei dvs

Salvați modificările și asigurați-vă că serverul de dezvoltare rulează. Deschideți browserul și navigați la http://localhost:8080. Ar trebui să vedeți conținutul componentei Salut redat pe pagină.

Concluzie

Ați creat și utilizat cu succes prima componentă Vue.js. Componentele sunt elementele de bază ale aplicațiilor Vue.js, permițându-vă să încapsulați și să gestionați diferite părți ale interfeței dvs. de utilizator. Pe măsură ce vă familiarizați cu Vue.js, puteți explora funcții avansate, cum ar fi elementele de recuzită pentru componente, evenimente și cârlige pentru ciclul de viață, pentru a crea aplicații mai interactive și complexe.

Continuați să experimentați cu componentele Vue.js și extindeți-vă cunoștințele pentru a crea aplicații web dinamice și captivante.