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

Syntax	Description	Example
{{ }}	Data Binding	{{ message }}
v-bind	Bind HTML attributes	v-bind:src="imageURL"
v-model	Two-way data binding	v-model="username"
v-if / v-else	Conditional rendering	<p v-if="loggedIn">Welcome</p>
v-for	Loop through data	<li v-for="item in items">{{ item }}</li>
v-on	Event listener	v-on:click="sayHello" or @click="sayHello"

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

Directive	Purpose	Example
v-text	Updates textContent	<p v-text="message"></p>
v-html	Inserts HTML content	<div v-html="rawHTML"></div>
v-show	Show/Hide element	<p v-show="isVisible">Visible</p>
v-if	Conditional rendering	<div v-if="isLoggedIn"></div>
v-else-if	Conditional alternative	<div v-else-if="hasAccess"></div>
v-else	Fallback condition	<div v-else>No Access</div>
v-for	Render list	<li v-for="(user, index) in users">{{ user.name }}</li>

---

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

Hook	When Triggered
beforeCreate	Before data initialization
created	After data initialization
beforeMount	Before mounting DOM
mounted	After mounting DOM
beforeUpdate	Before re-render
updated	After re-render
beforeUnmount	Before component destruction
unmounted	After destruction

---

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

Command	Description
npm install -g @vue/cli	Install Vue CLI
vue create project-name	Create new Vue project
npm run serve	Run local dev server
npm run build	Build for production

---

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.

# Summary

Here is what you've learned in this lesson:

• What is Vue.js?
• Setting Up Vue.js
• Vue.js Template Syntax
• Vue.js Directives
• Vue.js Event Handling
• Vue.js Computed Properties
• Vue.js Watchers
• Vue.js Components
• Vue Lifecycle Hooks
• Vue.js Conditional Rendering
• Vue.js Lists
• Vue.js Forms and v-model
• Vue.js Class & Style Binding
• Vue Router Example
• Vue CLI Quick Commands
• Vue 3 Composition API Example
• Best Practices for Vue.js
• FAQ — Vue.js Cheatsheet