Vue (pronunciado /vju:/) es un framework progresivo para construir interfaces de usuario. Su núcleo se orienta solo en la capa vista, y es fácil de integrar con otros sistemas complementarios.
Para instalar Vue dentro de nuestra vista, tan solo tenemos que agregar una etiqueta script que enlace con su CDN, bien el de la web oficial, como de otro repositorio como CDNJS.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Una vez instalado, podemos crear un objeto al que podemos llamar vm dentro de nuestro código JavaScript.
<script>
var vm = new Vue({
el: "#app",
data: {}
});
</script>
Es de vital importancia que en la instancia declaremos el elemento ‘el’, así como el data. Aunque data esté originalmente vacío.
Desde la versión de Vue.js 2, el debe apuntar a un elemento identificado con una ‘id’. No es posible enlazar ningún elemento como por ejemplo el body, form, o div. De lo contrario, no nos funcionará.
Renderizado declarativo
El núcleo de Vue es capaz de mostrar datos declarativos mediante renderizado del DOM usando dobles llaves como en las plantillas Blade de Laravel.
<div id="app">
{{ message }}
</div>
var vm1 = new Vue({
el: "#app",
data: {
message: "hola Vue.js"
}
})
Con este enlace, el DOM pasa a ser reactivo, lo que quiere decir, que los cambios que hagamos en la consola del navegador para los elementos, también se verán afectados en la vista.
Aunque el uso de expresiones y funcionalidades JavaScript están permitidas dentro de los elementos del DOM, no es aconsejable saturar las vistas con demasiadas. En su lugar, se usarían propiedades dinámicas, computed properties. Pero eso se verá más adelante.
Directivas
Las directivas son elementos que van prefijados de «v-«, lo que le indica a Vue que es una llamada a un atributo especial. Algunas directivas muy simples pueden ser las siguientes:
- Directiva v-once, hacer el renderizado de elementos una sola vez y desactivarle la funcionalidad reactiva.
- Directiva v-text, muestra contenido dentro de un elemento
<h1 v-text="name"></h1>
<!-- es igual a -->
<h1>{{ name }}</h1>
- Directiva v-html, se salta el escape de etiquetas HTML. No es aconsejable su uso si queremos evitar ataques de tipo inyección de código.
Esto ha sido un poco la introducción a Vue.js. Recuerdo que esta es la versión 2 de Vue y que está totalmente enfocado a elementos identificados en el DOM.