Vue.js Cheatsheet — The Ultimate Developer Reference

php Guru

· November 24, 2025 · 5 min read · Updated November 24, 2025

📌 Key Takeaways

Vue.js Cheatsheet — The Ultimate Developer Reference
What is Vue.js?
Setting Up Vue.js
Vue.js Template Syntax
Vue.js Directives
Vue.js Event Handling

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.

php Guru