DEV Community

Cover image for Crea tu primer componente con Vue.js (para dummies)
Cristian Fernando
Cristian Fernando

Posted on

Crea tu primer componente con Vue.js (para dummies)

#javascript #vue #webdev #spanish

Vue.js a la cabeza de su creador Evan You ha llegado para quedarse estableciéndose de manera muy firme entre la comunidad de desarrollo web front-end.
El equipo de Vue.js define a su herramienta como un framework progresivo para el desarrollo de interfaces de usuario.
Este post es netamente práctico así que evitaré hablar de conceptos o definiciones abundantes.

¿Qué es un Web Component?

Un Web Component es una característica muy poderosa que nos provee Vue.js permitiendo encapsular código reutilizable.
Al momento de comprender una nueva definición en software me gusta hacer analogías, podríamos ver a un componente como una pieza de Lego, tiene características propias como un tamaño, un color, una forma y con ellas podríamos construir objetos basados en nuestra imaginación; algo similar pasa con un Web Component, en su interior almacena código que tendrá un comportamiento especifico en nuestra web.

lego

Imagina a un Web Component como una pieza de Lego

En nuestra analogía al unir de manera creativa varios legos podríamos construir por ejemplo un coche de juguete, un robot, etc. Igualmente, al unir varios componentes podríamos formar una aplicación web sencilla o bastante compleja.

auto-lego

Uniendo legos se puede crear por ejemplo un coche de juguete, de la misma manera uniendo varios web components podemos crear aplicaciones web.

Tipos de Web Components en Vue.js

Vue cuenta con dos tipos de componentes:

  • Componentes Locales: son archivos con extensión .vue que el navegador por sí solo no puede comprender y por ende es necesario del uso de herramientas como Web Pack. Son bastante útiles para una aplicación web escalable por su sencillez de mantenimiento.

  • Componentes Globales: No necesitan archivos con extensión .vue, pueden ser accedidos desde cualquier parte del código pero no se aconseja su uso en aplicaciones web grandes por razones de mantenimiento. Son los más sencillos de aprender y los que veremos en este tutorial.

Vamos al código 💻

Preparamos los archivos necesarios

  • Creamos un archivo index.html y otro app.js.
  • En index.html importamos el CDN de Vue.js (aconsejo usar la versión de desarrollo) y también enlazamos nuestro app.js. Tendríamos algo así: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • En app.js creamos nuestra instancia de Vue, estableciendo el alcance de la misma con un id, en mi caso id=main. 
//app.js
const vm = new Vue({
    el: '#main'
});
Enter fullscreen mode Exit fullscreen mode
  • Establecemos en index.html un div con dicho alcance. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="main">
 //alcance de Vue
</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Sintaxis básica de un componente 

Vue.component('nombre-del-componente',{
    props:['propiedades del componente'], // usualmente se usa un array
    template: 'código HTML del componente'
});
Enter fullscreen mode Exit fullscreen mode

Creación del componente

Ahora que tenemos nuestros archivos listos proseguimos a crear nuestro componente:

  • En app.js escribimos lo siguiente: 
Vue.component('picture-card',{
    props:['title', 'picture_url'],
    template: '#template-picture'
});

const vm = new Vue({
    el: '#main'
});
Enter fullscreen mode Exit fullscreen mode

Donde:
🔹 Vue.component({}) declara un nuevo componente.
🔹 picture-card es el nombre del componente.
🔹 el arreglo props engloba todas las propiedades que deseamos que tenga nuestro componente, en nuestro caso un title y una picture_url.
🔹 será la estructura HTML del componente (por motivos de clean code será declarado en index.html)

props puede ser declarado como objeto y puede existir n propiedades por componente.

¿Qué son las props?

Imaginemos una etiqueta <img> por si sola no puede hacer su trabajo, necesita obligatoriamente de su propiedad src al cual se le pasa una url absoluta o relativa, también puede tener su propiedad alt que contiene un texto alternativo si por alguna razón la imagen no carga. <img> es una etiqueta nativa de HTML, src y alt son atributos nativos; en nuestro caso tenemos un componente personalizado con sus props 'title' y 'picture_url' personalizadas también.

Un atributo de etiqueta en HTML se conoce como una props en Vue.js.

  • Ahora declaramos nuestro template en index.html y usamos nuestro componente <picture-card> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <template id="template-picture">
        <div>
            <h1>{{title}}</h1>
            <img :src="picture_url" :alt="title" width="150">
        </div>
    </template>
    <div id="main">
        <picture-card title="Hello Word" picture_url="https://images.pexels.com/photos/4394807/pexels-photo-4394807.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></picture-card>
        <picture-card title="Mi title!!" picture_url="https://images.pexels.com/photos/3841338/pexels-photo-3841338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></picture-card>
        <picture-card title="Take it!!" picture_url="https://images.pexels.com/photos/1570264/pexels-photo-1570264.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></picture-card>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
Puedes ver el código ejecutandose en el siguiente link: Componentes con Vue

Mejorando el código

En nuestro ejemplo creamos exitosamente un componente llamado <picture-card> con sus respectivas propiedades, pero imaginemos el escenario donde necesitamos utilizar nuestro componente 100 veces, sería mucho trabajo y poco práctico llamar 100 veces al mismo componente, para solucionar esto podríamos usar la directiva v-for de la siguiente manera:

En app.js creamos un array de objetos llamado pictures.

Vue.component('picture-card',{
    props:['title', 'picture_url'],
    template: '#template-picture'
});

const vm = new Vue({
    el: '#main',
    data:{
        pictures:[
            {id:1, title:'Title 1', picture_url:'https://images.pexels.com/photos/1570264/pexels-photo-1570264.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'},
            {id:2, title:'Title 2', picture_url:'https://images.pexels.com/photos/4394807/pexels-photo-4394807.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'},
            {id:3, title:'Title 3', picture_url:'https://images.pexels.com/photos/3841338/pexels-photo-3841338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}
        ]
    }
});
Enter fullscreen mode Exit fullscreen mode

Con la directiva v-for recorremos el obejeto picture y con v-bind accedemos a las propiedades el objeto enlazándolas dinámicamente.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <template id="template-picture">
        <div>
            <h1>{{title}}</h1>
            <img :src="picture_url" :alt="title" width="150">
        </div>
    </template>

    <div id="main">
        <picture-card v-for="(picture, index) in pictures" :key="index" :title="picture.title" :picture_url="picture.picture_url">
        </picture-card>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

El resultado sería el siguiente:

image

Te dejo el link al repositorio del proyecto en Github: https://github.com/crisdux/basic-component-vue2

Referencias

Conclusiones

gif
Despueés de aprender a crear tu primer componente en Vue se pueden llegar a las siguientes conclusiones:

  • La programación web basada en componentes es bastante importante en frameworks front-end modernos como Vue, React y Angular.
  • Un componente es como una pieza de lego.
  • Encapsular el código en porciones independientes y reutilizables es bastante útil y optimo
  • Vue permite crear componentes web de una manera bastante ituitiva y sencilla de comprender.
  • Las directivas en Vue son bastante poderosas.

Top comments (0)

Read next

goaqidev profile image

JSDoc: La Guía Definitiva para Documentar tu Código JavaScript

Joaquín Gutiérrez -

maulikpaghdal profile image

Optimizing React Apps with useMemo and useCallback: A Complete Guide

Maulik Paghdal -

andrew_mclean_09 profile image

anyone wanna join me building my first app?(I'm a beginner bare with me)

Andrew Mclean -

04anilr profile image

What is new feature of React version19

Anil -