IIT M DIPLOMA AN EXAM QDD4 26 Oct 2025 - 26 Oct 2025

Concepts this paper tests

Auto-generated summary from the source site. Handy as a checklist; the lessons above explain each idea from scratch.

Based on the provided question paper for "Diploma Level: Modern Application Development II", the core topics, concepts, and principles revolve around Vue.js 2 (a progressive JavaScript framework for building user interfaces). Below is a structured summary of the key areas to focus on for the exam, along with a Mermaid knowledge graph to visualize the relationships between topics.

Core Topics & Concepts

1. Vue.js 2 Template Syntax

• Text Interpolation:

  • Double curly braces {{ }} for dynamic data binding (e.g., {{ message }}).
  • Alternative: v-text directive (e.g., <span v-text="message"></span>).

• Directives:

  • Prefixed with v- (e.g., v-if, v-show, v-bind, v-on).

  • Shorthand syntax:

    • v-bind:href → :href
    • v-on:click → @click

• Valid Template Syntax Examples:

  • <div>{{ message }}</div>
  • <div v-html="rawHtml"></div>
  • <input v-model="inputValue">
  • <button @click="handleClick">Click</button>

2. Conditional Rendering

• v-if vs v-show: | Directive | Behavior | DOM Impact | Performance | |-----------|--------------------------------------------------------------------------|---------------------------|----------------------| | v-if | Toggles element presence in DOM based on condition (true/false). | Removes/adds element. | Higher (re-renders). | | v-show | Toggles display: none CSS property. | Always in DOM. | Lower (no re-render).|

• Example:

  <div v-if="isVisible">Visible if true</div>
  <div v-show="isVisible">Always in DOM, toggles display</div>

3. Dynamic Attribute Binding (v-bind)

• Binds HTML attributes (e.g., class, id, href) dynamically.
• Supports objects/arrays for class/style binding.

• Examples:

  <!-- Bind class dynamically -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  <!-- Bind inline style -->
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

4. Event Handling (v-on)

• Listens to DOM events (e.g., click, submit).
• Supports modifiers (e.g., .prevent, .stop, .once).

• Example:

  <button @click.stop="handleClick">Click Me</button>

5. Two-Way Data Binding (v-model)

• Binds form inputs (e.g., input, textarea, select) to Vue instance data.

• Example:

  <input v-model="username" placeholder="Enter name">
  <p>Hello, {{ username }}!</p>

6. List Rendering (v-for)

• Renders a list of items using v-for.
• Requires a :key for performance optimization (unique identifier).

• Example:

  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>

7. Computed Properties vs Methods vs Watchers

8. Vue Instance Lifecycle Hooks

• Key hooks (order of execution):

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. destroyed

• Use Cases:

  • created: Fetch initial data.
  • mounted: Access DOM elements.
  • beforeDestroy: Clean up event listeners.

9. Components & Props

• Components: Reusable Vue instances (e.g., Vue.component('my-component', { ... })).

• Props: Custom attributes for passing data to child components.

  • One-Way Data Flow: Parent → Child (use v-bind to pass props).
  • Validation: Define prop types (e.g., String, Number, Array).

• Example:

  Vue.component('child-component', {
    props: {
      message: String,
      count: {
        type: Number,
        default: 0
      }
    },
    template: '<div>{{ message }} ({{ count }})</div>'
  });

10. Event Bus (for Cross-Component Communication)

• Use a global Vue instance to emit/listen to events.

• Example:

  // In component A:
  this.$emit('custom-event', data);

// In component B: this.$on('custom-event', (data) => { ... }); ```

11. Vue CLI & Project Structure

• Vue CLI: Command-line tool for scaffolding Vue projects.

  • Key commands:

    • vue create my-project
    • vue add router (add Vue Router)

• Typical Project Structure:

  src/
  ├── assets/          # Static files (images, CSS)
  ├── components/      # Reusable components
  ├── views/           # Route-level components
  ├── App.vue          # Root component
  ├── main.js          # Entry point
  └── router.js        # Vue Router config

12. Vue Router (Client-Side Routing)

• Key Concepts:

  • router-link: Navigation link (renders as <a>).
  • router-view: Dynamic component rendering.
  • Dynamic Routes: Use :param (e.g., /user/:id).

• Example:

  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User }
  ];
  const router = new VueRouter({ routes });

13. State Management (Vuex)

• Core Concepts:

  • State: Single source of truth (reactive data).
  • Getters: Computed properties for state.
  • Mutations: Synchronous state updates.
  • Actions: Asynchronous operations (commit mutations).

• Example Store:

  const store = new Vuex.Store({
    state: { count: 0 },
    mutations: {
      increment(state) { state.count++; }
    },
    actions: {
      incrementAsync({ commit }) {
        setTimeout(() => commit('increment'), 1000);
      }
    }
  });

14. Axios for HTTP Requests

• Promise-based HTTP client for API calls.

• Example:

  axios.get('https://api.example.com/data')
    .then(response => { this.data = response.data; })
    .catch(error => { console.error(error); });

15. Form Handling & Validation

• v-model for two-way binding.
• Validation Libraries: Vuelidate or custom validation.

• Example:

  <input v-model="email" @blur="validateEmail">
  <span v-if="errors.email">{{ errors.email }}</span>

Key Equations/Code Snippets (Math/Logic)

While this exam is primarily Vue.js-focused, some questions (e.g., Q11) may involve basic JavaScript logic or array methods. Here are essential snippets:

1. Array Filtering: ``javascript const names = ['Amit', 'Chirag', 'Bhavna']; const filtered = names.filter(name => name.toUpperCase().startsWith('A')); // Result: ['Amit'] ``

1. Object/Array Destructuring: ``javascript const user = { name: 'Amit', age: 25 }; const { name } = user; // name = 'Amit' ``

1. Arrow Functions: ``javascript const greet = (name) => Hello, ${name}!; ``

1. Promise Handling: ``javascript fetch('https://api.example.com') .then(response => response.json()) .then(data => console.log(data)); ``

1. Async/Await: ``javascript async function fetchData() { const response = await fetch('https://api.example.com'); const data = await response.json(); return data; } ``

1. Vue.js Core Concepts

2. Vue Ecosystem Tools

Exam Preparation Tips

1. Practice Vue.js Syntax:

   • Write small components using v-if, v-for, v-bind, and v-model.
   • Experiment with computed properties vs methods.

1. Understand Lifecycle Hooks:

   • Know when each hook is called (e.g., created vs mounted).

1. Master Component Communication:

   • Props (parent → child), events ($emit child → parent), and Event Bus.

1. Vue Router & Vuex:

   • Set up a mini project with routes and a central store.

1. Debugging:

   • Use Vue DevTools to inspect component hierarchy and state.

1. Review Official Docs:

   • Vue.js 2 Guide (focus on Essentials and Components sections).

1. Solve Practical Problems:

   • Build a to-do app with:

     • Add/delete tasks (v-model, v-for).
     • Filter tasks (computed).
     • Persist to localStorage (watch or created hook).