"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Interpolaciones y directivas en VueJs 2

Las interpolaciones y directivas en VueJs 2 son la manera de trabajar con las variables de nuestros componentes reactivos.

Hace poco escribí un post sobre como arrancar nuestros proyectos con vue-cli, puedes consultarlo aquí, ahora basándonos en ese código trataré de explicar como interpolar variables en nuestro código o usar ciertas directivas muy útiles.

Lo que os voy a contar lo podeis encontrar tambien en la documentación oficial aquí.

En primer lugar la interpolación usa la sintaxis «mustache», lo que quiere decir que encierra entre dobles llaves el código que evalua y concatena.

Vamos a comezar a ver ejemplos:

En el proyecto que creamos con vue-cli fue creado un componente App.vue, si lo buscas veras que su código javascript es algo así

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

Esto es muy sencillo, data es una función que retorna una variable que podemos usar en nuestro template, para interpolarla, simplemente hacemos uso de la doble llave así

<div><h1>{{ msg }}</h1></div>

O usamos la directiva v-text, que hace lo mismo

<div><h1 v-text="msg"></h1></div>

En ambos casos el contenido se muestra en pantalla de forma automática.
Interpolar en VueJs
Notemos que dentro de las directivas llamamos a nuestras variables directamente, ya no es necesario usar las llaves.
Pero pudieramos pensar en incluir código en vez de texto plano dentro de la variable, asi que vamos a mover la etiqueta h1 del template al interior de la variable y ver que pasa cuando interpolamos de la manera anterior…

 

export default {
  name: 'app',
  data () {
    return {
      msg: '<h1>Welcome to Your Vue.js App</h1>'
    }
  }
}

Como se puede ver vueJs escapa el código para evitar que nos inyecten código en propiedades sobre las que no tenemos control, por haber sido ingresadas por terceros.
En la documentación oficial nos remiten a este link si queremos saber más sobre los ataques XSS.

Aunque me parece una idea estupenda que hayan pensado en este tipo de vulnerabilidades, si que proveen de formas para interpolar el código en aquellos casos donde este bajo nuestro control.

Podriamos hacerlo usando la directiva v-html, de esta manera:

<div v-html="msg"></div>

Interpolaciones

Tambien podemos usar expresiones de javascript cuando usamos la interpolación, respecto a las limitaciones que tenemos cuando usamos la interpolación podemos usar los ejemplo que vueJs pone a disposición nuestra en su web.
Todos estos casos son válidos.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

En el primer caso estamos haciendo una suma sobre una variable.
Tambien permite utilizar el operador ternario, si quieres saber más aqui explico que es
Y por último muestran sobre como usar distintos métodos nativos de javscript sobre nuestras variables, en este ejemplo están volteando un texto.

Aunque con esto ya tenemos un gran abanico de posibilidades no pensemos que dentro de las llaves podemos meter javascript como queramos

  • Está prohibido declarar variables
  • No podemos usar instrucciones de control de flujo
  • No podemos usar más de una expresión por linea

Para entendernos, repecto al control de flujo engloba cualquier sentencia de control de flujo como el if/else, el switch, el try/catch…
Aunque tambien sirve para controlar el flujo el operador ternario si esta permitido.
Si en javascript necesitas poner un punto y coma es que estas separando una expresión, aquí eso no vale.

Directivas

Las directivas son atributos especiales que podemos incluir en nuestras etiquetas se distinguen porque tienen el prefijo v-.
Hasta ahora hemos visto v-text, v-html y v-once.
Tenemos muchas otras, por ejemplo acabamos de ver que en la interpolación no podemos usar sentencias de control de flujo, pero si que tenemos directivas para hacer eso como el v-if.
Aquí también estamos limitados a usar una sola expresión de javascript dentro de ellas, salvo el v-for que es un caso especial.

Las directivas pueden tener atributos, los distinguimos porque estan al lado suyo separados por ‘:’, y sirven para definir su comportamiento pues las ejecutan usando ese mismo parametro.
Pensemos en estos ejemplos:

<a v-bind:href="url"></a>
<a v-on:click="doSomething">

Las directivas v-bind y v-on reciben como parametros href y click, en el primer caso sirve para saber cual es el link al que apunta, y en el segundo define el evento sobre el que crea un listener.

Por último se habla de los modificadores, los distinguimos porque estan al lado suyo separados por ‘.’, y son expresiones que modifican la manera como ejecutamos la directiva.
A diferencia de un atributo nosotros no debemos darle ningun valor, por el solo hecho de estar declarado la directiva va a ejecutar cierta lógica, la modifican siempre de la misma manera, de ahi su nombre.
El ejemplo que la documentación da es este:

<form v-on:submit.prevent="onSubmit"></form>

La directiva es v-on, el atributo es :submit por lo que el listener es creado para el evento submit (cuando se envía el formulario), y el modificador es .prevent que obliga a la directiva a llamar a event.preventDefault(); cuando se ejecute.

Espero que todo esto os sirva de utilidad!

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)