Sintaxis básica de Vue.js

4 min
Iniciación

En este tutorial vamos a ver la sintaxis básica de Vue.js. Algo que, lógicamente, vamos a usar constantemente en el resto del curso.

La sintaxis de Vue.js se basa en combinar HTML, CSS y JavaScript de manera declarativa y reactiva. Sin duda, es uno de los motivos del éxito de Vue.js.

Básicamente se centra en dejarnos escribir código fácilmente mientras Vue.js se encarga de la parte “pesada” (reactividad y la actualización del DOM).

Pero, a la vez, también sigue criterios a otros frameworks modernos. Así que es fácil pillarle el truquillo si habéis visto alguno de ellos.

Así que vamos a ver los fundamentos de la sintaxis de Vue.js 👇.

Vue.js está basado en componentes

Al igual que muchas otras tecnologías, Vue.js está basado en componentes. Son los 🧱 “ladrillos” 🧱 con los que se construyen la mayoría de aplicaciones web modernas (y las no web, y las no tan modernas 😅)

Como tal, un componente es un bloque de código reutilizable que puede tener su propio estado, propiedades, métodos y ciclo de vidas.

En general, casi siempre se corresponden con un elemento del UI, como un botón, una lista, un card, etc.

Los componentes nos permiten organizar y estructurar nuestra aplicación de forma modular, lo que facilita el desarrollo y el mantenimiento de la aplicación, y hace que huela mejor (esto último no está 100% verificado).

Estructura de un componente en Vue.js

Un componente en Vue.js es simplemente un archivo con extensión .vue. La sintaxis tiene que contiene tres secciones principales

Elemento	Descripción
`<template>`	Define la estructura HTML del componente.
`<script>`	Contiene la lógica JavaScript del componente.
`<style>`	Define los estilos CSS del componente.

Por ejemplo así,

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

<script setup>
import { ref } from 'vue';

const mensaje = ref('Hola, Vue.js 3!');
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Uso de `<template>` para agrupar elementos

En Vue.js, el <template> es una etiqueta especial que permite agrupar múltiples elementos sin necesidad de un contenedor raíz.

Es decir, es una agrupación “ficticia”, como si tuviéramos un <div>. Pero con la diferencia de que la etiqueta <template> no aparecerá en el código HTML5.

<template>
  <h1>{{ titulo }}</h1>
  <p>{{ descripcion }}</p>
</template>

<script setup>
import { ref } from 'vue';

const titulo = ref('Bienvenido a Vue.js 3');
const descripcion = ref('Este es un ejemplo de múltiples elementos en <template>.');
</script>

En este ejemplo, el <template> contiene dos elementos (h1 y p) sin necesidad de un contenedor.

Hemos visto que en la sintaxis de un componente se usa <template. Esto es así porque, bajo el capó, un componente puede tener un único nodo HTML.

Pero no es el único sitio donde veremos usar <template>. Será necesario en otros casos donde, igualmente, tengamos que hacer una agrupación de elementos HTML.

Interpolación de cadenas

La interpolación de cadenas es una forma de mostrar datos dinámicos dentro del HTML. Para ello se usa la sintaxis de dobles llaves {{ }}.

Vue.js reemplazará automáticamente las expresiones dentro de {{ }} con sus valores correspondientes.

<template>
  <div>
    <p>{{ mensaje }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const mensaje = ref('Hola, Vue.js 3!');
</script>

En este ejemplo:

{{ mensaje }} muestra el valor de la variable mensaje.
{{ 2 + 2 }} muestra el resultado de la expresión 4.

Expresiones en interpolaciones

Además de mostrar variables simples, también podemos usar expresiones JavaScript dentro de las llaves de interpolación {{ }}.

Estas expresiones pueden incluir operaciones matemáticas, llamadas a métodos, operadores ternarios, concatenaciones, etc.

<template>
  <div>
    <p>{{ mensaje.toUpperCase() }}</p>
	<p>La suma de 2 + 2 es {{ 2 + 2 }}</p>
    <p>{{ esActivo ? 'Activo' : 'Inactivo' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const mensaje = ref('Hola, Vue.js 3!');
const esActivo = ref(true);
</script>

En este ejemplo:

{{ mensaje.toUpperCase() }} convierte el mensaje a mayúsculas.
{{ esActivo ? 'Activo' : 'Inactivo' }} usa un operador ternario para mostrar un texto condicional.

Aunque es posible usar expresiones complejas en la interpolación, no es recomendable que abuséis de ellos. En estos casos, es mejor usar métodos o computed properties.

Directivas básicas

Las directivas son atributos especiales añadimos al HTML y que Vue.js para proporcionar funcionalidades adicionales.

Las directivas en Vue.js siempre comienzan con v- y se utilizan para manipular el DOM de manera declarativa. Tampoco aparecerán en el código HTML generado.

Lo vemos en,

Directivas en Vue.js.