Vue.js Fundamentals Overview

A comprehensive introduction to Vue.js core concepts and features for beginners

What is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. It's designed to be incrementally adoptable and focuses on the view layer only.

  • Approachable: Easy to learn with existing JavaScript knowledge
  • Flexible: Can be used in small parts or full applications
  • Performant: Fast virtual DOM implementation

Core Features

  • Declarative Rendering: Bind data to the DOM
  • Components: Reusable, self-contained units
  • Directives: Special attributes with prefixed names
  • Computed Properties: Cached reactive values
  • Watchers: React to data changes

Essential Directives

  • v-bind: Dynamic attribute binding
  • v-if/v-show: Conditional rendering
  • v-for: List rendering
  • v-model: Two-way data binding
  • v-on: Event handling

Data Binding

Vue.js uses double curly braces {{ }} for interpolation:

<div id="app">
  {{ message }}
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app');
</script>

Event Handling

Use v-on directive to listen to DOM events:

<button v-on:click="counter++">
  Count: {{ counter }}
</button>

methods: {
  increment() {
    this.counter++;
  }
}

Component Structure

Components are reusable Vue instances with a name:

Vue.component('my-component', {
  template: `
    <div>
      <h2>{{ title }}</h2>
      <p>{{ content }}</p>
    </div>
  `,
  props: ['title', 'content']
});

<my-component title="Example" content="Component content"></my-component>

Interactive Example

Simple Counter

Current count: {{ count }}

Message Editor

Output: {{ message }}

Conditional Display

{{ message || 'Default message' }}