En este artículo aprenderás como escribir archivos en VUE JS, cual es su estructura y adicionalmente sabrás como manejar componentes reutilizables que permitan construir aplicaciones escalables profesionales.
Si deseas aprender a programar en Java sigue este link.
1. Escribir Archivos VUE JS
Lo primero que debes saber para escribir un archivo VUE es que este puede corresponder a una página completa o a un componente dentro de la página y que todo archivo VUE tiene tres secciones: HTML, script y estilos. El siguiente fragmento de código muestra la estructura de un archivo VUE, lo cual sirve de guía para Escribir estos Archivos VUE JS y como se verá más adelante también aplica a componentes.
<!-- #################################################################################### -->
<!-- ###### CURSO VUE ###### -->
<!-- ###### @author: ochoscar ###### -->
<!-- ###### @date: ###### -->
<!-- #################################################################################### -->
<!-- #################################################################################### -->
<!-- ###### Sección de HTML ###### -->
<!-- #################################################################################### -->
<template>
<div id="nav" class="principal">
<span>App</span>
</div>
</template>
<!-- #################################################################################### -->
<!-- ###### Sección de Script ###### -->
<!-- #################################################################################### -->
<script>
export default {
}
</script>
<!-- #################################################################################### -->
<!-- ###### Sección de Estilos ###### -->
<!-- #################################################################################### -->
<style>
</style>Estas tres secciones corresponden respectivamente a los componentes de la página web que serán mostrados en el navegador, a la sección de lógica escrita en javascript o typescript y la sección de estilos que permiten dar formatos, colores y ubicaciones a los componentes.
TIP: es importante anotar que en la sección de html debe haber una etiqueta template y dentro de esta estarán todos los componentes necesarios de la página web.
Como se aprenderá en estas secciones es muy fácil escribir lógica en VUE JS.
2. La página inicial App.vue y el index.html
Esta es la página inicial creada por VUE, pero es importante comprender que en la carpeta public existe un archivo index donde se inserta la instancia VUE, es decir, toda nuestra aplicación. Si se desea agregar contenido por fuera de VUE se puede hacer sin problema editando este archivo index.html.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>3. Creando y usando Componentes
Ahora estamos listos para crear un componente y usarlo, para ello crearemos un archivo nuevo en la carpeta components, observe que existe otra carpeta llamada views y aunque técnicamente no hay diferencia VUE las organiza así para destinar la primera a componentes reutilizables y la segunda a componentes completos de la navegación.
El componente que utilizaremos lo denominaremos entrada, asemejando una entrada o un post de cualquier red social. Este componente es muy sencillo, solamente tiene un div y un span con un texto, también se ha definido una clase de CSS que se utiliza para darle formato al div.
<!-- #################################################################################### -->
<!-- ###### Sección de HTML ###### -->
<!-- #################################################################################### -->
<template>
<div id="nav" class="principal">
<span>Entrada</span>
</div>
</template>
<!-- #################################################################################### -->
<!-- ###### Sección de Script ###### -->
<!-- #################################################################################### -->
<script>
export default {
}
</script>
<!-- #################################################################################### -->
<!-- ###### Sección de Estilos ###### -->
<!-- #################################################################################### -->
<style>
.principal {
background-color: #b93434;
padding: 10px;
color: white;
border-radius: 5px;
width: 100px;
font-size: 3rem;
text-align: center;
}
</style>Lo más interesante ocurre cuando se usa este componente en el algún otro archivo de VUE por ejemplo de App.vue.
<!-- #################################################################################### -->
<!-- ###### Sección de HTML ###### -->
<!-- #################################################################################### -->
<template>
<div id="nav" class="principal">
<span>App</span>
<Entrada></Entrada>
</div>
</template>
<!-- #################################################################################### -->
<!-- ###### Sección de Script ###### -->
<!-- #################################################################################### -->
<script>
import Entrada from '@/components/Entrada.vue'
export default {
components: { Entrada }
}
</script>Aquí es importante varios puntos:
- El uso de la @ hace referencia a la raíz de los archivos es decir a la carpeta src.
- En la sección export default (que es la instancia de VUE) tenemos el primer elemento que se usa denominado components y relaciona los diferentes componentes que usamos de otros archivos.
- En esta sección de componentes se define un objeto JSON y el valor es igual al key no hay necesidad de dejarlo explicito por lo cual no es necesario escribir Entrada: Entrada.
- Una vez definido en el script la Entrada se puede usar como etiqueta en el código en HTML.
- VUE combina los estilos de los diferentes componentes, esto obliga a tener cuidado con los nombres de clases, aunque la sección de estilos se puede anotar con el atributo scoped y de esta manera los CSS no se mezclaran.
Nuestra aplicación de VUE luce de la siguiente manera.
Deja un comentario
Lo siento, debes estar conectado para publicar un comentario.