Vue.js is a progressive JavaScript framework widely used to build user interfaces. We’ll walk through the process of setting up and creating a simple Vue.js application, highlighting key concepts and features along the way.
Setting Up the Vue Applicatione
Including Vue.js in Your Project
To start, include Vue.js in your HTML file by referencing the Vue.js CDN:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Creating the Template
In your HTML file, define a
<div> with an id attribute. This will act as the mounting point for your Vue app:<div id="app"></div>">The convention is to use id=“app”, but you can name it anything. Vue will target this element to display the content of your application.
Initializing a Vue Instance
Step 1: Setting Up the App
Create a Vue instance by calling the createApp method, and mount it to your target element:
const app = Vue.createApp({
setup() {
// Application logic goes here
},
});
app.mount('#app');Step 2: Using setup for Logic
The setup function is where you write your application logic. Here, you define reactive data and methods for your Vue app.
setup() {
let message = 'Hello Vue 3!';
return {
message,
};
}To display this message in the template, use double curly braces in your HTML:
<p>{{ message }}</p> Rendering Data Dynamically
Vue allows you to dynamically bind JavaScript variables to your template. Here’s an example that renders multiple types of data:
Displaying Strings, Booleans, and Arrays
<div id="app">
<p>Date: {{ today }}</p>
<p>Name: {{ petName }}</p>
<p>Is sleeping: {{ isSleeping ? 'yes' : 'no' }}</p>
<p>Favorite toys: {{ favoriteToys.join(', ') }}</p>
</div>In the setup function, define the corresponding variables:
setup() {
const petName = "Cleo";
const isSleeping = true;
const favoriteToys = ['ball', 'laser pointer', 'feather wand'];
const today = new Date().toLocaleString();
return {
petName,
isSleeping,
favoriteToys,
today,
};
}Displaying Objects
You can render object properties in the template as well:
<p>Věk: {{ metadata.age }} rok(ů)</p>
<p>Hmotnost: {{ metadata.weight }} kg</p>Define the object in setup:
const metadata = {
weight: 5,
age: 2,
};Returning Data
To make variables available in the template, ensure they are returned from the setup function:
return {
petName,
isSleeping,
favoriteToys,
metadata,
today,
}; Adding Logic and Computation
You can use standard JavaScript logic within setup:
Conditional Rendering
Use ternary operators to conditionally render values:
<p>Is sleeping: {{ isSleeping ? 'yes' : 'no' }}</p>Using Functions and Properties
You can define and return computed properties or functions in the setup function.
setup() {
const greeting = `Hello, today is 3/1/2025, 6:32:23 AM`;
return { greeting };
}Then, display the computed greeting in the template:
<p>{{ greeting }}</p> How Vue Works Under the Hood
• Initial Rendering: Vue processes the DOM and removes the placeholder text or elements
• Reactive Rendering: Vue renders the template dynamically based on the reactive data defined in setup
• Updates: If data changes, Vue updates the DOM automatically to reflect the latest state
Example: Complete Application
Here’s the complete code for a Vue.js app:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Date: {{ today }}</p>
<p>Name: {{ petName }}</p>
<p>Is sleeping: {{ isSleeping ? 'yes' : 'no' }}</p>
<p>Favorite toys: {{ favoriteToys.join(', ') }}</p>
<p>Age: {{ metadata.age }} year(s)</p>
<p>Weight: {{ metadata.weight }} kg</p>
</div>
<script>
const app = Vue.createApp({
setup() {
const petName = "Cleo";
const isSleeping = true;
const favoriteToys = ['ball', 'laser pointer', 'feather wand'];
const metadata = {
weight: 5,
age: 2,
};
const today = new Date().toLocaleString();
return {
petName,
isSleeping,
favoriteToys,
metadata,
today,
};
},
});
app.mount('#app');
</script>
</body>
</html>