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 elementv-html
- interprets and sets the HTML content of an elementv-if
- conditionally renders an element based on a conditionv-else
- renders an alternative element if the precedingv-if
is falsev-else-if
- adds an else if block for av-if
constructv-show
- toggles the visibility of an element based on a conditionv-for
- iterates over an array or iterable objectv-on
- listens to DOM eventsv-bind
- binds an HTML attribute to a data propertyv-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
- callsevent.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 pressedv-on:keyup.tab
- triggers the event only when the Tab key is pressedv-on:keyup.delete
- triggers the event only when the Delete key is pressedv-on:keyup.esc
- triggers the event only when the Escape key is pressedv-on:keyup.up
- triggers the event only when the Up arrow key is pressedv-on:keyup.down
- triggers the event only when the Down arrow key is pressedv-on:keyup.left
- triggers the event only when the Left arrow key is pressedv-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 createdcreated
- called after the component is createdbeforeMount
- called before the component is mounted on the DOMmounted
- called after the component is mounted on the DOMbeforeDestroy
- called before the component is destroyeddestroyed
- called after the component is destroyedbeforeUpdate
- called before a property is updatedupdated
- called after a property is updatedactivated
- called when a kept-alive component is activateddeactivated
- 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 withv-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 warningsoptionMergeStrategies
- allows you to define custom merging strategies for optionsdevtools
- determines whether Vue Devtools should be enablederrorHandler
- sets an error handler function for custom error handlingwarnHandler
- sets a warning handler function for custom warning handlingignoredElements
- allows Vue to ignore custom elements defined outside of it, such as Web ComponentskeyCodes
- lets you define custom key aliases forv-on
performance
- if true, traces the performance of Vue components in the Browser DevToolsproductionTip
- 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 profileVue.nextTick
- defers a callback to be executed after the next DOM update cycleVue.set
- adds a property to an objectVue.delete
- deletes a property from an objectVue.directive
- sets or gets a global directiveVue.filter
- sets or gets a global filterVue.component
- sets or gets a global componentVue.use
- installs a Vue.js pluginVue.mixin
- sets a global mixinVue.compile
- compiles a template string into a render functionVue.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 datapropsData
- provides default data for props (useful for testing)methods
- defines methods that can be called on the Vue instancecomputed
- defines computed properties that are cached internallywatch
- 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 theref
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 ofv-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 ofVue.set
)$delete
- deletes a property from an object (Vue’s equivalent ofVue.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 createdcreated
- called after the component is createdbeforeMount
- called before the component is mounted on the DOMmounted
- called after the component is mounted on the DOMbeforeDestroy
- called before the component is destroyeddestroyed
- called after the component is destroyedbeforeUpdate
- called before a property is updatedupdated
- called after a property is updatedactivated
- called when a kept-alive component is activateddeactivated
- 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!