In Vue 3 (especially when using the Composition API), fetching data cleanly and reactively is simple once you understand the pattern.Let’s go through it step-by-step using both fetch() and axios. 🌐 1. Where to Fetch Data? Usually, you’ll fetch data inside the onMounted() lifecycle hook — this ensures: The component is mounted in the…
Slots let you pass content (HTML, text, or components) from a parent into a child component, so you can create highly reusable, flexible UI components. Let’s break them down step-by-step:→ Default Slots→ Named Slots→ Scoped Slots 🧩 1. What Is a Slot? A slot is a placeholder inside a component’s template where the parent…
🧩 1. What Is a Component? A component in Vue is a reusable building block that encapsulates: HTML (template) CSS (style) JavaScript logic (script) Each Vue app is built by nesting components together like LEGO pieces. 🟢 2. Creating a Basic Component ✅ Example: HelloWorld.vue <template> <h2>Hello, {{ name }}!</h2> </template> <script setup> const…
🧩 1. What is setup()? 🧠 Concept: The setup() function is the entry point for using the Composition API inside a Vue component.It runs before the component is created — and is used to define: Reactive state (ref, reactive) Computed properties Methods Watchers Lifecycle hooks (onMounted, etc.) Whatever you return from setup() becomes available…
⚙️ 1. What Are Methods? In Vue, methods are regular JavaScript functions you define inside the component.They are used for logic, event handling, and manipulating data — but unlike computed properties, they do not cache results. ✅ Example: Basic Methods <template> <div> <p>Count: {{ count }}</p> <button @click="increment">+</button> <button @click="decrement">−</button> </div> </template> <script setup>…
🧠 1. Computed Properties 📘 What they are Computed properties are reactive values that depend on other reactive data.They are cached and automatically re-run only when their dependencies change. ✅ Example: Basic Computed Property <template> <div> <input v-model="firstName" placeholder="First name"> <input v-model="lastName" placeholder="Last name"> <p>Full name: {{ fullName }}</p> </div> </template> <script setup> import…
🧩 1. Interpolation ({{ }}) Interpolation lets you insert dynamic data into your HTML templates. ✅ Example: <template> <h1>Hello, {{ name }}!</h1> </template> <script setup> const name = 'Vue Learner' </script> <template> <h1>Hello, {{ name }}!</h1> </template> <script setup> const name = 'Vue Learner' </script> 🧠 Output: Hello, Vue Learner! Hello, Vue Learner! You…
In Spring, the Validator interface is used for custom validation logic on objects, typically before saving them to a database or processing user input. 🧩 Purpose Validate fields of a Java object (e.g., form input). Can implement complex rules not possible with simple annotations (@NotNull, @Size). Works with Spring MVC’s @Valid or programmatically. Key…
Spring Web Request Lifecycle — describes the sequence of steps an HTTP request goes through in a Spring (Boot) application from arrival to response. 🧩 Lifecycle Steps Client sends HTTP requestBrowser, mobile app, or client sends request to the server. Servlet Container (Tomcat/Jetty)The request hits the Servlet container, which delegates it to DispatcherServlet. DispatcherServlet…
Spring Caching — a framework feature that allows you to store method results in cache to improve performance and reduce database or computation load. 🧩 Purpose When a cached method is called with the same parameters again, Spring returns the cached result instead of executing the method. Basic Example: @Service public class UserService {…