Vue Introduction

Vue Introduction

Vue.js is a progressive JavaScript framework for building dynamic user interfaces.

It is designed from the ground up to be incrementally adoptable.

The core library focuses strictly on the view layer, making it incredibly simple to integrate.

Why Choose Vue?

Vue is incredibly lightweight, flexible, and blazing fast.

It is extremely easy to learn if you already know standard HTML, CSS, and JavaScript.

Vue uses a "Virtual DOM", which ensures your web pages update quickly and efficiently without reloading.

Vue 3 vs Vue 2

We will be focusing on Vue 3, which is the latest, most powerful version of the framework.

Vue 3 introduces the Composition API for better logic reuse and cleaner code.

It is also much smaller in file size and generally performs significantly faster than Vue 2.

Getting Started with Vue

The easiest way to start using Vue is to include it via a CDN (Content Delivery Network).

You simply add a <script> tag to your HTML file, just like you would with jQuery.

This completely avoids the need for complex build tools or Node.js during your initial learning phase.

Your First Vue App

Let's create a simple Vue application together.

We need an HTML container (like a <div>) and a Vue instance to control it.

We define our data inside the Vue instance, and Vue dynamically injects that data into the HTML!

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

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

How It Works Under the Hood

First, Vue.createApp() creates a brand new Vue application instance.

The data() function returns an object containing the specific variables we want to use.

Finally, app.mount('#app') tells Vue to take control of the HTML element with the ID of "app".

Any double curly braces {{ }} inside that element will now magically output our data!