Interpolaciones y directivas en Vue 2

En la lección de hoy vamos a aprender más sobre el uso de interpolaciones con las cuales podemos no solo mostrar el valor de variables, sino también utilizar expresiones de JavaScript. También aprenderemos a utilizar las directivas v-once, v-text, v-html para mostrar datos en pantalla y cuando debe usarse cada una. Por otro lado veremos cómo evitar y resolver problemas comunes cuando trabajamos con Vue en conjunto con otros libraries como jQuery.

Notas

La forma más básica de enlazar datos en Vue.js es con el uso de interpolaciones de texto, usando la sintaxis de llaves. Internamente Vue lee y compila las plantillas haciendo uso de funciones render de algo llamado DOM virtual, esto permite a Vue enlazar de forma declarativa el DOM con los datos en la instancia de Vue, realizando el menor número posible de manipulaciones en el DOM cuando el estado de nuestra aplicación cambia.

La sintaxis para las interpolaciones es dobles llaves {{ propiedad }}

A pesar de que puedes utilizar Vue.js y jQuery en una misma página, debes tener cuidado de no mezclarlos entre sí, ya que esto puede generar resultados inesperados.

Vue nos permite usar expresiones de JavaScript dentro del código de las interpolaciones. Por ejemplo, podemos imprimir el valor de name en mayúscula de la siguiente forma:

<h1>Bienvenido, {{ name.ToUpperCase() }}</h1>

También podemos hacer uso de otras expresiones de JavaScript:

// Podemos concatenar
<h1>Bienvenido, {{ name + '!!!' }}</h1>

// Realizar operaciones matemáticas
<p>{{ 2 + 7 }}</p>

Sin embargo, estamos limitados en el uso de estas expresiones, por ejemplo, debemos colocar solo una expresión por línea y no podemos realizar declaraciones de variables o colocar instrucciones de control de flujo.

A pesar de que no podemos realizar instrucciones de control de flujo en nuestras interpolaciones, si podemos hacer uso del operador ternario:

{{ team ? 'Bienvenidos' : 'Bienvenido' }}

Debemos tener cuidado de no complicar nuestras plantillas de forma innecesaria con el uso de expresiones.

Las propiedades dinámicas en Vue.js se llaman computed properties. Si ya has trabajado con Laravel seguramente te resultará útil pensar en estas computed properties como las propiedades dinámicas que podemos declarar en los modelos de Eloquent: Accessors en Laravel con Eloquent

Con el uso de la directiva v-once podemos hacer que nuestros elementos se muestren una sola vez y no actúen de forma reactiva, esto es, que permanezcan de forma estática durante el resto de la ejecución de la página.

La directiva v-text nos permite mostrar contenido dentro de un elemento.

<h1 v-text="name"></h1>

Esto nos daría el mismo resultado que si usaramos <h1>{{ name }}</h1>.

Vue.js escapa de forma automática los caracteres HTML que imprimamos dentro de interpolaciones o directivas v-text, esto nos ayuda a prevenirnos contra ataques XSS (Cross-site scripting). Sin embargo, puedes evitar este comportamiento e imprimir HTML con el uso de la directiva v-html.