La hoja de trucos de Vue.js

Comandos e instrucciones comunes que usará en sus sesiones diarias de codificación de Vue.js

Directivas

Las directivas son atributos identificados por elv-prefijo.

Directiva Descripción
v-text usa la propiedad como el valor de texto del elemento
v-html usa la propiedad como el valor de texto del elemento, interpretando HTML
v-if mostrar un elemento solo si el condicional es verdadero
v-else muestra un elemento alternativo si el anteriorv-ifEs falso
v-else-if agrega un bloque else if para unv-ifconstruir
v-show Similar av-if, pero agrega el elemento al DOM incluso si es falso. Solo lo establece endisplay: none.
v-for itera sobre una matriz u objeto iterable
v-on escuchar eventos DOM
v-bind actualizar de forma reactiva un atributo HTML
v-model configura un enlace bidireccional para las entradas de formulario. utilizado en los elementos del formulario, actualiza el modelo cuando el usuario cambia el valor del campo del formulario
v-once aplica la propiedad solo una vez y nunca la actualiza, incluso si los datos pasados cambian

v-bindyv-ontener un formato taquigráfico:

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

Ejemplo dev-if/v-else/v-else-if:

<div v-if="type === 'A'">
  it's A
</div>
<div v-else-if="type === 'B'">
  it's B
</div>
<div v-else-if="type === 'C'">
  it's C
</div>
<div v-else>
  it's neither one
</div>

Condicionales

Puede incrustar un condicional en una expresión utilizando el operador ternario:

{{ isTrue ? 'yes' : 'no' }}

Trabajar con elementos de formulario

Para realizar la actualización del modelo cuando ocurre el evento de cambio, y no cada vez que el usuario presiona una tecla, puede usarv-model.lazyen lugar de solov.model.

Trabajando con campos de entrada,v-model.trimes útil porque elimina automáticamente los espacios en blanco.

Y si acepta un número en lugar de una cadena, asegúrese de usarv-model.number.

Modificar eventos

yo sueloclickcomo ejemplo, pero se aplica a todos los eventos posibles

  • v-on:click.nativedesencadenar un evento DOM nativo en lugar de un evento Vue
  • v-on:click.stopdetener la propagación del evento de clic
  • v-on:click.passivehace uso de laopción pasiva de addEventListener
  • v-on:click.captureutilizar la captura de eventos en lugar de la propagación de eventos
  • v-on:click.selfasegúrese de que el evento de clic no haya sido generado por un evento secundario, sino que haya ocurrido directamente en ese elemento
  • v-on:click.onceel evento solo se activará exactamente una vez
  • v-on:submit.prevent: llamadaevent.preventDefault()en el evento de envío desencadenado, utilizado para evitar el envío de un formulario para volver a cargar la página

Para obtener más información sobre propagación, burbujeo / captura, consulte miGuía de eventos de JavaScript.

Modificadores de eventos del mouse

  • v-on:click .leftse activa solo al hacer clic con el botón izquierdo del mouse
  • v-on:click .rightse activa solo al hacer clic con el botón derecho del mouse
  • v-on:click .middlese activa solo al hacer clic en el botón central del mouse

Envíe un evento solo si se presiona una tecla en particular

  • v-on:keyup.enter
  • v-on:keyup.tab
  • v-on:keyup.delete
  • v-on:keyup.esc
  • v-on:keyup.up
  • v-on:keyup.down
  • v-on:keyup.left
  • v-on:keyup.right

Modificadores de eventos de teclado

Solo active el evento si también se presiona una tecla del teclado en particular:

  • .ctrl
  • .alt
  • .shift
  • .meta(cmd en Mac, tecla de Windows en Win)

v-bind

  • v-bind .propenlazar un prop en lugar de un atributo
  • v-bind .cameluse camelCase para el nombre del atributo
  • v-bind .syncun azúcar sintáctico que se expande en unv-oncontrolador para actualizar el valor enlazado. Veresta.

Ganchos de ciclo de vida

  • beforeCreatellamado antes de que se cree la aplicación
  • createdllamado después de que se crea la aplicación
  • beforeMountllamado antes de que la aplicación se monte en el DOM
  • mountedllamado después de que la aplicación esté montada en el DOM
  • beforeDestroyllamado antes de que se destruya la aplicación
  • destroyedllamado después de que se destruye la aplicación
  • beforeUpdatellamado antes de que se actualice una propiedad
  • updatedllamado después de que se actualice una propiedad
  • activatedse llama cuando se activa un componente que se mantiene vivo
  • deactivatedse llama cuando un componente que se mantiene vivo está desactivado

Componentes incorporados

Vue proporciona 5 componentes integrados:

  • <component>
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>

Configuración global del objeto Vue

losVue.configEl objeto tiene estas propiedades, que puede modificar cuando crea la instancia:

Propiedad Descripción
silent el valor predeterminado es falso, si es verdadero, suprime los registros y las advertencias
optionMergeStrategies permite definir unestrategia de fusión personalizadapara opciones
devtools por defecto es verdadero en desarrollo y falso en producción. Puede anular esos valores.
errorHandler permite configurar una función de manejo de errores. Útil para conectar Sentry y otros servicios similares
warnHandler permite configurar una función de controlador de advertencia, similar aerrorHandler, pero para advertencias en lugar de errores
ignoredElements utilizado para permitir que Vue ignore los elementos personalizados definidos fuera de él, comoComponentes Web.
keyCodes le permite definir alias de clave personalizados parav-on
performance por defecto es falso. Si se establece en verdadero, rastrea el rendimiento de los componentes de Vue en Browser DevTools.
productionTip por defecto es verdadero. Configure en falso para deshabilitar la advertencia "está en modo de desarrollo" durante el desarrollo en la consola.

Métodos del objeto Vue

Método Descripción
Vue.extend permite subclasificar el objeto Vue, para crear un perfil personalizado
Vue.nextTick difiere que la devolución de llamada se ejecute después del próximo ciclo de actualización del DOM
Vue.set agregar una propiedad al objeto
Vue.delete eliminar una propiedad del objeto
Vue.directive establecer (u obtener) una directiva global
Vue.filter establecer (u obtener) un filtro global
Vue.component establecer (u obtener) un componente global
Vue.use instalar un complemento de Vue.js
Vue.mixin establecer un mixin global
Vue.compile compilar una cadena de plantilla en una función de renderizado
Vue.version devuelve la versión instalada actualmente de Vue

Opciones pasadas a un objeto Vue

Al inicializar un objeto Vue, pasas un objeto:

const vm = new Vue({

})

Este objeto acepta varias propiedades.

Propiedad Descripción
data permite pasar un conjunto de datos reactivos que serán utilizados por la aplicación Vue. Todas las propiedades reactivas deben agregarse en el momento de la inicialización, no puede agregar nuevas más adelante.
props es un conjunto de atributos que se exponen a los componentes principales como datos de entrada.
propsData datos predeterminados para accesorios. Solo es útil durante las pruebas
methods un conjunto de métodos que se definen en la instancia de Vue
computed como métodos, pero almacenados en caché internamente
watch permite ver propiedades y llamar a una función cuando cambian

Ejemplo de definición de datos, métodos y propiedades calculadas:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => ‘olleH’ vm.message = ‘Goodbye’ console.log(vm.reversedMessage) // => ‘eybdooG’

DOM

  • elestablece el elemento DOM donde se monta la instancia. Puede ser un selector de CSS o un elemento HTMLE.
  • templatees una plantilla, representada como una cadena, que reemplazará al elemento montado
  • renderAlternativamente, para definir la plantilla, puede definir una plantilla usando una función de renderizado.
  • renderErrorestablecer una salida alternativa cuando la función adjunta arenderfalla

Activos de instancia de Vue

  • directivesel conjunto de directivas para asociar a la instancia de Vue
  • filtersel conjunto de filtros para asociar a la instancia de Vue
  • componentsel conjunto de componentes para asociar a la instancia de Vue

Opciones de composición de Vue

  • parentespecifica la instancia principal
  • mixinsestablece una matriz de objetos mixin
  • extendsextender otro componente

Otras opciones de objetos de Vue

  • nameestablecer un nombre para el componente le permite invocarlo, útil en la depuración o cuando necesita agregar de forma recursiva un componente en su plantilla
  • functionalsi es verdadero, establece el componente sin estado (nodata) y sin instancia (nothis), haciéndolo más ligero
  • modelpermite personalizar la propiedad utilizada en eventos, útil por ejemplo al interactuar con formularios
  • commentspor defecto es falso. Si se establece en verdadero, conserva los comentarios HTML que se colocan en las plantillas

Propiedades de la instancia

Dada una instancia de Vue, almacenada en una variableconst vm = new Vue(/*...*/), puede inspeccionarlo e interactuar con él.

Propiedades de una instancia de Vue

  • vm.$datael objeto de datos asociado a la instancia
  • vm.$propslos apoyos que ha recibido la instancia
  • vm.$elel elemento DOM al que está vinculada la instancia
  • vm.$optionsel objeto utilizado para crear una instancia de Vue
  • vm.$parentla instancia principal
  • vm.$rootla instancia raíz (si esta es la instancia raíz, se apunta a sí misma)
  • vm.$childrenuna serie de instancias secundarias
  • vm.$slotsuna matriz de las ranuras asociadas contenidas en la plantilla
  • vm.$scopedSlotsuna matriz de las ranuras de alcance asociadas
  • vm.$refsun objeto que contiene una propiedad para cada elemento apuntado por unrefatributo definido en la plantilla
  • vm.$isSerververdadero si la instancia de Vue se está ejecutando en el servidor (útil en la representación del lado del servidor)
  • vm.$attrsun objeto de atributos que se proporcionan al componente pero que no se definen como accesorios
  • vm.$listenersun objeto dev-onoyentes de eventos asignados al componente

Datos de métodos

  • vm.$watchconfigure un observador para los cambios de propiedad en los datos de Vue. También puede observar los cambios de valor dentro de los objetos.
  • vm.$setestablecer una propiedad
  • vm.$deleteeliminar una propiedad

Eventos

  • vm.$emitdesencadena un evento personalizado en elvmInstancia de Vue
  • vm.$onescuchar un evento personalizado en elvmInstancia de Vue
  • vm.$onceme gusta$on, pero solo escucha una vez
  • vm.$offelimina un detector de eventos de la instancia de Vue

Métodos de ciclo de vida

  • vm.$mountmontar una instancia de Vue en un elemento DOM, en caso de que aún no se haya montado
  • vm.$forceUpdateforzar elvmInstancia de Vue para volver a renderizar. No obliga a los componentes secundarios a volver a entregarse.
  • vm.$nextTickacepta una devolución de llamada y programa eso para el próximo ciclo de actualización del DOM
  • vm.$destroydestruye la aplicación y elimina todos los componentes secundarios, observadores y oyentes

Descarga mi gratisManual de Vue


Más tutoriales de vue: