A Simple Analogy

Vue.js is like a smart whiteboard. You write data on it, draw instructions, and when data changes, the whiteboard automatically updates the display. No manual DOM manipulation—Vue handles it.

---

What Is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. It provides reactive data binding—when data changes, UI updates automatically.

---

Why Use Vue?

• Reactive: UI automatically updates with data
• Simple: Easy to learn and use
• Flexible: Works for small widgets or full apps
• Developer experience: Great tooling and documentation
• Progressive: Start simple, scale as needed

---

Vue Basics

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increaseCount">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
      count: 0
    };
  },
  methods: {
    increaseCount() {
      this.count++;
    }
  }
};
</script>

<style scoped>
h1 { color: blue; }
</style>

---

Reactivity

<template>
  <div>
    <input v-model="name" placeholder="Enter name">
    <p>Hello, {{ name }}!</p>
    <p v-if="name">Name length: {{ name.length }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { name: "" };
  }
};
</script>

---

Computed Properties

<template>
  <div>
    <input v-model="firstName" placeholder="First name">
    <input v-model="lastName" placeholder="Last name">
    <p>Full name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { firstName: "", lastName: "" };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

---

Conditional & List Rendering

<template>
  <div>
    <!-- Conditional -->
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in</p>
    
    <!-- List rendering -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true,
      items: [
        { id: 1, name: "Laptop", price: 999 },
        { id: 2, name: "Mouse", price: 29 }
      ]
    };
  }
};
</script>

---

Component Props & Events

<!-- Parent -->
<template>
  <TodoItem 
    v-for="todo in todos" 
    :key="todo.id"
    :todo="todo"
    @delete="deleteTodo"
  />
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: "Learn Vue" },
        { id: 2, text: "Build app" }
      ]
    };
  },
  methods: {
    deleteTodo(id) {
      this.todos = this.todos.filter(t => t.id !== id);
    }
  }
};
</script>

<!-- Child (TodoItem.vue) -->
<template>
  <div class="todo">
    <span>{{ todo.text }}</span>
    <button @click="$emit('delete', todo.id)">Delete</button>
  </div>
</template>

<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  }
};
</script>

---

Lifecycle Hooks

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  },
  mounted() {
    console.log("Component mounted");
    this.fetchData();
  },
  updated() {
    console.log("Component updated");
  },
  beforeUnmount() {
    console.log("Component about to unmount");
  },
  methods: {
    async fetchData() {
      const response = await fetch("/api/data");
      this.data = await response.json();
    }
  }
};
</script>

---

Best Practices

1. One component per file: Use .vue single-file components
2. Props for data down: Parent passes to child
3. Events for data up: Child emits to parent
4. Computed for derived state: Don't manually update
5. Watchers sparingly: Usually computed is better

---

Related Concepts to Explore

• Vue Router (navigation)
• Pinia (state management)
• Composition API (alternative to Options API)
• Component libraries (Vuetify, Element)
• Vue DevTools

---

Summary

Vue.js makes building reactive UIs simple with automatic data binding and component composition. Master props, events, and computed properties to build interactive applications efficiently.