The Vue.js Cheat Sheet: A Comprehensive Guide for Developers | Tech Wiki Online

The Vue.js Cheat Sheet: A Comprehensive Guide for Developers

tags: [“Vue.js”, “JavaScript”, “Frontend development”, “Web development”]

In this article, we will provide you with a comprehensive cheat sheet of common commands and instructions that you can use while coding in Vue.js. This cheat sheet covers a wide range of topics, including directives, working with form elements, modifying events, mouse event modifiers, keyboard event modifiers, lifecycle hooks, built-in components, global configuration of the Vue object, methods of the Vue object, and options passed to a Vue object.

Directives

Directives in Vue.js are attributes identified by the v- prefix. These directives allow you to control the behavior of HTML elements and bind them to data properties in your Vue instance. Here are some commonly used directives:

• v-text - sets the text value of an element
• v-html - interprets and sets the HTML content of an element
• v-if - conditionally renders an element based on a condition
• v-else - renders an alternative element if the preceding v-if is false
• v-else-if - adds an else if block for a v-if construct
• v-show - toggles the visibility of an element based on a condition
• v-for - iterates over an array or iterable object
• v-on - listens to DOM events
• v-bind - binds an HTML attribute to a data property
• v-model - sets up two-way data binding for form inputs

Directives like v-bind and v-on also have shorthand formats (e.g., :href instead of v-bind:href and @click instead of v-on:click).

For example, you can use v-if and v-else to conditionally render elements based on a condition:

<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

In Vue.js, you can embed conditionals in expressions using the ternary operator. For example:

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

This will display “yes” if isTrue is true and “no” if isTrue is false.

Working with Form Elements

When working with form elements in Vue.js, you can use various modifiers to control their behavior. Here are some commonly used modifiers:

• .lazy - updates the model only when the change event occurs, not on every keypress
• .trim - automatically removes leading and trailing whitespace from the input value
• .number - ensures that the input value is treated as a number, not a string

For example, you can use v-model.lazy to update the model when the change event occurs:

<input v-model.lazy="message">

Modifying Events

In Vue.js, you can modify events using event modifiers. Here are some examples:

• .native - triggers a native DOM event instead of a Vue event
• .stop - stops the event propagation
• .passive - makes use of the passive option of addEventListener
• .capture - uses event capturing instead of event bubbling
• .self - checks if the event was directly triggered on the element, not by a child element
• .once - ensures that the event will only be triggered once
• .prevent - calls event.preventDefault() on the triggered event, useful for preventing form submission

For example, you can use v-on:click.native to trigger a native DOM click event:

<button v-on:click.native="doSomething">...</button>

Mouse Event Modifiers

Vue.js provides event modifiers specifically for mouse events. Here are some examples:

• .left - triggers only on a left mouse button click
• .right - triggers only on a right mouse button click
• .middle - triggers only on a middle mouse button click

For example, you can use v-on:click.left to trigger an event only when the left mouse button is clicked:

<button v-on:click.left="doSomething">...</button>

Submit an Event Only If a Particular Key Is Pressed

Vue.js allows you to submit an event only if a particular key is pressed. Here are some examples:

• v-on:keyup.enter - triggers the event only when the Enter key is pressed
• v-on:keyup.tab - triggers the event only when the Tab key is pressed
• v-on:keyup.delete - triggers the event only when the Delete key is pressed
• v-on:keyup.esc - triggers the event only when the Escape key is pressed
• v-on:keyup.up - triggers the event only when the Up arrow key is pressed
• v-on:keyup.down - triggers the event only when the Down arrow key is pressed
• v-on:keyup.left - triggers the event only when the Left arrow key is pressed
• v-on:keyup.right - triggers the event only when the Right arrow key is pressed

For example, you can use v-on:keyup.enter to trigger an event only when the Enter key is pressed:

<input v-on:keyup.enter="submitForm">

Keyboard Event Modifiers

Similarly, Vue.js allows you to trigger an event only if a particular keyboard key is pressed. Here are some examples:

• .ctrl - triggers the event only when the Ctrl key is pressed
• .alt - triggers the event only when the Alt key is pressed
• .shift - triggers the event only when the Shift key is pressed
• .meta - triggers the event only when the Meta key (Cmd on Mac, Windows key on Windows) is pressed

For example, you can use v-on:keydown.ctrl to trigger an event only when the Ctrl key is pressed:

<input v-on:keydown.ctrl="deleteSelectedItems">

Lifecycle Hooks

Vue.js provides various lifecycle hooks that allow you to execute code at specific stages of a component’s lifecycle. Here are some commonly used hooks:

• beforeCreate - called before the component is created
• created - called after the component is created
• beforeMount - called before the component is mounted on the DOM
• mounted - called after the component is mounted on the DOM
• beforeDestroy - called before the component is destroyed
• destroyed - called after the component is destroyed
• beforeUpdate - called before a property is updated
• updated - called after a property is updated
• activated - called when a kept-alive component is activated
• deactivated - called when a kept-alive component is deactivated

You can use these hooks to perform initialization, cleanup, and other actions depending on the stage of the component’s lifecycle.

Built-in Components

Vue.js provides several built-in components that you can use in your applications. Here are some examples:

• <component> - renders a dynamic component based on the value of a data property
• <transition> - provides CSS transition and animation support
• <transition-group> - similar to <transition>, but for multiple elements
• <keep-alive> - caches and keeps alive components that are toggled with v-if
• <slot> - defines the content placeholder for a component template

You can learn more about these components in the Vue.js documentation.

Global Configuration of the Vue Object

The Vue.config object allows you to globally configure the behavior of the Vue object. Here are some commonly used properties:

• silent - if true, suppresses logs and warnings
• optionMergeStrategies - allows you to define custom merging strategies for options
• devtools - determines whether Vue Devtools should be enabled
• errorHandler - sets an error handler function for custom error handling
• warnHandler - sets a warning handler function for custom warning handling
• ignoredElements - allows Vue to ignore custom elements defined outside of it, such as Web Components
• keyCodes - lets you define custom key aliases for v-on
• performance - if true, traces the performance of Vue components in the Browser DevTools
• productionTip - if true, warns you that you’re in development mode in the console

You can modify these properties when creating a Vue instance to customize their behavior according to your needs.

Methods of the Vue Object

The Vue object provides several methods that you can use during development. Here are some commonly used methods:

• Vue.extend - allows you to create a subclass of the Vue object to create a custom profile
• Vue.nextTick - defers a callback to be executed after the next DOM update cycle
• Vue.set - adds a property to an object
• Vue.delete - deletes a property from an object
• Vue.directive - sets or gets a global directive
• Vue.filter - sets or gets a global filter
• Vue.component - sets or gets a global component
• Vue.use - installs a Vue.js plugin
• Vue.mixin - sets a global mixin
• Vue.compile - compiles a template string into a render function
• Vue.version - returns the currently installed version of Vue

These methods provide various functionalities for extending and manipulating the Vue object.

Options Passed to a Vue Object

When initializing a Vue object, you can pass a configuration object that can contain several properties. Here are some commonly used properties:

• data - sets the initial reactive data for the Vue app (note that reactive properties must be added during initialization)
• props - defines the attributes exposed to parent components as input data
• propsData - provides default data for props (useful for testing)
• methods - defines methods that can be called on the Vue instance
• computed - defines computed properties that are cached internally
• watch - allows you to watch properties and execute a function when they change

These properties allow you to customize and control the behavior of your Vue instance.

Instance Properties

Once you have an instance of Vue, you can inspect and interact with its properties. Here are some commonly used instance properties:

• $data - the data object associated with the instance
• $props - the props received by the instance
• $el - the DOM element to which the instance is bound
• $options - the options used to instantiate the Vue instance
• $parent - the parent instance
• $root - the root instance (points to itself if this is the root instance)
• $children - an array of child instances
• $slots - associated slots contained in the template
• $scopedSlots - associated scoped slots
• $refs - an object containing properties for elements referenced with the ref attribute
• $isServer - true if the Vue instance is running on the server (useful for server-side rendering)
• $attrs - an object of attributes provided to the component but not defined as props
• $listeners - an object of v-on event listeners assigned to the component

These properties allow you to access and manipulate the state of your Vue instance.

Methods Data

The Vue instance provides several methods that you can use to manipulate data and perform actions. Here are some commonly used methods:

• $watch - sets up a watcher for property changes in the Vue data (supports watching for nested values as well)
• $set - adds or sets a property on an object (Vue’s equivalent of Vue.set)
• $delete - deletes a property from an object (Vue’s equivalent of Vue.delete)

These methods allow you to manage the state of your Vue instance.

Events

The Vue instance also provides methods for working with events. Here are some commonly used event-related methods:

• $emit - triggers a custom event on the Vue instance
• $on - listens for a custom event on the Vue instance
• $once - listens for a custom event once (only triggers the event once)
• $off - removes an event listener from the Vue instance

These methods enable you to handle and manage events within your Vue application.

Lifecycle Methods

Vue.js provides several lifecycle hooks that allow you to execute code at specific stages of a component’s lifecycle. Here are some commonly used lifecycle methods:

• beforeCreate - called before the component is created
• created - called after the component is created
• beforeMount - called before the component is mounted on the DOM
• mounted - called after the component is mounted on the DOM
• beforeDestroy - called before the component is destroyed
• destroyed - called after the component is destroyed
• beforeUpdate - called before a property is updated
• updated - called after a property is updated
• activated - called when a kept-alive component is activated
• deactivated - called when a kept-alive component is deactivated

These lifecycle methods allow you to perform actions at specific stages of a component’s life.

By referring to this Vue.js cheat sheet, you’ll have a handy reference of common commands and instructions that you can use in your day-to-day Vue.js coding sessions. It will help you save time and easily remember the syntax and options for various Vue.js features and functionalities. Happy Vue.js coding!