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.
Artículos que mencionan a este:
Aprende a crear tus primeros componentes de VueJS
Hello World en Vue, descubre la estructura que tienen los componentes y cómo crearlos
Cómo usar el Vue router para crear rutas y navegar a ellas
En ese artículo aprenderemos cómo funciona el router de Vue que nos servirá para crear y gestionar rutas en la página
Roadmap para aprender VueJS desde 0 y en español
VueJS es un framework para Javascript para crear páginas webs completas. Al estilo React pero mucho más sencillo de usar
Cómo crear variables reactivas con Vue
Aprende a crear variables reactivas en Vue para usarlas en la vista y a crear variables estáticas, para mejorar performance
Cómo crear un bindeo de variables con v-model de Vue
Con este tutorial aprenderás a conectar variables e inputs de forma reactiva
Cómo escuchar eventos nativos en Vue (click, mouseover, wheel...)
Vue tiene una sintaxis muy cómoda para poder escuchar los eventos que ofrecen los navegadores de forma nativa, en este artículo aprendemoos a usarlos