An Intro to VueJS

VueJS is one of today’s most popular frontend frameworks, known for being lightweight, flexible, and beginner-friendly. Many developers choose Vue because it’s easier to learn than Angular or React, while still offering powerful features for building dynamic web applications.

Getting Started with VueJS

Adding Vue to your project is straightforward. During development, you can include it via CDN:

<!-- development version with helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

With that one script, Vue is ready to use.

A Simple Example

Here’s a minimal example to show how Vue works.

HTML

<div id="quantum">
  {{ atom }}
</div>

JavaScript

var app = new Vue({
  el: '#quantum',
  data: {
    atom: 'Hello Electrons'
  }
})

Output

Hello Electrons

How It Works

• new Vue() creates a Vue instance.
• The el property binds Vue to the HTML element with the ID #quantum.
• The data property holds values you want to display in the DOM.

Anytime you update atom, Vue automatically updates the DOM for you. No need for manual DOM manipulation.

Without Vue

In plain JavaScript or jQuery, you’d have to manually select and update elements:

// Vanilla JavaScript
var app = document.getElementById('quantum');

// jQuery
var app = $("#quantum");

With Vue, data binding is built in, making your code cleaner and more reactive.

Why Developers Love VueJS

• Reactive data binding: DOM updates automatically when data changes.
• Simple syntax: Easy to learn for beginners.
• Flexible: Works for small projects or large apps.
• Great documentation: Clear, beginner-friendly, and well-maintained.

Wrapping Up

This example is just the beginning of what Vue can do. Once you grasp Vue instances, data binding, and templates, you’re ready to explore components, directives, and building full-scale applications.

Written by Alex Mercer

Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.