Vue - Introducción
Vue es un framework JavaScript opensource progresivo. Vue se enfoca en la capa de la vista, su facilidad de integración para el desarrollo front-end es una de sus grandes características.
Vue es desarrollado por Evan You, un ex-empleado de Google con su primer liberación en 2014
| Característica | Descripción |
|---|---|
| Virtual DOM | Vue hace uso del DOM virtual, los cambios generados con Vue no son realizados directamente en el DOM, sino en una replica del DOM la cual es representada como una estructura de datos de JavaScript la cual es comparada con la estructura del archivo original. Esto permite una alta optimización realizando cambios de forma mas rápida. |
| Data Binding | Ayuda a asignar valores a los atributos HTML, cambiar los estilos, asignar clases todo esto con la ayuda de la directiva v-bind. |
| Componentes | Ayuda a la creación elementos personalizados los cuales pueden ser rehusados en el HTML. |
| Event Handling | v-on es el atributo añadido a elementos del DOM para escuchar los eventos en Vue. |
| Animaciones/Transiciones | Vue añade diferentes formas de agregar transiciones a los elementos HTML cuando son añadidos, actualizados o eliminados del DOM. Vue tiene componentes de transición que necesitan ser envueltos al rededor de los elementos a los que se les desea dar el efecto de transición todo esto para añadir mas interacción en nuestra aplicación. |
| Propiedades computadas | Ayuda a la escucha de cambios en los elementos de la UI y realiza los cálculos necesarios. |
| Plantillas | Vue trabaja con plantillas enlazan el DOM con los datos de la instancia de Vue. Vue compila la plantilla en el DOM virtual y renderiza la función. |
| Directivas | Vue tiene directivas como v-if, v-else, v-show, v-on, v-bind, v-html y v-model, las cuales nos ayudan con el trabajo de los cambios en el front-end. |
| Watchers | Los watcher son aplicados a la información que cambia .Por ejemplo en los elementos input, watcher gestiona cualquier cambio de información. |
| Ruteo | Navegación entre las diferentes paginas de la aplicación. |
| Ligereza | Vue es sumamente ligero y de gran rendimiento. |
| Vue-CLI | Utileria de linea de comandos que ayuda a construir y compilar el proyecto con gran facilidad, parecido a Angular-CLI. |
Existen 3 formas de añadir Vue.JS a un proyecto.
- Añadiendo un CDN
- Descargando la biblioteca y añadiéndola al archivo HTML
- Usando Vue-CLI
Añadir el CDN es la forma mas practica
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documento</title>
</head>
<body>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>
Descargar la biblioteca y agregarla al archivo HTML es algo parecido a agregar el CDN solo que en vez de usar la URL del CDN en el src, se coloca la ruta de la biblioteca descargada.
Por ultimo y la mejor forma de usar Vue es mediante Vue-CLI. La instalación y uso de Vue-CLI se cubrirá a detalle mas adelante.