What is Vue.js?

Introduction to Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces. Unlike monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

Learning Objectives

Understand Vue.js core philosophy and design principles
Learn about Vue's reactivity system
Compare Vue with other frameworks
Recognize when Vue is the right choice

Why Vue.js?

Approachable

Builds on standard HTML, CSS, and JavaScript with intuitive API

Versatile

Incrementally adoptable ecosystem scales between a library and full framework

Performant

Truly reactive, compiler-optimized rendering with minimal manual optimization

Vue.js Core Concepts

The Vue Instance

Every Vue application starts by creating a new Vue instance:

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

const message = ref("Hello Vue!")
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>

Single-File Components (SFC)

Vue uses .vue files that encapsulate template, logic, and styles in a single file. This is one of Vue's most beloved features!

Reactivity System

Vue's reactivity system is at the heart of the framework. It automatically tracks JavaScript state changes and efficiently updates the DOM.

ref() for Primitives

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

const count = ref(0)
const name = ref('Vue Developer')

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

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

Vue vs Other Frameworks

Feature	Vue	React	Angular
Learning Curve	Gentle	Moderate	Steep
Template Syntax	HTML-based	JSX	HTML-based
State Management	Pinia/Vuex	Redux/Zustand	NgRx/Services
Bundle Size	~33KB	~42KB	~130KB
TypeScript	First-class	Good support	Built-in

When to Use Vue

Quick Start Example

Here's a complete Vue 3 component showcasing the basics:

vue
<script setup lang="ts">
import { ref, computed, onMounted } from "vue"

interface Todo {
  id: number
  text: string
  completed: boolean
}

const todos = ref<Todo[]>([])
const newTodo = ref("")

const completedCount = computed(() => todos.value.filter((t) => t.completed).length)

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      completed: false,
    })
    newTodo.value = ""
  }
}

function toggleTodo(id: number) {
  const todo = todos.value.find((t) => t.id === id)
  if (todo) todo.completed = !todo.completed
}

onMounted(() => {
  console.log("Component mounted!")
})
</script>

<template>
  <div class="todo-app">
    <h1>Vue Todo App</h1>

    <form @submit.prevent="addTodo">
      <input v-model="newTodo" placeholder="Add a todo..." />
      <button type="submit">Add</button>
    </form>

    <ul>
      <li v-for="todo in todos" :key="todo.id" :class="{ completed: todo.completed }" @click="toggleTodo(todo.id)">
        {{ todo.text }}
      </li>
    </ul>

    <p>Completed: {{ completedCount }} / {{ todos.length }}</p>
  </div>
</template>

<style scoped>
.completed {
  text-decoration: line-through;
  opacity: 0.6;
}
</style>

Next Steps

Continue Learning

Now that you understand what Vue.js is, let's set up your development environment and create your first Vue application!

Next Lesson

Setting Up Vue Development Environment

Additional Resources