Note: This article was originally published on March 15, 2017. Some information may be outdated.

Vue gained major attention in 2017 for its balance of simplicity and power.

This guide walks through building a tiny to‑do list using Vue 2.

Why Vue feels approachable

• Script tag drops you straight into coding; no build needed.
• HTML‑based templates with {{ }} interpolation feel natural.
• Reactive data binding updates the DOM automatically.
• Component API is small--just data, methods, and lifecycle hooks.
• File size is light compared with other frameworks of the time.

Set up

<script src="https://cdn.jsdelivr.net/npm/vue@2.2.6/dist/vue.js"></script>

<div id="app">
  <h1>My Todos</h1>

  <form v-on:submit.prevent="add">
    <input v-model="newTodo" placeholder="Add item" />
    <button>Add</button>
  </form>

  <ul>
    <li v-for="(todo, i) in todos" :key="i">
      {{ todo.text }}
      <button v-on:click="remove(i)">×</button>
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    add() {
      if (this.newTodo.trim()) {
        this.todos.push({ text: this.newTodo.trim() });
        this.newTodo = '';
      }
    },
    remove(index) {
      this.todos.splice(index, 1);
    }
  }
});
</script>

Key parts

• v-model binds the input value to newTodo.
• v-on:submit.prevent intercepts the form submit.
• v-for renders list items reactively.
• Direct DOM updates are not needed; Vue tracks changes.

Extending with components

<script>
Vue.component('todo-item', {
  props: ['todo', 'index'],
  template: `
    <li>
      {{ todo.text }}
      <button @click="$emit('remove', index)">×</button>
    </li>
  `
});
</script>

Replace the <li> in the previous template with:

<todo-item
  v-for="(todo, i) in todos"
  :key="i"
  :todo="todo"
  :index="i"
  @remove="remove"
/>

Components help split the UI into reusable pieces while keeping state in the parent.

Reactivity behind the scenes

Vue converts each property in data to a getter and setter.

When you read this.todos, Vue records the dependency; when you push or splice, it triggers an update.

Next steps

1. Persist todos with localStorage in the created hook.
2. Move to Single‑File Components with .vue files and a build tool.
3. Explore Vuex for larger apps requiring shared state.

Vue’s gentle learning curve and clear data flow make it a strong first framework for newcomers, while still scaling up with components, CLI tooling, and ecosystem add‑ons.