Vue Cheatsheet

Updated September 2026 · Quick reference

View saved

Vue builds UIs with declarative templates and a reactive data model.

Prefer the Composition API (script setup) for new work; Options API still appears in older codebases.

Full lessons: Vue Tutorials

Templates & basics

Text interpolation

Mustache syntax binds text content.

v-bind

Bind attributes dynamically. Shorthand is :.

v-on / @

Listen to DOM events. Shorthand is @.

v-if / v-show

v-if conditionally renders; v-show toggles CSS display.

Ready

Also ready

v-for

Render lists. Provide a stable :key.

Composition API

script setup

Single-file component setup with automatic exposes.

ref

Reactive value for primitives and objects. Access with .value in script.

const count = ref(0)
count.value++

reactive

Reactive object. Prefer ref for replacements of the whole value.

const state = reactive({ name: 'Ada', n: 0 })
state.n++

computed

Derived state that updates when dependencies change.

const doubled = computed(() => count.value * 2)

Props & emits

defineProps

Declare inputs from the parent.

const props = defineProps({
  title: { type: String, required: true },
})

defineEmits

Declare events the component can emit upward.

const emit = defineEmits(['save', 'cancel'])
emit('save', payload)

v-model

Two-way binding sugar for a prop + update event.

Slots

Let parents inject content into a child layout.

Lifecycle & forms

onMounted

Run after the component is mounted to the DOM.

import { onMounted } from 'vue'
onMounted(() => {
  // fetch or measure DOM
})

watch

React to changes explicitly when computed is not enough.

watch(count, (n, prev) => {
  console.log(prev, '->', n)
})

Form input

v-model works with inputs, checkboxes, and selects.

createApp

Mount the root app (when not using a framework scaffold).

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Comments

One comment per signed-in account. Comments are saved with this page’s URL.