Separar lógica y templates en Vuejs 2

En esta entrada vamos a ver cómo podemos separar lógica y templates en Vuejs 2 para tener más posibilidades cuando estemos desarrollando con Vue.

Nuestros componentes en Vuejs 2 normalmente contienen una template, un script y algunas veces un tag style. Dependiendo de la forma que tengas de programar te puede gustar o no, por ese motivo quiero ofrecerte la posibilidad de tener tu código separado en distintos archivos, .vue, .js y .css.

La idea es poder dividir en distintos archivos cada componente como si de piezas distintas se tratase, en lugar de tener lo siguiente:

 

Vamos a hacerlo en distintos archivos separados de la siguiente forma:

 

Para unirlo todo simplemente nos quedaría crear el archivo About.vue con el siguiente contenido:

 

Esta es una de las formas en las que podemos separar nuestros archivos en piezas sin complejas configuraciones. Es cierto que nos llenamos de archivos, pero los componentes son más sencillos.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register