Vue JS

Introducción al framework Vue JS.

En este tema abracaremos el truculento mundo del JavaScript

Introducción histórica.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, repellat. Laboriosam, maxime. Dicta laudantium sapiente minus! A ab dolore enim sapiente molestiae explicabo nihil cumque quae quidem! Nemo, necessitatibus suscipit.

Vue y el DOM

Vue Templates

En este ejemplo, vamos a ver un template de Vue donde pasaremos un dato a la notación {{ }}

See the Pen Primera App en Vue by Pablo (@pablofv) on CodePen.

Los elementos del objeto data se acceden directamente mediante la notación {{ }}

Métodos en el template

Si en nuestro template queremos mostrar el resultado de una función, usaremos el objeto methods en nuestra instancia de Vue.

En el html, lo mostraríamos así: <p>{{ miFuncion() }}</p>

Esto retornaría algo que puede ser colocado en el DOM, es decir, algo que puede ser convertido a un string (nada de objetos complejos, ni valores de retorno)

Estos valores representados entre {{ }} deben estar en el objeto data o en el objeto methods de nuestra instancia de Vue.

See the Pen 1.5.- Vue Templates: Methods by Pablo (@pablofv) on CodePen.

Methods. Acceso a datos

En el ejemplo anterior hemos utilizado una función. Pero si quisieramos en esa función acceder a los elementos de data, por ejemplo el elemento "title", usaremos la notación this., quedando como this.title

See the Pen 1.6.- Métodos: Acceso a datos by Pablo (@pablofv) on CodePen.

Templates: Acceso a datos: datos HTML

Imaginemos que queremos almacenar y representar un dato en formato html, como por ejemplo, un enlace, o un atributo title de una imagen.

Si utilizamos los atributos HTML, como por ejemplo href o title e intentamos usar un template de vue {{ }} dentro de ellos, nos dará un error.

See the Pen 04 - Ejercicio 4 con errores by Pablo (@pablofv) on CodePen.

Dentro de los atributos HTML nunca usaremos templates de Vue.

Para eso, usaremos la propiedad v-bind: + el atributo.

Así podríamos usar v-bind:href="...." o v-bind:title="....".

Veamos un ejemplo de uso correcto del atributo v-bind.

See the Pen 05 - Corregir errores del ejercicio 4 by Pablo (@pablofv) on CodePen.

Como nota importante, la forma corta de v-bind:attributo="" sería :attributo="".

See the Pen 05.5 - Shorthand de v-bind by Pablo (@pablofv) on CodePen.

Entendiendo las Directivas de Vue.js

Una directiva es una insctrucción donde colocamos código. Le dice a Vue que "bindee" algo de mi "data".

v-bind toma un argumento (href, title, etc...), y éste espera un atributo que quiere "bindear".

v-bind : argumento dato,funcion,...

De este modo, podemos pasar datos dinámicamente a nuestros atributos HTML

Bloquear re-renderizado con v-once

Con la directiva v-once, el elemento a bindear sólo se renderizará una vez, independientemente de como cambie posteriormente, ya sea con métodos o funciones.

v-once es muy recomendado para tomar el valor inicial de un dato.

See the Pen 06 - RAW html by Pablo (@pablofv) on CodePen.