Vue.js 2 Tutorial: Building Your First Application

Vue.js makes building interactive web applications straightforward. Let’s build a complete todo application to learn the fundamentals.

Project Setup

npm install -g @vue/cli
vue create todo-app
cd todo-app
npm run serve

The Main Component

<template>
  <div id="app">
    <h1>My Todos</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add todo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done" />
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({ id: Date.now(), text: this.newTodo, done: false });
        this.newTodo = '';
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(t => t.id !== id);
    }
  }
};
</script>

Key Concepts Used

• v-model: Two-way data binding
• v-for: List rendering
• @keyup.enter: Event handling
• :class: Dynamic CSS classes

References

• Vue.js Guide