Turorial Vue básico en 30 minutos: Qué es, para que nos sirve y ejemplos

14-11-2018 - Andrés Cruz

En esta entrada veremos los primeros pasos con este framework llamado Vue que es el boom de hoy en día, el framework JavaScript que está más de moda; daremos un vistazo rápido a las características de Vue, donde instalarlo, como descargar Vue, haremos una sencilla comparación de Vue con jQuery y posteriormente daremos unos pequeños ejemplos para empezar a trabajar con Vue.

¿Que es Vue y para qué nos sirve?

Vue es un Framework progresivo, lo que significa que sirve para consumir la interfaz del usuario; fue creado por Evan You que trabajaba en Google para ese entonces; Vue surgió en el año 2014, como puedes ver es un framework reciente con "poco" tiempo en el mercado pero que está muy pulido, cuenta con una buena acogida por los usuarios, una comunidad creciente, buena documentación y facilidades de uso que no requieren ni siquiera usar Node para emplearlo lo que es una gran ventaja que tiene con respecto a la competencia.

Características de Vue

Vue es un framework progresivo, lo que significa que podemos emplearlo para algo muy básico, igual que jQuery o sistemas más grandes y complejos y en general cuenta con un rendimiento muy bueno para lo poco que pesa:

Vue es un framework accesible que está a la disposición de todos mediante código libre.
Es un framework muy pequeños que nos facilita enormemente la interacción con la interfaz o el HTML.
Optimizado; su núcleo es muy pequeño y ocupa unos 70Kb lo que es bastante liviano.
Como indicamos antes, cuenta con una comunidad creciente y buena documentación con una curva de aprendizaje baja ya que es sencillo de emplear y muy conciso.

¿Cómo instalar Vue?

Como hemos indicado en sus características, tenemos varias forma de instalar Vue, si queremos instalarlo para hacer cosas sencillas, sin emplear componentes, nos basta emplear el script disponible en la CDN:

Ahora si queremos emplearla para hacer cosas más complejas, emplear componentes, etc podemos emplear el Vue cli que nos permite agregar componentes, páginas, y total control sobre nuestro proyecto desde la línea de comando que veremos en otras entradas.

Para instalar Vue nos vamos al sitio oficial en:

Desde la web veremos que lo podemos instalar mediante un módulo npm, pero también podemos descargarlo con un archivo JavaScript cualquiera y copiarlo en nuestro archivo HTML.

Vue cuenta con una herramienta llamada Vue Cli que nos permite instalar plugins y de esta forma extender sus funcionalidades, podemos crear proyectos basados en esta tecnología fácilmente, sin embargo la manera más fácil de iniciar es mediante la inclusión de la URL anterior como haremos en esta entrada; ya quedará para entradas más avanzadas emplear la herramienta Vue Cli integrarlo con Laravel o Codeigniter, etc.

Vue vs jQuery

Lo primero que tienes que tener en cuenta es que son dos mundos apartes, dos paradigmas diferentes que buscan hacer lo mismo, aplicaciones webs de manera sencilla, jQuery cuenta con una inmensa cantidad de plugins y nos da ese plus que no tenemos con JavaScript nativo y Vue también nos da una importante cantidad de plugins y nos permite ganar en organización, optimizando a nivel de código hasta el mínimo para hacer cosas que son generales como veremos a continuación.

Hay muchas razones por las cuales podemos emplear framework como Vue que son progresivos en vez de jQuery o frameworks similares; Vue nos ofrece una organización mayor (aunque en la práctica jQuery no nos ofrece ninguna organización ni patrón de desarrollo) a la que nos ofrece jQuery, son códigos más fáciles de entender y de mantener ya que cuenta con componentes y el patrón te templates de Vue que vimos en la sección anterior; un punto muy fuerte es como veremos en otras entradas de Vue es la potente interacción en base a eventos, podemos establecer modelos o variables en Vue y atarlas a un elemento en HTML y modificarlo en donde queramos, es decir si modificamos la variable desde JavaScript, este cambio se verá reflejado en la variable; lo mismo ocurre si lo modificamos en un elemento HTML.

Podemos referenciar variables en el HTML como si un template se tratase y este se imprimirá y actualizará en tiempo real si la variable sufre cambios sin que nosotros hagamos algo.

Ya queda por tu parte imaginarte cómo hacer esto con JavaScript nativo o jQuery, que aunque no es una tarea complicada, como verás en la sección de ejemplos en Vue es algo nativo y funciona muy bien.

Podemos imprimir arreglos fácilmente y desde el mismo HTML empleando unas cláusulas especiales que el mismo vue procesa internamente, en el caso de jQuery tendríamos que iterar todo mediante un for o each dentro del bloque script

A la final una tecnología no tiene porqué solapar a la otra, todo depende del proyecto que lleves a cabo y de acoplar de manera inteligente una u otra tecnología, inclusive las dos sin ningún problema.

Algunos Pros de jQuery

Poder realizar peticiones Ajax fácilmente.
Un set de animaciones extensible mediante plugins.
Miles de plugins a tu disposición.

Algunos contras de jQuery

Debes de manejar cada elemento HTML independientemente.
El sistema de renderizado (mostrar contenido en HTML) es lo típico y algo obsoleto comparado con otras tecnologías.
Es un dolor de cabeza cuando la aplicación crece, ya que carece de organización.

Algunas ventajas de Vue

Estupendo sistema para renderizar de JavaScript a HTML como si de una plantilla se tratase.
Curva de aprendizaje baja.
Organización mediante componentes.
Extensible mediante componentes.
Vue Cli para crear aplicaciones SPA.

Algunas desventajas de Vue

No realiza peticiones Ajax de manera nativa.
Es una tecnología en evolución, siempre cambiante.

Claro que jQuery cuenta con importantes plugins y métodos que nos facilitan enormemente la vida, así que dependiendo del enfoque de tu proyecto puedes seleccionar uno o el otro o inclusive los dos y emplear los elementos más fuertes de cada uno de ellos.

¿Por qué empezar a usar Vue?

Como mencionamos antes, no debemos de aferrarnos a una tecnología u otra, cada una de ellas tiene sus ventajas y sus desventajas se pueden hacer las mismas cosas desde distintas formas así que dependiendo de lo que quieras hacer selecciona una u otra tecnología; Vue nos permite ganar tiempo al momento de crear aplicaciones con las cuales vamos a manipular bastante el DOM del HTML debido a como está concebido, pero hay muchas otras herramientas más específicas que puedes emplear también dependiendo de lo que desees realizar.

Ejemplos de Vue: creando nuestras primeras aplicaciones

En esta sección veremos cómo emplear lo básico de Vue, se les recuerda que Vue como framework que es puedes expandir sus funcionalidades mediante plugins y cuenta con su propio sistema de líneas de comandos mediante Vue Clic, pero podemos hacer cosas realmente interesantes con Vue empleando un mínimo de JavaScript en comparación con jQuery o incluso el JavaScript nativo:

Renderizado declarativo

Como una característica muy potente, Vue cuenta con su propio sistema de renderizado en el que en el HTML que definimos el ámbito de Vue, podemos renderizar valores de variables declaradas JavaScript y referenciadas en HTML como vemos a continuación:

<div id="app">
    <h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: "Hola Vue"
        }
    })
</script>

Esto nos dá la siguiente salida:

Como puedes ver es una característica muy potente de Vue, hoy en día que recibimos datos de todas partes, podemos referenciar fácilmente variables, ganando legibilidad y organización en JavaScript como nunca.

Podrías pensar algo como "Ok ok podemos imprimir variables en el HTML con unas llaves que mas puede hacer".

Condicionales en Vue

Otra característica muy común es que queremos mostrar cierto bloque HTML si pasa algo, u ocultarlo, para esto están los condicionales; por ejemplo para el siguiente código:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:true,
			name: 'Andres'
        }
    })
</script>

De esta forma, si cambiamos el valor de la propiedad isActive a false entonces no se mostraría el h1 definido en el HTML; para el ejemplo anterior la salida sería como la siguiente:

Pero podemos colocarle una cláusula else o mejor v-else como la siguiente para mostrar otro mensaje, bloque de código o lo que prefieras:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
	<h1 v-else-if="name === 'Andres'">Hola Andres como estas</h1>
	<h1 v-else="isActive">No User</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:false,
			name: 'Andres'
        }
    })
</script>

Y hasta podemos colocar el típico v-else-if para colocar más condiciones como en el siguiente caso:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
	<h1 v-else-if="name === 'Andres'">Hola Andres como estas</h1>
	<h1 v-else="isActive">No User</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:false,
			name: 'Andres'
        }
    })
</script>

Bucles en Vue

Lo siguiente que veremos es el uso de los bucles en Vue; para ello es la directiva v-for a la cual debe referenciar una colección de elementos; por ejemplo:

<div id="app">
    <ul>
		<li v-for="post in posts" :key="post.id">{{post.title}}</li>
	</ul>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({

        el: '#app',
        data: {
			posts: [
				{id: 1, title:"Entrada 1"},
				{id: 2, title:"Entrada 2"},
				{id: 3, title:"Entrada 3"}
			]
        }
    })
</script>

Vemos varias características interesante, lo primero que vemos es que definimos una lista desordenada para mostrar los elementos de array que la tenemos definida como propiedad que simula el contenido de 3 entradas; en la directiva v-for que se encuentra dentro del elemento li definimos una key que es opcional para indicar el identificador del elemento; es algo interno de Vue, lo siguiente que vemos es el renderizado básico de la propiedad posts que lo tratamos como si un array se tratase; la salida es la siguiente:

Eventos de usuario

Con Vue podemos controlar los eventos de usuario, click, focus y demás empleando la directiva v-on seguido del evento que vamos a registrar; por ejemplo para el evento clic:

<script src="vue.js"></script>
<div id="app">    
	<h1 :style="{color:'red', fontSize: fontSize+'px'}">{{message}}</h1>
	<button @click="increateFont">Increase</button>
	<button @click="decreateFont">Decrease</button>

</div>
</div>
<script>
    let vm = new Vue({

        el: '#app',
        data: {
			message: "hola",
			fontSize:12
        },
		methods:{
			increateFont(){
				this.fontSize++
			},
			decreateFont(){
				this.fontSize--
			}
		}

    })
</script>

JavaScript Vue

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy