Intro to Vue

Vue is a progressive JavaScript framework for building user interfaces. It's designed to be incrementally adoptable and focuses on the view layer, making it easy to integrate with other libraries or existing projects.

Why Use Vue?

• Easy to learn with a gentle learning curve
• Reactive data binding keeps UI in sync automatically
• Single-File Components (SFCs) organize template, logic, and styles together
• Excellent documentation and supportive community

Your First Vue Component

Let's create a simple "Hello, World!" component:

<template>
  <h1>Hello, World!</h1>
</template>

<script setup>
// Component logic goes here
</script>

<style scoped>
/* Component styles go here */
</style>

Setting Up a Project (with Vite)

# Create a new Vue project with Vite
npm create vue@latest

# Follow the prompts, then:
cd my-vue-app
npm install
npm run dev

Core Concepts to Learn

• Template Syntax: Declarative rendering with directives like v-if, v-for, v-bind
• Props: Passing data from parent to child components
• Reactive State: Using ref() and reactive() for data management
• Computed Properties: Derived state that updates automatically
• Event Handling: Responding to user interactions with v-on or @

Example with Reactive State

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}
</script>

Stay curious, and happy coding! 🎯