← flaviocopes.com

The Vue.js Cheat Sheet

Published Jul 10 2018

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

Directives

Directives are attributes identified by the v- prefix.

DirectiveDescription
v-textuses the property as the text value of the element
v-htmluses the property as the text value of the element, interpreting HTML
v-ifshow an element only if the conditional is true
v-elseshows an alternative element if the preceding v-if is false
v-else-ifadds an else if block for a v-if construct
v-showsimilar to v-if, but adds the element to the DOM even if falsy. Just sets it to display: none.
v-foriterates over an array or iterable object
v-onlisten to DOM events
v-bindreactively update an HTML attribute
v-modelsets up a two-way binding for form inputs. used in form elements, updates the model when the user changes the form field value
v-onceapplies the property just once, and never refreshes it even if the data passed changes

v-bind and v-on have a shorthand format:

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

Example of v-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>

Conditionals

You can embed a conditional in an expression using the ternary operator:

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

Working with form elements

To make the model update when the change event occurs, and not any time the user presses a key, you can use v-model.lazy instead of just v.model.

Working with input fields, v-model.trim is useful because it automatically removes whitespace.

And if you accept a number instead than a string, make sure you use v-model.number.

Modifying events

I use click as an example, but applies to all possible events

For more on propagation, bubbling/capturing see my JavaScript events guide.

Mouse event modifiers

Submit an event only if a particular key is pressed

Keyboard event modifiers

Only trigger the event if a particular keyboard key is also pressed:

v-bind

Lifecycle Hooks

Built-in components

Vue provides 5 built-in components:

Global Configuration of the Vue object

The Vue.config object has these properties, which you can modify when you create the instance:

PropertyDescription
silentdefaults to false, if true suppress logs and warnings
optionMergeStrategiesallows to define a custom merging strategy for options
devtoolsdefaults to true in development, and false in production. You can override those values.
errorHandlerallows to set an error handler function. Useful to hook Sentry and other similar services
warnHandlerallows to set a warning handler function, similar to errorHandler, but for warnings instead of errors
ignoredElementsused to let Vue ignore custom elements defined outside of it, like Web Components.
keyCodeslet you define custom key aliases for v-on
performancedefaults to false. If set to true, traces the performance of Vue components in the Browser DevTools.
productionTipdefaults to true. Set to false to disable the warning “you’re in development mode” during development in the console.

Methods of the Vue object

MethodDescription
Vue.extendallows to subclass the Vue object, to create a custom profile
Vue.nextTickdefers the callback to be executed after the next DOM update cycle
Vue.setadd a property to the object
Vue.deletedelete a property from the object
Vue.directiveset (or get) a global directive
Vue.filterset (or get) a global filter
Vue.componentset (or get) a global component
Vue.useinstall a Vue.js plugin
Vue.mixinset a global mixin
Vue.compilecompile a template string into a render function
Vue.versionreturns the currently installed version of Vue

Options passed to a Vue object

When initializing a Vue object, you pass in an object:

const vm = new Vue({

})

This object accepts a number of properties.

PropertyDescription
dataallows to pass a set of reactive data that will be used by the Vue app. All reactive properties must be added at initialization time, you can’t add new ones later.
propsit’s a set of attributes that are exposed to parent components as input data.
propsDatadefault data for props. Only useful during testing
methodsa set of methods that are defined on the Vue instance
computedlike methods, but cached internally
watchallows to watch properties, and call a function when they change

Example of defining data, methods and computed properties:

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

Vue instance assets

Vue composition options

Other Vue object options

Instance properties

Given an instance of Vue, stored into a variable const vm = new Vue(/*...*/), you can inspect and interact with it.

Properties of a Vue instance

Methods Data

Events

Lifecycle Methods



I write books for developers 👇🏼

© 2023 Flavio Copes Flavio Copes made in Italy 🇮🇹 using Notion to Site Notion to Site