Vue.js Cheatsheet: A Beginner-Friendly Guide

Introduction

Vue.js is a popular JavaScript framework for building user interfaces. It is simple, flexible, and beginner-friendly. With Vue, developers can create single-page applications and dynamic web pages with less effort. This cheatsheet will give you a quick guide to important concepts, syntax, and examples so you can use Vue effectively.

1. Vue Instance

Every Vue application starts with creating a Vue instance.

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

The data function returns an object with variables that can be used in the HTML template.
mount('#app') connects Vue with the element having id="app".

2. Template Syntax

Vue uses double curly braces {{ }} to show data in HTML.

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

Anything inside {{ }} will be replaced with the value from data.

3. Directives

Directives are special attributes in Vue that start with v-.

v-bind

Binds attributes to values.

<img v-bind:src="imageUrl">

Shortcut: :src="imageUrl"

v-model

Creates two-way binding between input and data.

<input v-model="message">

v-if, v-else, v-else-if

Conditionally shows elements.

<p v-if="isVisible">Visible</p>
<p v-else>Hidden</p>

v-for

Loops through lists.

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

4. Methods

Define functions inside the Vue instance.

methods: {
  greet() {
    return "Hello, " + this.message;
  }
}

this refers to the current Vue instance.

5. Computed Properties

Used for values that depend on other data.

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

Computed properties are cached and only update when dependencies change.

6. Watchers

Run code when data changes.

watch: {
  message(newVal, oldVal) {
    console.log("Message changed from", oldVal, "to", newVal);
  }
}

7. Events

Use v-on to listen for events.

<button v-on:click="greet">Click Me</button>

Shortcut: @click="greet"

8. Class and Style Binding

Bind CSS classes or inline styles dynamically.

<p :class="{ active: isActive }">Hello</p>
<p :style="{ color: textColor }">Hello</p>

9. Components

Reusable blocks of code.

app.component('my-component', {
  template: `<p>This is my component</p>`
});

<my-component></my-component>

10. Lifecycle Hooks

Functions that run at different stages of a component.

created() {
  console.log("Component created!");
},
mounted() {
  console.log("Component mounted!");
}

Useful for initialization, fetching data, or cleanup.

11. Props

Pass data from parent to child component.

app.component('child-component', {
  props: ['title'],
  template: `<h2>{{ title }}</h2>`
});

<child-component title="Hello from parent"></child-component>

12. Emits

Send data from child to parent.

// Child component
template: `<button @click="$emit('customEvent')">Click</button>`

<!-- Parent -->
<child-component @customEvent="handleEvent"></child-component>

13. Slots

Used for content distribution.

app.component('card', {
  template: `<div class="card"><slot></slot></div>`
});

<card>
  <p>Inside slot content</p>
</card>

14. Conditional Rendering vs Show/Hide

v-if removes/creates elements in DOM.
v-show only hides elements with CSS (display: none).
Use v-show when toggling often, v-if when rarely changing.

15. Vue Router (Basics)

Used for navigation between pages.

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes
});
app.use(router);

16. Vuex (State Management Basics)

Manages global state in large apps.

const store = Vuex.createStore({
  state() {
    return { count: 0 };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
app.use(store);

Conclusion

Vue.js makes building modern web applications easier by combining HTML, CSS, and JavaScript in a simple way. Its clear syntax, reactivity system, and reusable components make it beginner-friendly and powerful. This cheatsheet covered the most important concepts like directives, methods, computed properties, watchers, events, components, and state management. Keep this as a quick reference whenever you work with Vue.