Construyendo su primer componente Vue.js

Vue.js es un framework basado en componentes, lo que significa que las aplicaciones se crean utilizando componentes reutilizables. Cada componente encapsula su propio HTML, CSS y JavaScript. Este artículo te guiará a través del proceso de creación de tu primer componente Vue.js desde cero.

Creación de un nuevo componente Vue

Los componentes de Vue.js se almacenan normalmente en archivos .vue. Cada archivo de componente consta de tres secciones principales: '<template>', '<script>' y '<style>'. Vamos a crear un componente simple llamado Greeting.vue.

1. Vaya a la carpeta de su proyecto: Use la terminal para moverse al directorio de su proyecto Vue:

cd my-vue-project

2. Crear un nuevo archivo de componente: En el directorio src/components, cree un nuevo archivo llamado 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 contiene:

• <template>: Define la estructura HTML del componente.
• <script>: Contiene la lógica de JavaScript para el componente, como propiedades de datos y métodos.
• <style>: Contiene los estilos CSS que se aplican a este componente. El atributo scoped garantiza que los estilos solo se apliquen a este componente.

Usando su componente

Después de crear el componente, debe usarlo dentro de su aplicación Vue. Abra el archivo src/App.vue y modifíquelo para incluir el 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>

En este archivo App.vue actualizado:

• Importar el componente: Utilice import Greeting from './components/Greeting.vue'; para importar el componente Greeting.
• Registra el componente: Agrega Saludo al objeto components en el bloque export default.
• Utilice el componente: Inserte la etiqueta '<Greeting />' en la sección '<template>' para usar el componente en su aplicación.

Probando su componente

Guarde los cambios y asegúrese de que el servidor de desarrollo esté en funcionamiento. Abra el navegador y navegue hasta http://localhost:8080. Debería ver el contenido del componente Greeting representado en la página.

Conclusión

Ha creado y utilizado correctamente su primer componente Vue.js. Los componentes son los elementos básicos de las aplicaciones Vue.js y le permiten encapsular y administrar diferentes partes de su interfaz de usuario. A medida que se familiarice con Vue.js, podrá explorar funciones avanzadas, como propiedades de componentes, eventos y ganchos de ciclo de vida para crear aplicaciones más interactivas y complejas.

Sigue experimentando con los componentes de Vue.js y amplía tus conocimientos para crear aplicaciones web dinámicas y atractivas.