Vue.js vs jQuery (parte 2 de 2)

En esta lección modificaremos nuestro ejemplo anterior para realizarlo con Vue.js, para esto aprenderemos cómo instalar el framework y hacer uso de las directivas de Vue, las cuales son atributos especiales que nos permiten realizar cambios en el DOM. También daremos un primer vistazo a muchas características importantes de Vue: enlazar valores con v-model, añadir o remover atributos con v-bind, mostrar elementos de forma condicional con v-if y v-else además de manejar eventos con v-on.

Notas

A pesar de que podemos instalar Vue.js usando Webpack, Gulp y otros, también podemos usarlo directamente desde un CDN como hicimos con jQuery. Para esto enlazamos directamente el archivo vue.js en una etiqueta <script>.

https://vuejs.org/v2/guide/installation.html#CDN

Al crear una nueva instancia de Vue, es importante pasar el elemento donde queremos que funcione nuestro código además de una propiedad data donde debemos inicializar los valores que manipularemos, así sea con un valor vacío.

new Vue({
    el: "#app",
    data: {
        first_name: '',
	last_name: ''
    }
});

Enlazamos los datos en la propiedad data con nuestros elementos en el DOM haciendo uso de las directivas de Vue.js (en este caso v-model).

Las directivas en Vue.js son atributos especiales con el prefijo v- que agregan comportamiento reactivo al DOM, esto es, nos permiten mantener nuestros elementos actualizados con los valores en nuestra instancia de Vue (también llamado objeto VM). De ellas hablaremos más adelante en este curso.

Con el uso de this podemos acceder a los datos (los valores dentro de la propiedad data) que se encuentran en nuestra instancia de Vue.

return this.first_name != "" && this.last_name != ""

Usando la directiva v-bind podemos enlazar comportamientos a nuestros elementos, por ejemplo, añadir o remover atributos.

<button type="submit" v-bind:disabled="!isFormValid()">Continuar</button>

Para mostrar los valores de la propiedad data en nuestro HTML no es necesario concatenar ningún valor dentro de JavaScript, como haríamos en jQuery sino que usando una sintaxis de llaves, similar a la usada en Blade con Laravel, podemos lograrlo fácilmente:

<h4>Bienvenido, {{ first_name }} {{ last_name }}</h4>

Es importante recordar que al ser JavaScript y no PHP no debemos colocar el signo de dólar ($) al inicio del nombre de la propiedad.

Podemos mostrar elementos del DOM de forma condicional con el uso de las directivas v-if y v-else.

La directiva v-on nos permite ejecutar código JavaScript cuando un evento es disparado en el DOM, por ejemplo, al presionar el boton submit de un formulario.

Podemos simplificar el uso de v-bind dejando solo los dos puntos seguidos del nombre del atributo. De esta manera :disabled="!isFormValid()"

De igual forma podemos simplificar el uso de la directiva v-on reemplazándolo por una arroba. Así: @submit.prevent en lugar de v-on:submit.prevent