Vue.js for Beginners: The Progressive Framework

Vue.js has been on my radar for a while. After React and Angular, I wanted to see what the fuss was about. Turns out, Vue hits a sweet spot between simplicity and power. Here’s my getting-started guide.

Why Vue?

Vue is “progressive”—you can use as little or as much as you need. Start with a script tag, or go full SPA with Vue CLI. The learning curve is gentler than React or Angular, but it scales to complex apps.

The Basics

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="reverseMessage">Reverse</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});
</script>

That’s it. No build step, no JSX, just HTML with some special attributes.

Key Concepts

Reactive Data

Vue automatically tracks dependencies. When data changes, the view updates. No explicit setState or subscribe.

Directives

<!-- Conditional rendering -->
<p v-if="showMessage">Now you see me</p>

<!-- Loops -->
<li v-for="item in items" :key="item.id">
  {{ item.name }}
</li>

<!-- Two-way binding -->
<input v-model="searchQuery" />

<!-- Event handling -->
<button @click="handleClick">Click me</button>

Components

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

// Usage
<todo-item 
  v-for="todo in todos"
  :key="todo.id"
  :todo="todo"
  @remove="removeTodo(todo)"
/>

Vue CLI for Bigger Projects

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

The CLI gives you single-file components (.vue files), hot reload, and a proper project structure.

Single-File Components

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Vue!'
    };
  }
};
</script>

<style scoped>
.greeting {
  color: #42b983;
}
</style>

References

• Vue.js Official Guide
• Vue CLI