Vue js Introduction
Definition
Vue.js serves as a modern client-side architecture aimed at building responsive interactive web solutions.
It operates by enhancing regular markup via custom behavioral tags and seamlessly associating content with values using in-template replacements.
Vue is entirely developed in JavaScript and offers a lightweight alternative to comparable ecosystems such as Angular or React.
You can include it in your project by referencing the official CDN version as follows:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Why Choose Vue?
- Intuitive learning curve and fast onboarding
- Suitable for both minimal apps and large-scale products
- Extensive collaboration across a thriving contributor base
- Eliminates manual DOM manipulation by handling the connection under the hood
- Offers declarative rendering, dual data updates, and structured state logic
If these sound overwhelming now, don’t worry—this tutorial will explain them as we move forward.
Understanding Vue Syntax Options
Vue accommodates two primary authoring patterns:
- Options Pattern
- Composition Setup
Both formats accomplish similar goals, so once you're confident in one, transitioning is smooth.
This tutorial focuses on the Options Format, as its layout is more approachable for those starting out.
Let's Build a Page from Scratch
You’ll now construct your first Vue-driven HTML document through five core steps.
Step 1: Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<title>Introductory Vue Page</title>
</head>
<body>
</body>
</html>
Step 2: Target Container for Vue
Insert a container element inside your page layout. This is where Vue will be applied:
<body>
<div id="starter"></div>
</body>
Step 3: Load Vue from CDN
Add the external reference to the Vue library so the browser understands Vue-specific code:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Step 4: Instantiate Vue Application
Next, define a Vue application instance, including a text field inside the data function:
<div id="starter"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const starterApp = Vue.createApp({
data() {
return {
text: "Greetings, Universe!"
}
}
})
starterApp.mount('#starter')
</script>
Step 5: Render with Template Syntax
To insert the message onto the screen, use the curly-brace binding:
<div id="starter"> {{ text }} </div>
What happens: Vue finds text and places the value directly into the web view.
Full Example — First Web App Using Vue
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue App Launch</title>
</head>
<body>
<div id="starter">
{{ text }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const starterApp = Vue.createApp({
data() {
return {
text: "Greetings, Universe!"
}
}
});
starterApp.mount('#starter');
</script>
</body>
</html>
What Is Interpolation?
Interpolation allows Vue to insert variable values straight into your markup notation.
The browser sees:
<div id="starter">{{ text }}</div>
And transforms it into:
<div id="starter">Greetings, Universe!</div>
Use JavaScript Inside Interpolation
You’re not limited to plain strings. You can execute basic logic inline:
<div id="starter">
{{ text }} <br>
{{ 'Lucky number: ' + Math.floor(Math.random() * 10 + 1) }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const starterApp = Vue.createApp({
data() {
return {
text: "Greetings, Universe!"
}
}
})
starterApp.mount('#starter')
</script>
Prefer Learning by Watching?
Watch these YouTube tutorials to understand VUE JS Tutorial visually:
What You'll Learn:
- 📌 What Is Vue JS? | Introduction to Vue JS | Vue JS Explained | Vue JS for Beginners | Simplilearn
- 📌 What is Vue.js? | Vue.js Explained in 2 Minutes For BEGINNERS.