Categoría: VUE (Página 1 de 2)

Componentes Vuetify en VUE JS

Esta sección detalla la instalación y uso de un framework de Componentes gráficos llamado Vuetify aplicado en VUE JS el cual nos permitirá diseñar nuestras aplicaciones Web de forma más ágil teniendo presente componentes prediseñados.

Para aprender a programar en Java sigue este link

En la página principal de vuetify se encuenta toda la documentación de todos los componentes y las diferentes propiedades que se requieren para hacer diseños.

Página principal de Vuetify

1. Instalación y configuración

Instalar Vuetify dentro de nuestro proyecto VUE JS es bastante sencillo, solamente debes incluirlo aprovechando que ya tenemos el comando de la consola o CLI de VUE, para hacerlo utiliza el siguiente comando.

vue add vuetify

Una vez instalado vuetify se reemplazará el archivo App.vue y HelloWorld.vue el cual contendrá ahora archivos que estan basados en vuetify. Adicionalmente cuando se instaló vuetify se creó un archivo con la configuración donde se pueden encontrar algunas propiedades generales y los nombres de los colores que se utilizarán en la aplicación. El siguiente código muestra un extracto de este archivo llamado vuetify.js el cual está ubicado en la carpeta plugins.

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
      options: {
        customProperties: true,
      },
    themes: {
      light: {
        primary: '#007BFF',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
      },
    },
  },
  icons: {
    iconfont: 'md',
  },
});

En el caso de los iconos podemos utilizar diferentes fuentes como md para Material Design o Font Awesome. En la web de vuetify se encuentran los detalles para instalar diferentes fuentes de iconos.

Instalar fuentes de iconos

2. Primeros pasos con Vuetify

En Vuetify tenemos muchos componentes y diferentes formas de aplicar estilos y maquetar nuestra aplicación en el fronted, para iniciar es importante saber que todos los componentes de vuetify comienzan con <v->. En el siguiente código se hará uso de los v-toolbar, v-toolbar-title y v-content para establecer una maquetación inicial básica de nuestra aplicación.

<template>
  <v-app>
    <v-app-bar color="primary" dark app>
        <span>{{ titulo }}</span>
    </v-app-bar>

    <v-content>
      <home />
    </v-content>
  </v-app>
</template>

<script>
import Home from '@/views/Home.vue'

export default {
  name: 'App',
  component: { Home },
  data: () => ({
    titulo: "Demo App"
  }),
};
</script>

Aquí es importante observar que el uso de la etiqueta dark permite poner el color de texto en blanco para que resalte según el color primario que estemos utilizando.

3. Maquetación

En vuetify se recomiendo seguir la siguiente jerarquia de contendores:

  • v-container: sirve para hacer la distribución de la pantalla en general.
  • v-layout: sirve para hacer alineaciones tanto de forma horizontal como vertical.
  • v-flex: que permite seleccionar las partes de la pantalla a utilizar.

En el siguiente ejemplo se muestra el uso de estos contenedores para la maquetación. Los atributos fluid y fill-height permiten que el contenedor se centre horizontalmente y que ocupe todo el alto de la página respectivamente, de forma similar aplican las opciones de layout justify-center align-center.

En cuanto a las opciones de flex, por defecto divide la pantalla en 12 casillas y podemos usar particiones entre 1 y 12 para determinar qué espacio ocupará nuestro componente. Adicional a lo anterior, existen los breakpoint que son tamaños preconfigurados: xs, sm, md, lg, xl que corresponden a tamaños de pantallas.

<template>
  <v-app>
    <v-app-bar color="primary" dark app>
        <span>{{ titulo }}</span>
    </v-app-bar>
    
    <v-main>
      <v-container>
        <create-user></create-user>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
  import CreateUser from './components/CreateUser.vue'
  
  export default {
    name: 'App',
    components: { CreateUser },
    data: () => ({
      titulo: "Demo App"
    }),
  };
</script>
<template>
  <v-layout
    justify-center
    align-center
  >
    <v-flex xs4>
      <v-card class="elevation-12">
        <v-toolbar color="primary" dark card>
          <v-toolbar-title>
            Sign Up
          </v-toolbar-title>
        </v-toolbar>
        <v-card-text>
          <v-text-field label="mail"></v-text-field>
          <v-text-field
            label="password"
            type="password"
          ></v-text-field>
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

La figura 1 muestra este ejemplo ejecutandose.

Vuetify Intro
Figura 1. Ejecución básica de Vuetify

4. Helpers

En vuetify existen diferentes ayudantes de clases que permiten realizar tareas comunes como especificar los márgenes o los padding a través de clases. Por ejemplo, si se desea hacer un margin en todos los bordes de 2 pixeles se puede usar la clase ma-2. En los siguiente link se proporciona un acceso a los helpers más comunes.

Espaciado de vuetify

Elevation

Tamaños de componentes y responsive

Fuentes para incorporar en nuestra aplicación

5. Propiedades útiles

Algunas propiedades (props) útiles son las siguientes:

  • column: aplicable a un layout indica que el layout ocupa una columna, por defecto los layout tienen la propiedad row establecida a true. Esto nos sirve para ubicar el contenido completo de un layout de forma que ocupe todo el ancho de la página.
  • wrap: aplicada a un layout permite que los componentes dentro del layout se acomoden en columnas cuando el contenido ya no quepa en una sola fila.
  • text-xs-center: alinea el texto al centro para la resolución más pequeña que sería la pantalla de un celular.
  • text-shadow: aplicable a los estilos CSS permite especificar sombras que dan estilo a los textos.

6. Artículos de Interés

Slot y Componentes dinámicos en VUE

Es común requerir que nuestra SPA (Single Page Application) requiera destinar espacios para ser llenados de forma dinámica o dependiendo de alguna condición lógica, para ello podemos usar los Slot y Componentes dinámicos en VUE que ayudan a construir nuestra página web de forma ordenada.

Para aprender backend en Java siga este vínculo

1. Uso de Slot y llenado de espacios en VUE

Los slot permiten definir espacios en nuestros componentes que serán especificados como se llenarán desde el componente padre que utilice importe el componente hijo, de esta forma el padre puede indicar como llenar un espacio HTML al hijo dando gran versatilidad ya que el mismo componente puede tener un espacio que es llenado de forma diferente en función del padre donde se encuentre importado.

Crear un slot es algo muy simple y consta de dos pasos, el primero es definir en el componente hijo la zona HTML que dedicaremos para que quien use el componente lo defina. Esto se muestra en el siguiente código.

<template>
    <div>
      <transition name="efecto" mode="out-in">
        <div id="nav" class="tarjeta" :key="indice">
          <span :key="indice" > {{ datos[indice] }} </span>
        </div>
      </transition>
      <div>
        <slot name="slot1"></slot>
      </div>
    </div>
  </template>

El segundo paso consiste en especificar la sección HTML que llenará el slot en el lugar donde se use este componente hijo. El siguiente código muestra un ejemplo de esta especificación. Observe que el nombre del slot en este caso se usa sin comillas.

<template>
  <div id="nav" class="principal">
    <span>App </span>
    <span>{{ login }}</span>
    <br/>
    <span>Age {{ age }}</span>
    <tarjeta-datos>
      <template v-slot:slot1>
        <span>Componente en Slot</span>
      </template>
    </tarjeta-datos>
  </div>
</template>

2. Manejo de Componentes dinámicos en VUE

Para especificar un componente dinámico en VUE es suficiente con utilizar la etiqueta component y especificar en su atributo is cuál será el componente que se utilizará, esto resulta equivalente a dejar el componente fijo en el código pero con la ventaja que podemos utilizar una variable de la data para establecer el valor del componente y lograr que este cambie en función del valor de la variable.

En el ejemplo siguiente vemos como la variable actual, recibe el valor del nombre del componente, tenga presente que de cualquier manera el nombre del componente debe ser el mismo que se vaya a utilizar en el HTML y que debe ser previamente importado y definido en la sección components de la instancia de VUE.

<component :is="actual"></component>
import TarjetaDatos from './components/TarjetaDatos.vue';

export default {
  components: { TarjetaDatos },
  name: 'App',
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3),
      actual: 'tarjeta-datos'
    }
  },

3. Artículos de Interés

Animaciones usando keyframes CSS

Cuando programamos en el front indiscutiblemente es necesario aprender a generar animaciones que mejoren la experiencia del usuario, en la sección de transiciones vimos como podemos manejar efectos para la aparición de elementos, estas transiciones se complementan muy bien cuando utilizamos Animaciones usando Keyframes CSS que permitiran una flexibilidad completa en nuestra animación

Para aprender backend en Java siga este vínculo

1. Definición de estilos de animación keyframes CSS

Lo primero antes de construir nuestras Animaciones es definir las keyframes CSS, lo cual es muy simple, tan solo con utilizar la etiqueta @keyframes indicar un nombre y definir los estados inicial y final de nuestra animación, tal como se muestra en el código de la siguiente sección.

@keyframes efecto-in {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Aquí es importante notar que existen muchas transformaciones y que la que se ha escogido en este ejemplo recibe un valor de 1 o 0 equivalente a 100% o 0%.

2. Agregado de Animaciones usando keyframes CSS a las transiciones

Para que nuestros @keyframes se puedan usar como animaciones es necesario asociarlos a las transiciones de forma muy similar a como se definió la propia transición.

.efecto-enter {
  opacity: 0;
}

.efecto-enter-active {
  transition: opacity 1s ease-out;
  animation: efecto-in 0.4s ease-out forwards;
}

.efecto-leave-active {
  transition: opacity 0.5s ease-out;
  animation: efecto-out 0.2s ease-out forwards;
  opacity: 0;
}

Note que la transición de salida leave-active debe especificar en este caso el valor de la propiedad opacity. Adicionalmente que la animación estar repetida en bucles infinitos y para evitarlo se hace uso de la directiva forwards.

Finalmente, a nivel del HTML se da un cambio pequeño en el cual podamos animar por completo el div que contiene la información, a su vez este div ( o el elemento sobre el que recaiga la animación debe tener un id para poder aplicarlo.

<transition name="efecto" mode="out-in">
  <div id="nav" class="tarjeta" :key="indice">
    <span :key="indice" > {{ datos[indice] }} </span>
  </div>
</transition>

3. Especificación de propiedades según avance de animación

Un último punto útil cuando hacemos animaciones usando @keyframes CSS es que podemos especificar diferentes valores del avance de la animación, cuando hemos usado from y to estos se entienden como 0% y 100% respectivamente, pero podemos especificarlo explicitamente y así indicar un valor de avance de la transformación a medida que la animación ocurre.

En el siguiente ejemplo se exagera un poco la transformación en Y justo antes que llegue que termine la animación.

@keyframes efecto-in {
  0% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1.4);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes efecto-out {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

Estéticamente, estas animaciones exageradas deben usarse con cuidado en sitios específicos y aplicarlas una sola vez para que no cansen al usuario y su experiencia no se vea impactada.

4. Artículos de Interés

Transiciones y animaciones en VUE

A continuación se explican como se puede lograr las Transiciones y Animaciones en VUE a fin que nuestra página o aplicación sea más reactiva y nos permita interactuar con el usuario mejorando su experiencia.

Para aprender backend en Java siga este vínculo

1. Transiciones y animaciones en VUE

Las transiciones y animaciones permiten definir como un componente aparece en pantalla o como desaparee, también se puede programar esta animación cuando el componente se actualiza según el ciclo de vida de los componentes en VUE.

TransicionesVUE
Figura 1. Estados de las animaciones en VUE

La figura 1, muestra el esquema general de lo que sucede cuando se actualiza un componente en el cual se aprecia que el componente pasa de un estado enter a un estado stay este último es en el que permanece mientras no se actualiza el componente, finalmente cuando se actualiza pasa a un estado Leave.

Para que nuestras Transiciones y animaciones en VUE queden estéticamente agradables es importante que la animación comience lento y luego se acelere y luego termine lento, lo anterior se aprecia en la curva que une los estados en la figura 1.

2. Programando los estilos de transiciones

Para programar las Transiciones y animaciones en VUE es necesario crear cuatro estilos que controlaran los diferentes estados y transiciones descritos en la figura 1 y los cuales se pueden apreciar en CSS en el código siguiente.

Estos estilos llevaran un nombre inicial y terminaran con el nombre del estado o transición correspondiente, este nombre inicial es importante porque con el nos referiremos en la sección HTML.

    .efecto-enter {
      opacity: 0;
    }

    .efecto-enter-active {
      transition: opacity 1s ease-out;
    }

    .efecto-leave-active {
      transition: opacity 0.5s ease-out;
      opacity: 0;
    }

    .efecto-leave {
    }

Los estilos inician con una propiedad (o varias) que serán modificadas, note que el el efecto efecto-enter-active no especifica un valor final de la propiedad opacity con lo cual se entiende que este valor será el valor por defecto 1, cosa contraria en el siguiente estilo efecto-leave-active en el cual si se especifica el valor final de la propiedad

3. Aplicando los estilos de transiciones y animaciones en VUE al HTML

Una vez se definieron los estilos debemos incluir en nuestro HTML un sección de transición indicando el nombre del efecto y un modo de aplicación.

En este ejemplo el contenido del span estará cambiando con lo cual es importante que definamos un key que identifique el objeto que cambia y así la etiqueta transition pueda identificarlo.

      <transition name="efecto" mode="out-in">
        <span :key="indice" > {{ datos[indice] }} </span>
      </transition>

Para cambiar el contenido y rotar un mensaje simplemente definimos en el script una función que se ejecuta a intervalos periódicos y que cambia el valor de un índice con el que nos referimos al dato que queremos mostrar en el render declarativo del span.

  <script>
  export default {
    name: 'TarjetaDatos',
    data() {
      return {
        datos: ['VUE', 'React', 'Java', 'Node'],
        indice: 0
      }
    },
    methods: {
      rotarMensaje() {
        this.indice++;
        if(this.indice == this.datos.length) {
          this.indice = 0;
        }
      }
    },
    mounted() {
      setInterval(this.rotarMensaje, 2500);
    }
  }
  </script>

4. Artículos de Interés

Modelo MVVM Propiedades Directivas y Eventos en VUE

Este artículo comienza explicando el Modelo MVVM y luego muestra las Propiedades Directivas y Eventos de los Componentes en VUE lo cual puede ser una guía rápida y muy útil para programar y tener en cuenta las diferentes opciones que el programador del front end tiene.

Si deseas aprender sobre programación en Java sigue este link.

1. Modelo MVVM

El Modelo – Vista – Vista Modelo MVVM de VUE establece diferentes mecanismos de comunicación usando Propiedades Directivas y Eventos entre la lógica y especialmente los datos contenidos en la sección data de la instancia de VUE y los elementos de la vista. De esta forma se tienen 4 posibles mecanismos definidos para comunicarnos entre estos dos elementos (datos y elementos de la página web)

  • Una vez: este mecanismo determina que un dato se utiliza en los componentes HTML o DOM de la página web una sola vez, de esta forma si el dato cambia no se vera reflejado en la página web.
  • Una dirección: este mecanismo implica que un dato se utiliza en los componentes HTML o DOM de la página web y cada vez que el dato cambie, normalmente por instrucciones en la lógica JS este cambio se vera reflejado o refrescado en la página web.
  • Invertido: este mecanismo implica que un dato de la página web puede refrescarse o actualizarse en una variable que se tenga en la sección de JS, un buen ejemplo de esto ocurre en los formularios en los cuales el usuario ingresa información y esta será requerida en la lógica para realizar algún proceso como validaciones o envío al back end para el procesamiento.
  • Dos direcciones o bidireccional: los datos en esta modalidad de comunicación serán actualizados en la página web y en el javascript, de tal forma que un cambio se vea reflejado en tanto en la lógica como en el HTML o viceversa.

2. Propiedades Directivas y Eventos de los Componentes en VUE

2.1. Directivas v-once

Esta es una de las Propiedades de los Componentes en VUE de la sección HTML indica a la instancia de VUE que la etiqueta se muestre solo una vez por lo cual es muy útil para depurar. De esta manera, aunque existan actualizaciones de las variables estas no serán tenidas en cuenta y no se actualizará el componente a excepción de la primera vez.

<span v-once>Entrada</span>

2.2. Directivas v-bind

Esta es otra de las Propiedad de de los Componentes en VUE y permite actualizar datos de la vista, recuerde que también se realizó con el render declarativo, pero v-bind permite enlazar data a atributos de HTML.

En la sección HTML del siguiente ejemplo se muestra como vincular en atributo src de una etiqueta img a una variable de forma que el atributo sea dinámico, note que el uso de v-bind es opcional y se puede simplificar significativamente usando solo dos puntos.

Algo muy importante del v-bind es que se puede usar para propiedades como el class que define el estilo CSS aplicado a una etiqueta, esto permite programáticamente cambiar los estilos usando variables que contengan el nombre de la clase CSS que queremos aplicar a la etiqueta.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span v-once>Entrada</span>
      <img v-bind:src="imagen"></img>
      <img :src="imagen"></img>
    </div>
  </template>
  
  <!-- #################################################################################### -->
  <!-- ###### Sección de Script                                                      ###### -->
  <!-- #################################################################################### -->
  <script>
  export default {
    name: 'Entrada',
    data() {
      return {
        imagen: 'https://www.ochoscar.com/wp-content/uploads/2022/08/cropped-cropped-logoh-transparente.png'
      }
    }
  }
  </script>

2.3. Directivas v-on

La Propiedad maneja Eventos de los Componentes en VUE, v-on nos va a permitir capturar eventos de los elementos HTML y procesarlos a través de métodos de JavaScript. En el siguiente ejemplo se muestra como hacerlo.

Un punto importante y muy usado es que similarmente a como sucedia con v-bind en el caso de v-on se puede abreviar usando @ de esta manera no es necesario escribir v-on: sino que en su lugar simplemente se escribe la @

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span v-once>Entrada</span>
      <button v-on:click="processClick()">click me</button>
    </div>
  </template>
  
  <!-- #################################################################################### -->
  <!-- ###### Sección de Script                                                      ###### -->
  <!-- #################################################################################### -->
  <script>
  export default {
    name: 'Entrada',
    methods: {
      processClick() {
        console.log("click en boton")
      }
    }
  }
  </script>

Otros eventos que son muy útiles y normalmente utilizados son:

  • mousemove: sucede cuando el mouse pasa por encima del componente.
  • mousedown: sucede cuando el click principal del mouse se presiona.
  • mouseup: sucede cuando el click principal del mouse se suelta.
  • keydown: ocurre cuando se presiona una tecla.
  • keyup: ocurre cuando se suelta una tecla.

Es importante anotar que todos los métodos que procesan eventos pueden recibir, aunqque no se especifique en la sección HTML, un parámetro denominado event con la información del evento, por ejemplo la posición del mouse o el texto de una caja de texto.

Los modificadores de eventos también nos van a permitir dar un comportamiento más particular, para ello solamente es indicar después del evento el modificador, por ejemplo @keyup.enter solamente se disparará el evento si la tecla es enter, o por ejemplo @mousedown.left para controlar un click derecho, en este último caso será conveniente agregar al componente @contextmenu.prevent para evitar procesar el menú contextual del navegador.

2.4. Directivas ref y refs

Esta directiva nos permite referencia componentes de HTML en la sección de JavaScript a fin de poder modificar alguna de sus propiedades.

Esto se logra dando un valor al atributo ref de los componentes HTML y luego para su uso en JavaScript podemos acceder al conjunto de todas las referencias usnaod this.$refs, como se muestra en el ejemplo siguiente, en el cual tenemos un canvas en el lado de HTML y el mismo lo podemos obtener en el lado JavaScript para realizar alguna acción con el mismo.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span v-once>Entrada</span>
      <canvas ref="canvas"></canvas>
    </div>
  </template>
  
  <!-- #################################################################################### -->
  <!-- ###### Sección de Script                                                      ###### -->
  <!-- #################################################################################### -->
  <script>
  export default {
    name: 'Entrada',
    data() {
      return {
        canvasContext: null
      }
    },
    mounted() {
      canvasContext = this.$refs.canvas.getContext('2d');

      // set strokeSyle (color) y lineWidth
    },
    methods: {
      processClick() {
        console.log("click en boton")
      }
    }
  }
  </script>

2.7. Directivas v-model

La directiva v-model permite la comunicación bidireccional que se vio en el Modelo MVVM y establecer Propiedades y Eventos de VUE. En este caso un cambio en HTML se verá reflejado en la data asociada con v-model y viceversa.

En el siguiente ejemplo se muestra una variable de data vinculada con v-model en el HTML.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span >Entrada</span>
      <input v-model="email">
    </div>
</template>
  
<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {
	name: 'Entrada',
	data() {
		return {
			email
		}
	}
}
</script>

2.8. Directivas props

Los props es un atributo muy conveniente porque permite que en el momento de agregar un componente hecho por nosotros podamos recibir valores del componente padre donde se está insertando el componente hijo. En el siguiente ejemplo se recibe un valor del email desde un componente padre donde se inserta el componente Entrada.

Algunas cosas importante por observar es que el props es un arreglo con los nombres de las propiedades que serán enviadas, lo segundo es que en el momento de enviar el valor se usa v-bind como se aprendió anteriormente. Observe también que la propiedad se comporta como si fuera una etiqueta más de la etiqueta HTML y que la misma va a funcionar como si fuera una variable que estuviera en data.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span >Entrada</span>
      <input v-model="email">
    </div>
</template>
  
<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {
	name: 'Entrada',
	props: ['attrEmail'],
	data() {
		return {
			email
		}
	}
}
</script>
<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
  <div id="app">
    <entrada :attrEmail="email"></entrada>
  </div>
</template>

<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
import Usuario from '@/views/Usuario.vue'
import Entrada from '@/views/Entrada.vue'

export default {
  name: 'App',
  components: { Usuario, Entrada },
  data() {
    return {
      email: "user@email.com"
    }
  }
}
</script>

2.9. Directivas $emit

Emit permite realizar la comunicación inversa que realiza prop, es decir de los hijos al padre, en este caso la directiva emit nos permitirá lanzar eventos que serán escuchados por el padre.

El siguiente código muestra un evento capturado en el padre y lanzado desde el hijo. En el momento de disparar el evento llamando a emit este recibe dos parametros, el primero es el nombre del evento y el segundo es el nombre del evento a disparar y el segundo el valor.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span >Entrada</span>
      <input v-model="email" @keyup.enter="actualizar" type="text">
    </div>
</template>
  
<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {
	name: 'Entrada',
	props: ['attrEmail'],
	data() {
		return {
			email
		}
	},
	methods: {
		actualizar(event) {
			this.$emit("onChange", this.email);
		}
	}
}
</script>
<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
  <div id="app">
    <entrada :attrEmail="email" @onChange="change"></entrada>
  </div>
</template>

<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
import Usuario from '@/views/Usuario.vue'
import Entrada from '@/views/Entrada.vue'

export default {
  name: 'App',
  components: { Usuario, Entrada },
  data() {
    return {
      email: "user@email.com"
    }
  },
  methods: {
    change(param) {
      console.log("change" + param)
    }
  }
}
</script>

2.10. Directivas v-watch

Esta directiva nos permitirá observar una variable en particular y ejecutar un código cuando esta cambie. Normalmente se observan variables de data, pero se puede observar cualquiera, ya sea de data, de props o de la instancia VUE.

Para observar una variable, es suficiente con declarar en la sección watch un método con exactamente el mismo nombre de la variable como se muestra en el siguiente ejemplo. En el método que trata el cambio se pueden recibir el newValue y el oldValue para realizar comprobaciones y acciones en el momento del cambio.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span >Entrada</span>
      <input v-model="email" @keyup.enter="actualizar" type="text">
    </div>
</template>
  
<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {
	name: 'Entrada',
	props: ['attrEmail'],
	data() {
		return {
			email
		}
	},
	methods: {
		actualizar(event) {
			this.$emit("onChange", this.email);
		}
	},
	watch: {
		attrEmail(newValue, oldValue) {
			console.log(this.attrEmail)
		}
	}
}
</script>

2.11. Directivas v-if y v-show

Esta directiva nos permite mostrar o ocultar elementos de acuerdo a condiciones. Opcionalmente también existe v-else-if y v-else que permiten armar una secuencia de comprobaciones para facilitar la comprobación. Es importante observar que estas condiciones son siempre booleanas y que se pueden definir en la misma sección del atributo HTML.

La directiva v-show es similar a v-if, la diferencia es que utiliza CSS para ocultar o mostrar los elementos en lugar de crearlos o destruirlos del DOM como si lo hace v-if, en general v-show puede ser mejor en términos de recursos de la máquina, sin embargo se pueden visualizar en el DOM si se inspecciona la página.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span v-if="condicion">Entrada</span>
    </div>
</template>
  
<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {
	name: 'Entrada',
	data() {
		return {
			condicion: true
		}
	}
}
</script>

2.12. Directivas v-for

Esta directiva nos permitirá crear elementos HTML desde una lista que tengamos en la lógica. Aquí hay varias cosas importante que anotar, la primera es que en el for se recorrerá con dos variables, la primera que captura el valor del array y la segunda un índice que servirá como key del botón, este key es indispensable definirlo puesto que tendremos varios botones y es necesario diferenciarlos.

Observe también que habiendo construido los botones con los valores del arreglo y con un índice como clave se pueden enviar a un método que procese los eventos de click enviando el identificador del botón para diferenciarlos en el momento de procesar la lógica.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span>Entrada</span>
	  <button @click="buttonClick(elemento, i)" v-for="(elemento, i) in elementos" :key="i">{{ elemento }}</button>
    </div>
</template>
  
<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {
	name: 'Entrada',
	data() {
		return {
			elementos: ['OBJ1', 'OBJ2', 'OBJ3', 'OBJ4', 'OBJ5']
		}
	},
	methods: {
		buttonClick(elemento, i) {
			console.log("click en: " + elemento + " " + i)
		}
	}
}
</script>

3. Artículos de Interés

Hooks y Ciclo de Vida de Componentes en VUE

Cuando programamos en VUE es importante conocer los Hooks y Ciclo de Vida de Componentes que permiten realizar acciones en los diferentes momentos de la ejecución de un programa, en este artículo se muestra todo lo que tienes que saber para dominar los diferentes hooks de VUE.

Si quieres aprender a programar en Java sigue este link.

1. Ciclo de Vida de los Componentes

En la siguiente imagen se puede observar los diferentes estados de un componente en VUE.

ciclovidavue
Figura 1. Ciclo de vida de componentes

Siempre que VUE carga un componente sigue este patrón, y puede observar como cada estado esta precedido de uno anterior llamado before, por ejemplo antes de ser creado un componente se leen los datos y antes de ser montado se lee la plantilla o template, de forma similar y quizás el más importante por comprender es que antes que se actualicen los datos estos serán actualizados en el DOM o página web. y el ciclo en la actualización ocurre cada vez que un dato es cambiado, por eso la sección de data es tan importante porque las variables que se definen allí permiten cambiar el estado de los componentes y refrescarlos en la página web.

2. Hooks disponibles en los Componentes

Cada uno de los estados del ciclo de vida de los componentes en VUE tiene un hook, en este caso un método especial que es definido al mismo nivel de la data, el nombre o los métodos y que hace parte de la instancia de VUE como tal, estos métodos pueden ser sobreescritos ya sea uno o varios para cambiar el comportamiento o definir acciones que se quieran realizar en alguno de los momentos en el Ciclo de Vida de los Componentes en VUE.

El siguiente código muestra la sección de script de un componente VUE con la definición de todos los Hooks.

  <script>
  export default {
    name: 'Entrada',
    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    },
    beforeUpdate() {  
      console.log('beforeUpdate');
    },
    updated(){
      console.log('updated');
    },
    beforeDestroy() {
      console.log('beforeDestroy');
    },
    destroyed() {
      console.log('destroyed');
    }
  }
  </script>

3. Artículos de Interés

Data Computed Methods y Render Declarativo en VUE

En este artículo exploraremos las principales secciones de la instancia de VUE como son la Sección Data Computed Methods y Render Declarativo en VUE y sae explicara el uso de cada uno de ellos en la construcción de aplicaciones frontend.

Si quieres aprender a programar en backend java sigue este enlace.

1. Atributo name

El atributo name se configura en la instancia de VUE y permite identificar el componente, esto es especialmente útil en el momento en que se visualiza en el depurador como vue devtools.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada }
}
</script>

2. Función Data

Vamos a iniciar en este estudio de Data Computed Methods y Render Declarativo en VUE por la función Data permite devovler valores a la vista y utilizarlos para su procesamiento, se puede entender como un conjunto de variables que serán utilizadas entre la sección HTML y la sección script y que permitirán escribir la lógica de nuestra aplicación. En el siguiente fragmento de código se muestran algunas variables que se han definido, note también como estas variables deben obligatoriamente construirse como un JSON que será devuelto por la función data y que estas variables pueden ser de diferentes tipos por ejemplo textos o números.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      age: 30
    }
  }
}
</script>

3. Render Declarativo

Teniendo en cuenta que la función data devuelve un JSON con información que podemos utilizar en la sección HTML existe una forma muy sencilla de poder incrustar los valores de estas variables en algún punto de nuestra página web, para ello basta con usar el denominado Render Declarativo que consta de un par de llaves y la interior de estas el nombre de la propiedad del JSON devuelto por data, siguiendo el ejemplo anterior a continuación se muestra la sección HTML en la cual se usa el valor de la propiedad login.

<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <Entrada></Entrada>
  </div>
</template>

4. Métodos Computed

Similar a la sección Data, la sección Computed en VUE permitirá de forma muy similar a las propiedades de data, devolver un valor producto de algún calculo necesario. Supongamos el calculo de la edad, para lo cual a la fecha actual debemos restar la fecha de nacimiento, esto se logra de forma muy sencilla estableciendo una función, que a la larga será una función tipo get, en la sección computed de la instancia de VUE.

El código siguiente muestra tanto la sección javascript como la sección HTML. Algo que también es importante y se puede apreciar en este ejemplo es que cuando usamos variables de data en las sección javascript debemos usar la palabra this, a diferencia de lo que ocurre en la sección HTML en donde no es necesario el uso de esta palabra clave.

Note también que para hacer uso de un método computed basta usarlo como si fuera una propiedad de la data, tal como se vio en la sección anterior.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>
<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <span>Age {{ age }}</span>
    <Entrada></Entrada>
  </div>
</template>

Otro ejemplo de método Computed en VUE permite mostrar algunas de las características de manipulación de texto, en el cual podemos usar el comodín $ y llaves para hacer referencia a una variable y facilitar las concatenaciones de texto.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>

5. Methods personalizados en VUE

La sección Methods en VUE son muy parecidos a las funciones de Computed o Data solamente que usamos estos de forma más extendida para realizar operaciones, recibir datos y procesarlos y dividir en general los algoritmos en trozos más manejables.

En el siguiente código se muestra un ejemplo de un método utilizado para calcular la edad pero en esta ocasión recibiendo un parámetro.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  },
  methods: {
    computedAge(date) {
      let currentDate = new Date();
      let diff = currentDate - date;
      return diff;
    }
  }
}
</script>

6. Artículos de Interés

Depuración de código en VUE

La Depuración de Código en VUE JS es muy importante puesto que permite encontrar errores de forma rápida y incluso obtener una mejor compresión del funcionamiento de tu página web. Algo paradojico es que la mayoría de personas que programan en el front end no saben realizar depuración (debug) ya que resulta más común realizar depuración a nivel de backend, sin embargo las herramientas disponibles para depurar en back son practicamente las mismas que en el front.

Si quieres aprender a programar en Java sigue este enlace.

1. Qué es depurar?

La Depuración es la técnica con la cual los programadores encuentran errores en su código, estas herramienta permite que el programador detenga la ejecución en un punto del código y revise valores de variables e incluso ejecute el programa paso a paso a fin de observar que esta haciendo el código, que bifurcaciones esta tomando o cuantas veces se esta repitiendo un ciclo.

2. Instalación de VUE Devtools

Lo primero que debemos hacer para depurar en VUE es descargar una extensión, en estas páginas se manejará el navegador Gooogle Chrome, sin embargo cualquier otro navegador como Firefrox o Edge podrá servir para depurar.

En este link puedes encontrar el enlace directo para descargar la extensión vue.js devtools

vuejs devtools
Figura 1. vuejs devtools

Una vez instalado podrás encontrar todas las opciones de depuración cuando trabajes con tus páginas en VUE.

3. Usar vuejs devtools

Una vez instalado vue js devtools, y estando en una página vue podemos abrir las herramientas de desarrollador de Chrome, aunque hay muchas formas una sencilla y rápida es simplemente dar click derecho y elegir la opción Inspeccionar, lo cual abre las herramientas de depuración y podemos ubicarnos en la pestaña VUE para las diferentes opciones de VUE.

Figura 2. Opciones de depuración de VUE

En esta pestaña se puede tener acceso a las siguientes herramientas:

  • Inspector: permite ver las opciones de componentes, vuex y routes de la aplicación vue.
  • Timeline: muestra la ejecución de métodos y de eventos que se han generado en la aplicación.
  • Components: muestra la jerarquía de componentes de la página y permite entender su distribución a fin de determinar si la página esta correctamente creada.
  • Vuex: este es el almacén de datos de nuestra aplicación VUE que nos permite también interactuar con algunos métodos y lógica necesaria en nuestra aplicación.
  • Routes: permite ver las rutas de la aplicación a fin d determinar que la navegación esta bien diseñada y funciona correctamente.

4. Otras opciones de depuración

Las opciones anteriores de VUE se pueden mezclar con las opciones tradicionales de depuración y herramientas de desarrollo de Chrome, algunas de las más importantes y su funcionalidad son las siguientes.

4.1. Elements

Esta pestaña permite visualizar el contenido HTML que se esta mostrando en la página web, lo más interesante aquí es que nos podemos ubicar en una parte de la página para navegar directamente al HTML o al revés pararnos en una parte del HTML y visualizar el componente en la página el cual se iluminará. También podemos cambiar el contenido del HTML o de los CSS y ver como se comportan en la página, esto último es muy útil puesto que luego podemos volver sobre nuestro código e incorporar los ajustes que hayamos hecho en esta pestaña del devtools.

devtools-elements
Figura 3. Elements devtoosl

4.2. Console

La consola nos permite ejecutar código javascript, inspeccionar variables y sobre todo observar mensajes que este dejando la aplicción, por esto los programadores habitualmente dejan mensajes en la consola y pueden verificar si la aplicación esta realizando lo que se espera.

devtools-console
Figura 4. Consola de devtools

4.3. Network

La sección de red es muy importante puesto que muestra todas las peticiones que la página intercambia, aquí podemos visualizar la forma en que se realizan las peticiones incluyendo los encabezados y las respeustas que da el servidor para cada petición, también es muy útil para saber si la página esta pidiendo la información correcta y si el servidor esta entregando lo esperado. Otro uso útil de esta pestaña es verificar los tiempos y tamaños de las peticiones así sabremos si una petición esta poniendo lenta la página. Finalmente, la información que arroja esta pestaña sirve para determinar aspectos de seguridad como que la información obtenida no tenga datos sensibles o información adicional que no se este requiriendo.

En la red, también existe una posibilidad muy útil y es trabajar sin cache, lo anterior implica que todas las peticiones van a ir directamente al servidor en lugar de buscar las respuestas de estas peticiones en la memoria cache del navegador, para dar un poco más de detalle de esto, sucede que cuando se realiza una petición el navegador guarda la petición y su respuesta en una memoria llamada cache, de esta forma la próxima petición la podrá resolver directamente de esta memoria sin necesidad de ir al servidor, lo anterior ayuda muchísimo con los tiempos de respuesta de las páginas web, pero puede ser un poco molesto si en realidad se necesita que los datos vengan del servidor, habitualmente las páginas web cambian un poco las peticiones o agregan parámetros para obligar al navegador a realizar la petición contra el servidor y no contra la caché.

devtools-network
Figura 5. Network devtools

4.4. Sources

La pestaña de sources nos va a servir para visualizar nuestros archivos js, y poner puntos de interrupción, visualizar valores de variables o ejecutar pasos a paso los scripts, por lo tanto estas opciones también son muy útiles para los programadores cuando depuran en código.

devtools-sources
Figura 6. Sources en devtools
devtools-sourcesdebug
Figura 7. Debug en devtools

4.5. Otras pestañas y generalidades de devtools

En devtools existen más pestañas por ejemplo para revisar detalles de rendimiento de nuestra página, de la memoria, de seguridad, de la informaición que nuestra página almacena en bases de datos locales o localstorage y muchas otras funcionalidades que resultan útiles para el programador.

Una observación final es que Chrome ya viene por defecto con estas herramientas la única que debemos instalar es la que se anoto al principio del artículo que es un complemento de devtools para VUE.

5. Artículos de Interés

Escribir Archivos VUE JS y Componentes

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.

appvue
Figura 1. Aplicación VUE

4. Artículos de Interés

Hola Mundo en VUE

En esta página encontrarás una guía del paso a paso para lograr un proyecto básico de Hola Mundo en VUE, espero que sea de toda la utilidad y que sirva como punto de inicio para aprender temas más avanzados.

Si quieres aprender Java sigue este link.

1. Crear el proyecto

Crear un proyecto Hola Mundo en VUE es muy simple puesto que existe un wizard que nos guía hacia la construcción del proyecto.

El comando para crear el proyecto es el siguiente:

vue create nombre-proyecto

Para este tutorial el nombre del proyecto será: proyecto-vue

Este comando se puede ejecutar sobre una carpeta vacía para que allí se cree el proyecto, se puede hacer abriendo una terminal o una consola o también sobre una ventana de terminal de visual studio.

El wizard tiene dos opciones, por defecto o manual.

Primer paso de creación de proyecto
Figura 1. Primer paso de creación de proyecto

En un segundo paso debes elegir las opciones mínimas, las cuales se recomiendan sean las siguientes, note que no se eligió typescript por lo cual se usará javascript.

Selección de características de VUE
Figura 2. Selección de características de VUE

El tercer paso implica seleccionar el modo de navegación, para ello lo más conveniente en este punto es seleccionar si, más adelante en el apartado de router.js se entrará en detalles de la navegación.

Figura 3. Selección del modo historia

El cuarto paso, implica seleccionar el nivel de errores de compilación de JS, para efectos de calidad de código se sugiere dejar la opción por defecto.

Seleccionar la corrección de errores en JS
Figura 4. Seleccionar la corrección de errores en JS

El quinto paso, implica seleccionar el modo de grabación del analizador de código javascript, se sugiere dejar la opción por defecto.

Seleccionar opciones del analizador de código
Figura 5. Seleccionar opciones del analizador de código

El sexto paso, consiste en decidir el tipo de empaquetamiento de las preferencias del proyecto, se sugiere dejar en un archivo donde se encuentren todas las opciones, este archivo se llama package.json

Empaquetamiento de preferencias del proyecto
Figura 6. Empaquetamiento de preferencias del proyecto

El séptimo paso, simplemente consiste en decidir si esta configuración se quiere nombrar para que en un próximo proyecto se utilice de forma rápida, en este caso no se guardará la configuración.

Salvar preferencias para futuros proyectos
Figura 7. Salvar preferencias para futuros proyectos

Con esto finaliza la creación del proyecto, el wizard continuará con la descarga y configuración interna del proyecto. En caso que se tenga algún error se deberá verificar los log que arroja el sistema.

Una vez terminado debes seleccionar en el menú de Visual Studio la opción “Add Folder to Workspace” y buscar la carpeta donde se creó el proyecto para poder ver, crear y editar los archivos del proyecto. Con esto ya has generado el proyecto Hola Mundo en VUE.

2. Carpetas y estructura del proyecto

El proyecto Hola Mundo en VUE creado termina teniendo la siguiente estructura:

Estructura del proyecto VUE
Figura 8. Estructura del proyecto VUE

Aquí se aprecia las siguientes secciones:

  • node_modules: corresponde a todas las librerías del proyecto y que se generan automáticamente, si estás usando un repositorio como git, esta carpeta no la debes subir al repositorio.
  • public: contiene los archivos que son públicos y que se acceden con rutas del servidor desde el navegador, incluso aquí esta el index.html donde se inserta la instancia de VUE.
  • src/assets: son los artefactos como imágenes o archivos multimedia que se utilicen dentro de la aplicación.
  • src/components: se almacenan componentes de VUE reutilizables que serán utilizados dentro de vistas completas de VUE.
  • src/router: contiene los archivos que indican las condiciones y configuraciones de rutas y navegación.
  • src/store: contiene los archivos js con las variables que se usan por la aplicación y donde se pueden consultar operaciones y datos que la aplicación o un módulo de ella utilice.
  • src/views: contiene las vistas que normalmente refieren a módulos o páginas completas de la aplicación
  • archivos: el resto de archivos son archivos de configuración del proyecto, excepto el App.vue que es el punto de entrada de la aplicación.

3. El main.js

El archivo main.js contiene la creación en js de la creación de la instancia de VUE que se inserta en el archivo index.html, este archivo puede ser modificado para incluir instrucciones particulares que ejecuten en el momento de la carga.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. El router.js

El archivo de router.js contiene la navegación y rutas de navegación, es usual encontrar en este archivo instrucciones que limiten la navegación dependiendo de roles o perfiles. El archivo básico solo contiene instrucciones generales de navegación.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

5. El store.js

El store.js contiene la información que es almacenada para procesamiento de la aplicación y consiste de varios elementos que se explorarán más adelante entre ellos los conocidos como state, mutations, actions y modules.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

6. Estructura de un archivo VUE

Finalmente un archivo de VUE se divide en 3 partes muy importantes y es aquí donde la mayoría de la programación ocurre. Las tres partes es HTML marcado con la etiqueta template y que corresponde a componentes de la vista en el navegador, la siguiente sección es la de script donde se encuentra toda la lógica de la página y finalmente la parte de estilos marcadas con la etiqueta style donde se encuentra las instrucciones para pintar la página.

Estas tres secciones son las que se ha venido hablando correspondiente a HTML, JS y CSS

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

7. Corriendo la aplicación

Ahora para poner a correr el servidor en el archivo README.md se tienen los diferentes comandos, incluyendo algunos muy útiles como para instalar el proyecto cuando se realiza la clonación del proyecto desde un repositorio. Para correr se debe utilizar el comando:

npm run serve

Una vez se ejecuta este comando desde la carpeta donde se creo el proyecto se abre la página web localhost:8080 donde corre por defecto VUE. A continuación se muestra esta aplicación hola mundo!

Aplicación corriendo
Figura 9. Aplicación corriendo

8. Artículos de Interés

« Entradas anteriores

© 2024 ochoscar's blog

Tema por Anders NorenArriba ↑