Vue.js Guide

Introduction

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed from the ground up to be incrementally adoptable.

Installation

Include Vue via CDN:

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Or install with npm:

npm install vue@next

Basic Example

Create a Vue app and bind it to a DOM element:

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

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

Reactive Data

Data defined in the data() function is reactive. Updating it updates the DOM automatically.

Components

Define reusable components:

app.component('counter', {
  template: `
    <div>
      <button @click="count++">Increment</button>
      <p>Count: {{ count }}</p>
    </div>
  `,
  data() {
    return { count: 0 }
  }
})
<counter />

Computed Properties

Computed properties are cached based on their dependencies:

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

Lifecycle Hooks

Vue provides hooks like mounted, created, updated, etc., to run code at specific stages.

Interactive Demo

Try the counter component below: