Plantillas e interpolaciones de vue.js

Vue.js usa un lenguaje de plantillas que es un superconjunto de HTML. Cualquier HTML es una plantilla Vue.js válida, y además de eso, Vue.js proporciona dos cosas poderosas: interpolación y directivas.

Vue.js usa un lenguaje de plantillas que es un superconjunto de HTML.

Cualquier HTML es una plantilla de Vue.js válida y, además de eso, Vue.js proporciona dos cosas poderosas:interpolaciónydirectivas.

Esta es una plantilla de Vue.js válida:

<span>Hello!</span>

Esta plantilla se puede colocar dentro de un componente de Vue declarado explícitamente:

new Vue({
  template: '<span>Hello!</span>'
})

o se puede poner en unComponente de archivo único:

<template>
  <span>Hello!</span>
</template>

Este primer ejemplo es muy básico. El siguiente paso es generar una parte del estado del componente, por ejemplo, un nombre.

Esto se puede hacer mediante interpolación. Primero, agregamos algunos datos a nuestro componente:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello!</span>'
})

y luego podemos agregarlo a nuestra plantilla usando la sintaxis de corchetes dobles:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello {{name}}!</span>'
})

Algo interesante aquí. Mira como acabamos de usarnameen vez dethis.data.name?

Esto se debe a que Vue.js realiza algunos enlaces internos y permite que la plantilla use la propiedad como si fuera local. Muy útil.

En un solo componente de archivo, eso sería:

<template>
  <span>Hello {{name}}!</span>
</template>

<script> export default { data() { return { name: ‘Flavio’ } } } </script>

Usé una función regular en mi exportación. ¿Por qué no una función de flecha?

Esto es porque endataes posible que necesitemos acceder a un método en nuestra instancia de componente, y no podemos hacerlo sithisno está vinculado al componente, por lo que el uso de las funciones de flecha no es posible.

Podríamos usar una función de flecha, pero luego tendría que recordar cambiar a una función normal en caso de que usethis. Mejor ir a lo seguro, creo.

Ahora, volvamos a la interpolación.

{{ name }}recuerda la interpolación de la plantilla Moustache / Handlebars, pero es solo un recordatorio visual.

Mientras que en esos motores de plantillas son “tontos”, en Vue puedes hacer mucho más, es más flexible.

Puedes usarcualquier expresión de JavaScriptdentro de sus interpolaciones, pero está limitado a una sola expresión:

{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue brinda acceso a algunos objetos globales dentro de las plantillas, incluidas Math y Date, para que pueda usarlos:

{{ Math.sqrt(16) * Math.random() }}

Es mejor evitar agregar lógica compleja a las plantillas, pero el hecho de que Vue lo permita nos da más flexibilidad, especialmente cuando probamos cosas.

Primero podemos intentar poner una expresión en la plantilla y luego moverla a una propiedad o método calculado más adelante.

El valor incluido en cualquier interpolación se actualizará al cambiar cualquiera de las propiedades de los datos en las que se basa.

Puede evitar esta reactividad utilizando elv-oncedirectiva.

El resultado siempre se escapa, por lo que no puede tener HTML en la salida.

Si necesita tener un fragmento de HTML, debe usar elv-htmldirectiva en su lugar.

Descarga mi gratisManual de Vue


Más tutoriales de vue: