Vue.js Basics | A Beginner’s Guide

🔹 What is Vue.js?

Vue.js is a progressive JavaScript framework used for building modern, interactive web applications. Developed by Evan You, Vue is known for its simplicity, reactivity, and flexibility.

✅ Component-Based – Breaks UI into reusable components.
✅ Reactive Data Binding – Automatically updates the UI when data changes.
✅ Lightweight & Fast – Minimal footprint compared to other frameworks.
✅ Easy to Learn – Simple syntax with a gentle learning curve.

🔹 Installing Vue.js

To install Vue.js via CDN, add the following script to your HTML file:

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


To set up Vue with Vite (recommended for modern apps):
```sh
npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

🔹 Vue.js Syntax & Basics

Creating a Vue App

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

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

✅ The {{ message }} syntax is Vue’s template syntax, allowing data binding. ✅ Vue.createApp({}) initializes a Vue instance. ✅ app.mount(“#app”) attaches Vue to the HTML element.

Vue Directives

Directives are special attributes prefixed with v-, used to manipulate the DOM dynamically.

v-bind (Bind Attribute)

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

Shortcut:

<img :src="imageUrl" />

v-if, v-else, and v-show (Conditional Rendering)

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

v-for (List Rendering | Looping Over Lists)

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

v-on (Two-Way Data Binding)

<input v-model="username" />
<p>Entered Name: {{ username }}</p>

✅ Syncs input fields with Vue data.

🔹 Vue.js Components

Vue components are reusable UI elements.

Creating a Component

<script>
Vue.component("greeting-message", {
  template: "<h2>Hello from Vue Component!</h2>"
});
</script>

Using a Component

<greeting-message></greeting-message>

🔹 Vue.js Props & Events

Props (Passing Data to Components)

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

<script>
Vue.component("user-card", {
  props: ["name"],
  template: "<h3>User: {{ name }}</h3>"
});
</script>

Events ($emit)

<child-component @send-message="handleMessage"></child-component>

<script>
Vue.component("child-component", {
  template: `<button @click="$emit('send-message', 'Hello from child!')">Click Me</button>`
});

const app = Vue.createApp({
  methods: {
    handleMessage(msg) {
      alert(msg);
    }
  }
});
app.mount("#app");
</script>

✅ $emit sends an event to the parent component. ✅ The parent listens for the event using @eventName=“method”.

🔹 Vue Computed Properties & Watchers

Computed Properties (Optimized Data Processing)

<p>Full Name: {{ fullName }}</p>

<script>
const app = Vue.createApp({
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return this.firstName + " " + this.lastName;
    }
  }
});
</script>

✅ Computed properties cache results for better performance.

Watchers (Asynchronous Data Handling)

<p>Search Query: {{ searchQuery }}</p>

<script>
const app = Vue.createApp({
  data() {
    return { searchQuery: "" };
  },
  watch: {
    searchQuery(newVal) {
      console.log("Search changed to:", newVal);
    }
  }
});
</script>

✅ Watchers track changes in data and trigger functions accordingly.

🔹 Vue Router (Navigation) Install Vue Router:

npm install vue-router

Setting Up Vue Router

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;

🔹 Vuex (State Management)

Install Vuex:

npm install vuex

Setting Up Vuex Store

import { createStore } from "vuex";

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

export default store;

✅ Use Vuex for centralized state management in large applications.

🔹 Vue vs Other Frontend Frameworks

Feature	Vue.js	React	Angular
Type	Framework	Library	Framework
Learning Curve	Moderate	Easy	Steep
State Management	Vuex, Pinia	Hooks (`useState`, `useReducer`)	Services & RxJS
Performance	Fast (Reactivity System)	Fast (Virtual DOM)	Moderate
Best For	UI Components & Apps	UI Components	Enterprise Apps

🔹 Getting Started with Vue Development 1️⃣ Install Node.js → Download from Node.js Official Site
2️⃣ Create a Vue App → npm create vite@latest my-vue-app —template vue
3️⃣ Start Development Server → npm run dev
4️⃣ Build for Production → npm run build

🔹 Conclusion

Vue.js is a lightweight, flexible, and reactive framework perfect for modern web applications. Whether you’re a beginner or an experienced developer, mastering Vue’s directives, components, state management, and Vue Router will help you build powerful, scalable applications.

🚀 Next Steps? Explore Vue 3 Composition API, Vue Router, and Pinia for state management!