Vue 2 Cheat Sheet
Vue 2 Cheat Sheet
En este nuevo artículo voy añadir una pequeña ayuda sobre Vue 2.
DIRECTIVAS <element v-directive></element>
- v-text: Actualiza el contenido de texto del elemento (textContent). Se puede usar el Shorthand: ‘{{ }}’. Ejemplo: {{ value }}
- v-html: Actualiza el HTML interno del elemento. (innnerHMTL).
- v-show: Cambia la propiedad CSS de visualización del elemento.
- v-if: Añade o quita el elemento del DOM.
- v-else: Se encadena a la directiva v-if/v-else o v-if/v-else-if/v-else.
- v-else-if: Se encadena a la directiva v-if.
- v-for: Pinta el elemento x veces en función de los datos de origen.
- v-on: Adjunta un detector de eventos al elemento. Se puede usar el Shorthand: ‘@‘. Ejemplo: <button @click’>
- v-bind: Enlaza dinámicamente atributos o propiedades de componente a una expresión. Se puede usar el Shorthand: ‘:‘. Ejemplo: <elem :class>
- v-model: Crea un enlace bidireccional en un elemento o un componente.
- v-slot: Nos permite insertar contenido HTML dentro de los componentes.
- v-pre: Omitir la compilación de este elemento y todos sus elementos secundarios.
- v-cloak: Estará el elemento hasta que la instancia asociada finalice la compilación.
- v-once: Pinta el elemento y/o el componente solo una vez.
INSTANCIA / PROPIEDADES
- vm.$data: El objeto que representa el «data» que está observando la instancia de Vue.
- vm.$props: El objeto que representa las propiedades que ha recibido un componente.
- vm.$el: El elemento raíz del DOM que administra la instancia de Vue.
- vm.$options: Son las opciones en la creación de instancias para la instancia actual de Vue.
- vm.$parent: La instancia principal.
- vm.$root: La instancia raíz de Vue en el árbol de componentes actual.
- vm.$children: Los componentes secundarios directos de la instancia actual.
- vm.$slots: Se utiliza para acceder al contenido distribuido por slots.
- vm.$scopedSlots: Se utiliza para acceder al contenido distribuido por slots por contexto.
- vm.$refs: Se utiliza para acceder a la instancia del componente registrado con el atributo ref.
- vm.$isServer: Instancia actual de Vue se está ejecutando en el servidor.
- vm.$attrs: Contiene enlaces de los atributos (excepto class y style).
- vm.$listeners: Contiene los de eventos v-on sin modificadores .native.
INSTANCIA / MÉTODOS
- vm.$watch: «Vigila» una expresión o función calculada de la instancia de Vue.
- vm.$set: Es el alias de Vue.set global.
- vm.$delete: Es el alias de Vue.delete global.
INSTANCIA / EVENTOS
- vm.$on: Escucha evento personalizado.
- vm.$once: Escucha evento personalizado solo una vez.
- vm.$off: Elimina los eventos personalizados.
- vm.$emit: Emite un valor de un evento personalizado.
INSTANCIA / CICLO DE VIDA
- vm.$mount: Se usa para iniciar manualmente el montaje de una instancia de Vue sin montar.
- vm.$forceUpdate: Fuerza la instancia de Vue a volverse a renderizar.
- vm.$nextTick: Aplaza la devolución de la llamada para que se ejecute después del próximo ciclo de actualización de DOM.
CONFIGURACIÓN GLOBAL
- Vue.config.silent: Elimina todos los registros y advertencias de Vue.
- Vue.config.optionMergeStrategies: Define una estrategia de fusión personalizada para las opciones.
- Vue.config.devtools: Permite la inspección y uso de vue-devtools.
- Vue.config.errorHandler: Asigna un controlador global para los errores.
- Vue.config.warnHandler: Asigna un controlador global para las advertencias.
- Vue.config.ignoredElements: Permite a Vue ignorar los elementos personalizados definidos fuera de Vue.
- Vue.config.keyCodes: Define un alias personalizados para v-on.
- Vue.config.performance: Habilita el seguimiento para el rendimiento de inicio, compilación, procesamiento y parches del componente en el panel de línea de tiempo/rendimiento de devtools del navegador.
- Vue.config.productionTip: Impide el inicio de mensajes en producción.
API GLOBAL
- Vue.extend: Crea una «subclase» del constructor base de Vue.
- Vue.nextTick: Aplaza la devolución de la llamada para que se ejecute después del próximo ciclo de actualización de DOM.
- Vue.set: Añade una propiedad a un objeto reactivo asegurando que la nueva propiedad también sea reactiva.
- Vue.delete: Elimina una propiedad en un objeto.
- Vue.directive: Crea una directiva global.
- Vue.filter: Crea un filtro global.
- Vue.component: Crea un componente global.
- Vue.use: Instala un plugin para Vue.
- Vue.mixin: Crea un mixin global.
- Vue.compile: Compila una plantilla de texto en la función render.
- Vue.observable: Crea un objeto reactivo.
- Vue.version: Devuelve la versión instalada de Vue.
- Vue.filter: Crea un filtro global.
- Vue.component: Crea un componente global.
- Vue.use: Instala un plugin para Vue.
- Vue.mixin: Crea un mixin global.
- Vue.compile: Compila una plantilla en la función render.
- Vue.observable: Crea un objeto reactivo.
- Vue.version: Devuelve la versión instalada de Vue.
DIRECTIVAS PERSONALIZADAS
Vue nos permite crear nuestra propias directivas personalizadas.
Las directivas se pueden crear de forma global (vue.directive) o definirlas local dentro de las opciones de Vue.
Cuando definimos una directiva, este tiene una serie de ganchos (opcionales) «hooks» que se ejecutan en diferentes momentos:
- bind: Solo se llama la primera vez cuando se vincula la directiva al elemento.
- inserted: Se llama cuando el elemento vinculado se ha insertado en su nodo principal.
- update: Se llama después de que el VNode del componente contenedor se haya actualizado.
- componentUpdated: Se llama después de que se hayan actualizado el VNode del componente contenedor y los VNodes de sus elementos secundarios.
- unbind: Solo se llama una vez, cuando la directiva se desvincula del elemento.
ARGUMENTOS DE LAS DIRECTIVAS HOOKS
A cada hook se le pasan los siguientes argumentos:
- el: El elemento al que se ha vinculado la directiva.
- binding: Es un objeto que tiene las siguientes propiedades.
- name: Nombre de la directiva sin el prefijo v-.
- value: El valor pasado a la directiva. (Resultado de la evaluación)
- oldValue: El valor anterior, pero solo esta disponible en el hook update y en el hook componentUpdated.
- expression: El valor de la expresión como un string. (Expresión a evaluar).
- arg: El argumento pasado a la directiva. (v-custom-directive:status: status sería el valor de arg).
- modifiers: Un objeto que tiene los modificadores. (v-custom-directive.status.open: { status: true, open: true }).
- vnode: Es el nodo virtual creado por el compilador de Vue.
- oldVnode: El anterior nodo virtual. Solo disponible en los hooks update y componentUpdated.
FILTROS PERSONALIZADOS
Vue nos permite crear nuestro filtros personalizados y aplicarlos de dos formas diferentes:
- Mediante la interpolación de texto usando mustache ({{ exp }}).
{{ message | filter}}
- Usando v-bind.
<div v-bind:id="autoId | filter" />
Los filtros se pueden crear localmente en las opciones.
filters: { capitalize(value) { if (!value) return ''; value = value.toString(); return `${value.charAt(0).toUpperCase()} ${value.slice(1)}`; } }
Se pueden crear de forma global antes de crear la instancia de Vue.
Vue.filter('capitalize', (value) => { if (!value) return '' value = value.toString() return `${value.charAt(0).toUpperCase()} ${value.slice(1)}`; })
EVENTOS PERSONALIZADOS
En los componentes la comunicación se realiza de la siguiente forma.
Cuando queremos comunicarnos desde el padre hasta el hijo, lo haremos mediante las propiedades que tiene el hijo.
<template> <child :status="false" /> </template>
Pero cuando necesitamos comunicarnos desde el hijo al padre lo haremos mediante eventos, en nuestro caso con eventos personalizados.
Parent.vue <template> <child :status="false" @event-status="fn" /> </template> <script> export default { ... methods: { fn(payload) { console.log(payload); // true } } ... } </script> Child.vue <template> <input type="text" :disabled="status" /> </template> <script> export default { ... props: { status: { type: Boolean, default: false, } }, mounted() { this.$emit('event-status', true); } ... } </script>
TRANSICIONES
El elemento <transition> nos permite aplicar efectos de transición sobre un elemento y el tab <transition-group> sobre un grupo de elementos.
Este elemento tienen las siguientes propiedades y eventos:
- Propiedades:
- name: (string) El nombre de la clase que genera la transición.
- appear: (boolean) Aplica la transición en el renderizado inicial.
- css: (boolean) Aplica clases de transición.
- type: (string) Especifica el tipo de evento de transición y puede ser transition o animation.
- mode: (string) Controla la secuencia de tiempo en la entrada y salida. Puede ser out-in o in-out.
- duration: (number | { enter: number, leaver: number } Especificamos la duración de la transición.
- enter-class: string
- leave-class: string
- appear-class: string
- enter-to-class: string
- leave-to-class: string
- appear-to-class: string
- enter-active-class: string
- leave-active-class: string
- appear-active-class: string
- Eventos:
- before-enter
- before-leave
- before-appear
- enter
- leave
- appear
- after-enter
- after-leave
- after-appear
- enter-cancelled
- leave-cancelled
- appear-cancelled
COMPONENTES INCORPORADOS
- <component>: Es un metacomponente para renderizar componentes dinámicos.
- <transition>: Nos permite aplicar efectos de transición sobre un elemento.
- <transition-group>: Nos permite aplicar efectos de transición sobre un grupo de elementos.
- <keep-alive>: Almacena en caché las instancias del componente inactivo sin destruirlas.
- <slot>: Es un mecanismo para añadir contenido HTML dentro de los componentes.
OPCIONES DEL DATA
- data: Es un objeto para la instancia de Vue el cual convertirá esas propiedades en getters y setters reactivos.
- props: Es un listado de atributos que se exponen para que el padre pueda comunicarse con el hijo.
- computed: Propiedades calculadas que se mezclan en la instancia de Vue.
- methods: Los métodos son funciones que se mezclan en la instancia de Vue. Debemos recordar que todos los métodos tendrán su contexto vinculado automáticamente a la instancia de Vue.
- watch: Es un objeto donde las claves son una expresión que vamos a observar y su valor es la devolución de la llamada correspondiente.
SFC
Estructura básica de un Single File Component (.vue)
<template> <!-- HTML --> </template> <script> export default { // Javascript }; </script> <style> // CSS </style>
CICLO DE VIDA
En Vue existen unas fases por las que cada componente va pasando y que es conocido como ciclo de vida.
A continuación veremos el ciclo de vida en Vue:
- beforeCreate: Se ejecuta inmediatamente después de inicializar la instancia, antes de observar los datos y la configuración del observador/evento.
- created: Se ejecuta después de crear la instancia y en esta fase la instancia ha terminado de procesar las opciones, lo que significa que se ha configurado la observación de datos, propiedades calculadas, métodos y la devolución de llamadas de observación/eventos.
- beforeMount: Se ejecuta justo antes de que comience el montaje y la función de renderizado está a punto de ser llamada por primera vez.
- mounted: Se ejecuta después de que se haya montado la instancia, donde el (elemento) se reemplace por el vm.$el recién creado.
- beforeUpdate: Se ejecuta cuando los datos cambian y antes de que se actualice el DOM.
- updated: Se ejecuta después de un cambio en los datos, volviendo a renderizar el DOM virtual.
- beforeDestroy: Se ejecuta justo antes de que se destruya una instancia de Vue, además todavía tenemos acceso a la instancia.
- destroyed: Se ejecuta después de que se haya destruido una instancia de Vue.
- activated: Se ejecuta cuando se activa un componente que este activo.
- deactivated: Se ejecuta cuando se desactiva un componente que este activo.