Después de venderte la moto de lo bueno y lo que me gusta VueJS, pero aún no he mostrado ni una línea de código, así que, vamos con el primer paso con VueJS.
La instalación
En la documentación de VueJS hay un apartado específico para la instalación de la librería, y que propone varias alternativas. Lo primero y más descatable es que no soporta IE versión 8 y anteriores, es decir, que solo los navegadores modernos pueden hacer uso de él. Yo creo que a estas alturas, IE 8 está más que superado y si aún dispones de ese navegador …. deberías actualizarlo!
El primer paso con VueJS
Voy a dejar el código completo, y luego lo destripamos. Para este primer ejemplo, el HTML es muy básico:
<!DOCTYPE html>
<html>
<title>ManejandoDatos.es - VueJS 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div id="main">
<input type="text" v-model="message" />
<h3>{{message}}</h3>
</div>
</body>
</html>
La parte inicial es lo básico para crear un documento HTML, mientras que la parte que hay que explicar es el div que se llama #app, y el código Javascript.
Para el primer ejemplo, lo más cómodo es utilizar la librería desde un CDN, esto es, un repositorio de librerias:
</pre><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span></pre><pre>
Una vez cargado, ya podemos hacer uso del objeto Vue, que es el que se encarga de todo, y almacenamos en una variable let app.
let app = new Vue({el:'#main',
data:{message:'Primer paso con VueJS!'}})
El objeto Vue necesita de un objeto, donde es básico complementar la palabra reservada “el“, que es el que vincula con un elemento del DOM, en este caso, el DIV que se llama #app.
La segunda propiedad casi obligatoria es data, que es donde se escriben las propiedades del objeto, y que podrán vincular con el HTML del “elemento” sobre el que se trabaja.
El DIV #app tiene una propiedad {{mensaje}} que está entre llaves, y es lo que se renderiza por el valor correspondiente.
primer VueJS
Sencillo, no?
Las propiedades de data pueden llamarse como sea, aunque en este caso, se ha llamado message, pero se podía llamar de otra forma. En el DIV de trabajo debe llamarse igual, para que haya vinculación (¿os suena esto del data-binding?).
Data-Binding en acción
Vamos a modificar un poco la parte del DIV para ver en qué consiste el data-binding. Ponemos un input, y hacemos que según cambie el valor a introducir, así se modificará el título:
</pre>
<div>
<div><div id="main"></div>
<div><input type="text" v-model="message" /></div>
<div><h3>{{message}}</h3></div>
<div></div></div>
</div>
<pre>
El resultado:
segundo VUEJS
Y al modificar, también lo hace el título.
segundo VUEJS2
El secreto para que el data-binding sea efectivo requiere marcar con la propiedad v-model, y asignar la propiedad correcta. En nuestro caso, message.
Para terminar, hay otra propiedad que es v-bind, que se utiliza para vincular un valor en Vue a una propiedad. Por ejemplo, para modificar el valor de una propiedad de un enlace, hay que usar: v-bind:href=”propiedad”.
El código quedaría:
¿No es sencillo? Pues … seguimos, porque hay más, y este ha sido solo el primer ejemplo!