Frameworks
Vue.js Cheat Sheet
Print-ready cheat sheet for Vue.js, organized for fast lookup, study, and desk-side use
Sample
What's in this cheat sheet
- Template Syntax
- Reactivity
- Computed & Watchers
- Components
- Props & Events
- Slots
- Composition API
- Router (Vue Router)
- Lifecycle Hooks
- Lists & Conditionals
- Form Handling
Text & Expressions
<span>{{ message }}</span>
<span>{{ count + 1 }}</span>
<span>{{ ok ? 'Yes' : 'No' }}</span>
<span v-html="rawHtml"></span>
Directives
{{ expr }} | Text interpolation |
v-bind:attr / :attr | Bind attribute to expression |
v-on:event / @event | Attach event listener |
v-model | Two-way binding (forms) |
v-if / v-else-if / v-else | Conditional rendering |
v-show | Toggle display CSS (stays in DOM) |
v-for | List rendering |
v-slot / #name | Named slot content |
Attribute Binding
<img :src="imageUrl" :alt="desc" />
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>
<button :disabled="isLoading">Submit</button>
Download the full cheat sheet for all sections, formatted for print
Download PDFDownloads
Choose the treatment that matches how you read
-
Recommended
Standard
B&W, ink-efficient. The default for laser printers and photocopies
Best for Printouts and desk-side reference
-
Color
Warm color accents for on-screen reading or color printers
Best for Screen reading or color printers
-
Reference Card
Maximum density, 4-column layout. Everything on one page
Best for Fast scanning and minimum paper use
