Vue 2

Vue 2 Cheat Sheet

Vue.js 2 commands cheat sheet

Vue General

Built-in components

Remembers the state of non-active dynamic components
Moves an element to another place in the DOM structure
Animates an element as it is removed from, or added to, our application with v-if or v-show, or with dynamic components.
Animates elements that are added to our page with v-for


{{ property }}
Render dynamic text based on the value of property
Template ref: a reference to an element in the template
element will be exposed there
Note: only accessible after the component is mounted
<childComp/> or <childComp>slot content</childComp>
Render child component
<childComp :childProp="dataProp"/>
Parent can pass the prop to the child just like attributes. To pass a dynamic value, we can also use the v-bind syntax
<childComp @eventName=(arg) => parentProp = arg"/>
Parent can listen to child-emitted events using v-on
In child template: <slot/> or <slot> fallback content </slot>
Parent can pass down template fragments to the child
<slot name='name'></slot>
In parent: <template v-slot:name> content </template>
Specify a name to the slot.
By default, the name is 'default'


Sets the inner text
v-bind:attr="prop" or :attr="prop"
Bind an attribute to a dynamic value: reactive updates attribute
v-on:click="fct" or @click="fct"
Listen to DOM events and execute fct from methods()
2 way data bounding: automatically syncs the form's value to the bound state
updates on change event
removes extra whitespace
always return a number
v-else, v-else-if
Render only if property is truthy
v-for="element in array" :key="element.obj"
v-for="(element, index) in array" :key="element.obj"
*array can be replaced by a computed property
Render a list of elements based on array
Note: always use key
Sets val once; Never update
Toggles display CSS value
Sets the inner HTML


data() {
return {
property: value
Properties returned from data() become reactive state and will be exposed on
methods: {
function() {
code including
Methods are functions that mutate state and trigger updates. They can be bound as event handlers in templates.
mounted() {
Lifecycle hooks are called at different stages of a component's lifecycle. This function will be called when the component is mounted
computed: {
fct() {
return code
Tracks other reactive state used in its computation as dependencies. It caches the result and automatically updates it when its dependencies change.
watch: {
prop() {
The watch callback is called when prop changes, and receives the new value as the argument
components: {
Register child component
inside child component
props: {
prop: value
Child component can accept input from the parent
inside child component
emits: ['eventName'],
created() {
this.$emit('eventName', '*additional arg')
Child component emits events to the parent


import ChildComp from './ChildComp.vue'
export default {
data(), computed:, methods:, mounted(), watch:,
components:, emits:, created()
Where to write vue.js script
<template> ... </template>
Where to write the "HTML" code
<style scoped> ... </style>
Where to write the CSS code
Applied to elements of the current component only

Create an app with Vite

To install npm you might need Node.js:
router, ESLint for good code quality and Prettier for code formatting
npm install : install project dependencies
npm run format : code formatting (from Prettier)
npm run dev: starts development server
vite build: create a production build

Main ideas

Single-File Components (*.vue)
encapsulates the component's logic (JavaScript), template (HTML), and styles (CSS) in a single file
Options API
beginner-friendly by abstracting away the reactivity details and enforcing code organization via option groups
Note: there exists also the composition API