Vuejs para programadores jQuery.
Form Input Simple
El ejemplo más simple y útil que conozco es imprimir en un elemento HTML el contenido de un input form a medida que se escribe en él.
La idea es sencilla y ya nos acerca a los primeros conceptos diferenciales entre Vuejs y jQuery.
Pasaremos de la estructura HTML y las clases, ya que son según la estructura normal de Bootstrap. Pero si veremos algunos detalles cuando miremos el código de Vuejs.
JQUERY
Hablemos del código jQuery:
Enlaces:
<input aria-describedby="inputHelp" class="form-control" id="exampleInput" type="text" />
El input tiene un id de doble uso:
* El atributo está siendo usado por el elemento <label> para asignar la relación con la etiqueta
* Será la manera de identificar el elemento en jQuery
El otro elemento HTML relevante es:
<div>
<span id="contenido"></span>
</div>
El id del <span> es para poder escribir en el elemento el contenido del input como se explicara debajo.
El código script:
Hablemos de esta línea:
const exampleInput = jQuery('#exampleInput')
¿Por qué asigno el elemento a una variable y además constante? Cada vez que usamos jQuery('#id') estamos pidiéndole a jQuery que busque el elemento y construya una respuesta. Como el elemento lo usaremos varias veces es preferible que lo construya 1 vez y luego ir usándolo que pedirle que lo construya en cada invocación.
Esta asignación solo sucede una vez, ya que no vuelve a llamarse ese código por estar fuera de cualquier función. Siguiente linea:
exampleInput.on('input', actualiza )
Usamos el elemento creado con jQuery y le asociamos un evento: Input. ¿Por qué no usar el evento change? El evento change en un elemento input se actualiza cuando el elemento pierde el foco, por lo tanto no recibimos los cambios hasta que el usuario ha pulsado o elegido otro control. Esta no es una característica de jQuery sino de los eventos HTML.
En esa misma linea asociamos ese evento a una función: actualiza. No es necesario poner actualiza()
Lo que queda de código:
function actualiza() {
jQuery('#contenido').empty().append(exampleInput.val())
}
Creamos la función que actualizara nuestro contenido:
Con jQuery recogemos el elemento con id contenido (recordar que es un <span>) lo vaciamos (para no sobreescribir lo que ya está escrito) con empty() y a continuación agregamos contenido con append(). Lo que agregamos es el val() (o value) del form input.
VUEJS
Ahora le toca el turno a Vuejs.
Lo primero que veremos es que hemos agregado un id en el primer div debajo del body
<div class="container" id="app">
Cuando hablemos del script explicaremos como lo estamos usando.
El siguiente cambio es el input
<input type="text" class="form-control" id="exampleInputEmail1" v-model="contenido" aria-describedby="emailHelp">
En vuejs no necesitamos que los elementos tengan id pero a través de todo el proyecto se conservaran porque están siendo usados por los elementos <label> como referencia.
¿Qué es v-model? v-model asocia una variable a los cambios del elemento. Esta variable tendrá los cambios que se hagan en el input como también cambiara el input cuando se le asigne un valor.
Y este es un punto crítico de los frameworks reactivos. No tenemos que estar actualizando la variable o esperando el evento del elemento HTML para poder acceder a los últimos cambios. La variable SIEMPRE tendrá el último cambio sin que tengamos que hacer nada.
Si se quiere saber más este link puede ayudar:
Virtual DOM y VueJs: (en ingles) https://medium.com/js-dojo/vue-virtual-dom-13af62d2be41
Pero lo iremos viendo una y otra vez a través de los ejemplos. Sigamos adelante. Otro cambio en el HTML:
<div>
<span>{{contenido}}</span>
</div>
Lo primero a destacar es la eliminación de id, ya que no lo usaremos. Lo segundo es el uso de {{}} que simplemente es una indicación a para que vue sepa que tiene contenido que renderizar ahí. Lo tercero es que estamos usando la misma variable que el v-model.
<span>{{contenido}}</span> simplemente y resumido mostrará lo que tenga la variable en ese lugar del HTML. Y recordemos. Cuando el input cambie el contenido o la variable cambie en una asignación cambiara el valor mostrado aquí sin que tengamos que actualizarlo.
Por último vayamos al script
<script>
new Vue({
el: '#app',
data: {
contenido: ''
}
})
</script>
Lo primero que vemos es el operador new de Js que sirve para instancia una clase y así crear un objeto. En el constructor de la clase estamos pasando dos valores:
* el: Este valor indica el id (véase que se usa como en CSS o jQuery con el #) del elemento superior donde se usara Vuejs. Recordemos que este id lo hemos identificado como el primer cambio con respecto al HTML de jQuery y este es el único caso donde el id se usa en Vuejs.
* data: es un objeto que encierra las variables de Vue. En este caso solo usaremos una variable llamada "contenido" cuyo valor inicial es '' y será el contenido inicial del input.
Y no necesitamos nada más. De esta manera ya tendremos el valor actualizado en el <span> cada vez que se cambie el form input.
Index del proyecto Input simple:
Dudas en los comentarios, en el Slack de PEUM o en Twitter.
Excelente articulo. Gran trabajo.
ResponderEliminarMuchas gracias.
Eliminar