Vue.js Cheatsheet — The Ultimate Developer Reference

Vue.js is a progressive JavaScript framework for building dynamic user interfaces and single-page applications (SPAs).
It’s lightweight, fast, and easy to integrate into existing web projects — making it one of the most popular front-end frameworks in modern development.

This Vue.js Cheatsheet is your quick go-to reference for writing clean, efficient Vue code — perfect for both beginners and experienced developers.

What is Vue.js?

Vue.js is an open-source front-end JavaScript framework designed to make UI development simple and flexible.
It uses a declarative and component-based approach, allowing developers to easily manage data, logic, and presentation.

✅ Key Features:

• Reactive Data Binding
• Virtual DOM Rendering
• Component-based Architecture
• Two-way Data Binding
• Transitions and Animations
• Routing and State Management

Setting Up Vue.js

1. Using CDN

<script src="https://unpkg.com/vue@3"></script>

2. Creating a Vue App

<div id="app">
  {{ message }}
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      message: "Hello Vue.js!"
    }
  }
});
app.mount('#app');
</script>

Vue.js Template Syntax

vue.js cheatsheet, vue.js tutorial, vue directives, vue components, vue data binding, vue computed properties, vue lifecycle hooks, vue router example, vue beginner guide, vue.js quick reference

Vue.js Directives

Vue.js Event Handling

<button @click="increment">Add Count</button>
<p>Count: {{ count }}</p>

<script>
const app = Vue.createApp({
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
});
app.mount('#app');
</script>

Vue.js Computed Properties

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

Vue.js Watchers

watch: {
  count(newVal, oldVal) {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  }
}

Watchers are ideal for reacting to data changes — such as API calls or animations.

Vue.js Components

Global Component

app.component('user-card', {
  props: ['name'],
  template: `<div>Hello, {{ name }}</div>`
});

Usage

<user-card name="Alice"></user-card>

Vue Lifecycle Hooks

Vue.js Conditional Rendering

<p v-if="isLoggedIn">Welcome back!</p>
<p v-else>Please log in</p>

Vue.js Lists

<ul>
  <li v-for="(fruit, index) in fruits" :key="index">{{ fruit }}</li>
</ul>

Vue.js Forms and v-model

<input v-model="username" placeholder="Enter your name">
<p>Hello, {{ username }}</p>

Vue.js Class & Style Binding

<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

Vue Router Example

Install:

npm install vue-router

Setup:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Vue CLI Quick Commands

Vue 3 Composition API Example

import { createApp, ref } from 'vue';

const App = {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};
createApp(App).mount('#app');

Best Practices for Vue.js

✅ Use computed instead of long inline expressions
✅ Prefer components for reusable UI blocks
✅ Manage routes with Vue Router
✅ Use Vuex or Pinia for state management
✅ Keep template markup clean and minimal

FAQ — Vue.js Cheatsheet

Q1: What is Vue.js mainly used for?
Vue.js is used to build responsive, component-based web interfaces and single-page applications.

Q2: Is Vue.js easier than React?
Yes, Vue.js is generally considered easier for beginners due to its simpler syntax and smaller learning curve.

Q3: Can Vue.js work with Node.js?
Yes. Vue.js handles the frontend, while Node.js powers the backend for full-stack development.

Q4: What are Vue.js directives?
Directives like v-if, v-for, v-bind, and v-model are special attributes that control DOM behavior.

Q5: What’s new in Vue 3?
Vue 3 introduces the Composition API, Teleport, and improved performance with a smaller bundle size.