Introducción

¿Qué es Vue Js?
Vue es un framework de Javascript progresivo para la generación de interfaces visuales.
Está pensado para su fácil adopción en aplicaciones pequeñas pero tiene la posibilidad de generar componentes y ser reutilizadas en proyectos medianos y grandes.

Directivas en Vue

Una directiva es un atributo de un elemento HTML que luego interpreta el framework

Las directivas en Vue siempre comienzan con "v-"

v-model
La directiva v-model asocia el dato que se ingresa en el control "input" con un atributo del modelo de datos que debe definirse luego en Javascript

El atributo "data" tiene un atributo llamado "nombre" que coincide con el valor almacenado en la directiva v-model. Esta directiva asocia en forma bidireccional la parte visual (nuestro control input) y nuestro modelo de datos.

Directivas v-if, v-else, v-else-if, v-show

Este tipo de directivas permiten definir una condición que dependiendo de su resultado la etiqueta HTML o conjunto de etiquetas se muestran o no
Por ejemplo: mostrar una etiqueta si una edad dada es mayor de 18

Si la condición resulta verdadera la etiqueta aparece, en caso contrario no se mostrará. Esto funciona incluso con parrafos completos dentro de un div

La manera de usar las directivas restantes es exactamente igual, funcionando todas en conjunto

v-show vs v-if

Las directivas v-show y v-if tienen un funcionamiento aparentemente igual, incluso tienen la misma sintaxis, sin embargo, la directiva v-show cambia la propiedad CSS display por el valor none, por lo que existe en el DOM pero no se ve en la página. Mientras que con v-if hace que el etiqueta HTML forme parte o no de la página.

v-for con arreglos y arreglos objetos

v-for con arreglos

v-for con arreglos de objetos

Captura de eventos en Vue

Eventos

Con Vue se pueden capturar todos los eventos que genere el DOM, sin embargo, también se puede ser más especifico.
Para esto se utiliza la instruccion v-on, en caso de querer filtrar se utiliza la intruccion v-on: seguido del evento a filtrar

v-on:click

Esta directiva permite registrar un click del mouse
La acción a realizar tras el click se puede especificar donde se aplica v-on:click o si se desea, llamar a una función

v-on:keypress y v-on:keyup

Con esta directiva se puede especificar a una etiqueta que capture el presionar o el soltar una tecla.
v-on:keypress para capturar el presionar una tecla, v-on:keyup para cuando se suelta una tecla.

v-on:submit

Es un tipo de evento muy usado, se usa cuando se presiona un control tipo input que toma todos los datos del formulario y los envía al servidor.

Para este tipo de evento, al capturar los datos de la página, esta misma se recargará para envíar los datos al servidor, para evitar esto se usa la intrucción v-on:submit.prevent

Formularios

Formulario con Vue

Vue permite administrar un conjunto de controles input, utiles para crear formularios.

Input Radio

El input radio sirve para identificar una opción seleccionada, cuando solamente se puede seleccionar una.

Este input no rescata los valores iniciales de un radio, por lo que se debe especificar en el modelo cuál esta seleccionada.

Input CheckBox

Los CheckBox nos ayudan a seleccionar varias opciones que pueden o no combinarse, como los ingredientes de una pizza.

Para asignar si estará o no seleccionado por default debemos almacenar en el modelo un valor true o false.

Control Select

El Select se muestra como una barra despegable con distintas opciones dentro de sí.

Es recomendable mantener la primera opción desactivada, para que así el usuario selecciones otra que podamos considerar valida.

Input TextArea

Un TextArea nos permite designar una área para que el usuario pueda ingresar texto. Se puede especificar el largo y ancho del área medidos como renglones y columnas, así como los caracteres máximos.

Algo a tener en cuenta es que la interpolación no funciona con los TextArea.