Cheatsheet Vue.js

Instalación a través de CDN

Para proyectos simples, puedes añadir Vue.js directamente desde un CDN.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Instalación con NPM

npm install vue

Instalación global:

Vue CLI permite configurar proyectos avanzados

npm install -g vue-cli

Crear un Proyecto con Vue CLI

Para crear un nuevo proyecto Vue.js:

vue create nombre-proyecto

Comprobar versión de Vue CLI

Verifica que Vue CLI esté instalado correctamente.

vue --version

Estructura de carpetas típica

nombre-proyecto/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── package.json
└── vue.config.js

src/

Carpeta principal que contiene el código fuente.

components/

Donde se encuentran los componentes Vue.

App.vue

Componente raíz de la aplicación.

main.js

Punto de entrada de la aplicación.

Componente Vue básico

Los componentes son instancias de Vue reutilizables. Un componente de Vue está compuesto por tres partes principales: <template>, <script>, y <style>.

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

<script>
export default {
  data() {
    return {
      mensaje: "Hola Mundo"
    }
  }
}
</script>

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

Uso de Componentes en Plantillas

Para usar un componente en la plantilla:

<mi-componente></mi-componente>

Definición de un Componente usando Class Style

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class MiComponente extends Vue {
  mensaje = 'Hola desde un componente de clase!';
}

Interpolación de datos

Permite renderizar variables en el DOM con la sintaxis {{}}.

<p>{{ mensaje }}</p>

Props

Los datos pueden ser pasados desde un componente padre a un hijo utilizando props.

// Componente hijo
export default {
  props: ['mensaje']
}

En el componente padre:

<hijo :mensaje="mensajeDelPadre"></hijo>

Emitir Eventos

Para comunicar del hijo al padre, se emiten eventos.

// Componente hijo
this.$emit('eventoPersonalizado', datos)

En el componente padre:

<hijo @eventoPersonalizado="manejarEvento"></hijo>

Slot

Permite que el componente padre inyecte contenido en el hijo.

<template>
  <div>
    <slot></slot>
  </div>
</template>

Y en el padre:

<hijo>Este es el contenido del slot</hijo>

v-if

Renderiza un elemento solo si la expresión es verdadera.

<p v-if="mostrar">Este texto se muestra si mostrar es verdadero</p>

v-else

Añade una condición alternativa a v-if.

<p v-if="mostrar">Mostrar</p>
<p v-else>No mostrar</p>

v-show

Similar a v-if, pero en vez de eliminar el nodo del DOM, controla la visibilidad con CSS (display).

<p v-show="mostrar">Este texto está visible según mostrar</p>

v-for

Itera sobre una lista de datos, creando un elemento para cada item.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.nombre }}</li>
</ul>

v-on

Escucha eventos del DOM. v-on puede acortarse como @.

<button v-on:click="alertar">Clic</button>
<!-- O con sintaxis corta -->
<button @click="alertar">Clic</button>

v-bind

Vincula atributos o propiedades del DOM a las propiedades de Vue. Su abreviatura es :.

<img v-bind:src="imagenURL" />
<!-- O con sintaxis corta -->
<img :src="imagenURL" />

v-model

Crea un enlace bidireccional entre un campo de formulario y el estado de Vue.

<input v-model="nombre" />
<p>El nombre es: {{ nombre }}</p>

Vue tiene una serie de hooks o eventos que permiten ejecutar código en momentos clave del ciclo de vida del componente.

mounted

Se ejecuta cuando el componente ha sido montado en el DOM.

export default {
  mounted() {
    console.log("El componente ha sido montado");
  }
}

created

Se dispara cuando se ha creado la instancia del componente, pero aún no está montada en el DOM.

export default {
  created() {
    console.log("Instancia creada");
  }
}

beforeDestroy

Se ejecuta justo antes de que el componente sea destruido y removido del DOM.

export default {
  beforeDestroy() {
    console.log("Componente a punto de ser destruido");
  }
}

Data

La propiedad data en Vue almacena el estado reactivo del componente.

data() {
  return {
    mensaje: "Hola",
    contador: 0
  }
}

Computed Properties

Son propiedades que dependen de otras y se actualizan automáticamente cuando las dependencias cambian.

computed: {
  mensajeInvertido() {
    return this.mensaje.split('').reverse().join('');
  }
}

Watchers

Observan cambios en las propiedades y ejecutan código en respuesta.

watch: {
  contador(nuevoValor, viejoValor) {
    console.log(`Contador cambiado de ${viejoValor} a ${nuevoValor}`);
  }
}

Scoped Styles

El atributo scoped hace que los estilos definidos solo afecten al componente actual.

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

Clases Dinámicas

Puedes aplicar clases de manera condicional o dinámica usando v-bind:class.

<div :class="{ activo: isActive }">Contenido</div>

Estilos en Línea Dinámicos

Usa v-bind:style para aplicar estilos en línea de manera reactiva.

<div :style="{ color: textoColor, fontSize: tamañoFuente + 'px' }">Texto</div>

Transiciones Básicas

Vue.js proporciona soporte para transiciones en elementos añadidos o eliminados del DOM:

<transition name="fade">
  <p v-if="visible">Hola, mundo!</p>
</transition>

CSS para Transiciones

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

Instalación de Vue Router

Instala el paquete Vue Router.

npm install vue-router

Configuración Básica

Configura las rutas y el router en tu aplicación Vue.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Enlace a Rutas

Usa router-link para navegar entre páginas.

<router-link to="/">Inicio</router-link>
<router-link to="/about">Acerca</router-link>

Acceder a Parámetros de Rutas

Para acceder a parámetros dinámicos en las rutas:

const routes = [
  { path: '/usuario/:id', component: Usuario }
]

En el componente:

export default {
  mounted() {
    console.log(this.$route.params.id);
  }
}

Instalación de Vuex

npm install vuex

Configuración de un Store

Define un store con state, mutations, actions, y getters.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    contador: 0
  },
  mutations: {
    incrementar(state) {
      state.contador++
    }
  },
  actions: {
    incrementar({ commit }) {
      commit('incrementar')
    }
  },
  getters: {
    contador: state => state.contador
  }
})

export default store

Acceder al Store en Componentes

Puedes acceder al store desde cualquier componente:

this.$store.state.contador
this.$store.commit('incrementar')
this.$store.dispatch('incrementar')

Instancia de Vue

La instancia principal de Vue se puede crear de la siguiente manera:

new Vue({
  el: '#app',
  data: {
    mensaje: 'Hola desde Vue!'
  }
});

Configurar el Comportamiento de Vue

Vue.config.productionTip = false;

Compilar para Producción

Usa Vue CLI para compilar el proyecto optimizado para producción.

npm run build

Servidor Local

Para correr un servidor local en el puerto 8080 (por defecto).

npm run serve