Construindo seu primeiro componente Vue.js

Vue.js é um framework baseado em componentes, o que significa que os aplicativos são criados usando componentes reutilizáveis. Cada componente encapsula seu próprio HTML, CSS e JavaScript. Este artigo o guiará pelo processo de criação do seu primeiro componente Vue.js do zero.

Criando um novo componente Vue

Os componentes do Vue.js são normalmente armazenados em arquivos .vue. Cada arquivo de componente consiste em três seções principais: '<template>', '<script>' e '<style>'. Vamos criar um componente simples chamado Greeting.vue.

1. Navegue até a pasta do seu projeto: Use o terminal para ir para o diretório do seu projeto Vue:

cd my-vue-project

2. Crie um novo arquivo de componente: No diretório src/components, crie um novo arquivo chamado 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>

Este componente Greeting.vue contém:

• <template>: Define a estrutura HTML do componente.
• <script>: Contém a lógica JavaScript para o componente, como propriedades de dados e métodos.
• <style>: Contém os estilos CSS com escopo para este componente. O atributo scoped garante que os estilos se apliquem somente a este componente.

Usando seu componente

Após criar o componente, você precisa usá-lo dentro do seu aplicativo Vue. Abra o arquivo src/App.vue e modifique-o para incluir o componente 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>

Neste arquivo App.vue atualizado:

• Importar o componente: Use import Greeting from './components/Greeting.vue'; para importar o componente Greeting.
• Registre o componente: Adicione Greeting ao objeto components no bloco export default.
• Use o componente: Insira a tag '<Greeting />' na seção '<template>' para usar o componente em seu aplicativo.

Testando seu componente

Salve suas alterações e garanta que seu servidor de desenvolvimento esteja em execução. Abra seu navegador e navegue até http://localhost:8080. Você deve ver o conteúdo do componente Greeting renderizado na página.

Conclusão

Você criou e usou com sucesso seu primeiro componente Vue.js. Componentes são os blocos de construção de aplicativos Vue.js, permitindo que você encapsule e gerencie diferentes partes da sua interface de usuário. À medida que você se familiariza mais com o Vue.js, pode explorar recursos avançados, como props de componentes, eventos e ganchos de ciclo de vida para construir aplicativos mais interativos e complexos.

Continue experimentando os componentes do Vue.js e expanda seu conhecimento para criar aplicativos web dinâmicos e envolventes.