Aprende todo lo relacionado con el sistema de vistas de Vue

En este artículo cubiremos todo lo que se puede hacer en los Componentes de Vue repecto a la vista, es decir, a la representación de los datos en el HTML.

Lo primero que tienes que saber, si no lo sabes ya es que las vistas en Vue se organizan dentro de los propios componentes, en específico dentro de la etiqyeta </template>.

Etiqueta template solo puede haber una por componente y dentro debería estar toda la parte visual del componente. Nunca metas HTML desde la lógica del componente, siempre intenta que todo el HTML esté dentro del template.

Otro detallito a tener en cuenta es que en Vue 2, dentro del template solo puede haber un nodo HTML del que cuelgan los demás elementos.

Es decir, el template de este componente sería erróneo ya que tiene dos elementos raíz:

<template>
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</template>

Si quieres hacer algo similar a lo de arriba en Vue 2 lo que tienes que hacer es crear un solo elemento raíz y dentro meter los otros dos, algo así:

<template>
  <div>
    <div>Elemento 1</div>
    <div>Elemento 2</div>
  </div>
</template>

Pintar variables en la vista de los componentes

Una vez has creado Variables de Vue en los componentes puedes usarlas para pintar su contenido directamente en el HTML, por ejemplo si hemos creado una variable llamada title podemos pintarla usando la notación de las dobles llaves:

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

Lo bueno de Vue es que cuando actualicemos el valor de las variables, en la lógica de los componentes, automáticamente aparecerá con el nuevo valor en la vista, sin que tengas que hacer nada. Es lo bueno de la reactividad de Vue.

Tienes que saber que dentro las dobles llaves puedes meter código Javascript para hacer pequeños ajustes, por ejemplo:

<template>
  <div>
    <h1>{{ numUsers + 3 }}</h1>
  </div>
</template>

En este caso la varibale numUsers es un número y lo que hacemos en la vista es sumarle 3 antes de pintarlo en el HTML.

Aunque esto se puede hacer yo siempre recomiendo mejor usar propiedades Computadas de Vue, no se suele recomendar tener este tipo de lógica en la vista de los componentes.

Más funcionalidades de las vistas

Las vistas de Vue incluso tienen Condicionales v-if en Vue y bucles Bucles v-for en Vue, echa un vistazo a esos artículos.

Echa un vistazo también a los Atributos, clases y estilos dinámicos en VueJS, que además son reactivos a los datos de la lógica del componente.