DEV Community

luiz tanure
luiz tanure

Posted on • Originally published at letanure.dev

Vue.js for Beginners – Building Your First Component

#vue #javascript #tutorial

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Replace the <li> in the previous template with:

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

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.

Top comments (1)

Collapse
 
hashbyt profile image
Hashbyt •

Great guide for getting started with Vue! The to-do list example is a perfect way to highlight Vue’s reactivity and ease of use. I especially liked how you explained the role of v-model and v-on:submit.prevent these are such intuitive features for beginners.