Vue Introduction
Understanding the basics of Vue.js framework
🌟 What is Vue.js?
Vue.js is a progressive JavaScript framework for building user interfaces. It focuses on the view layer and makes it easy to create interactive web applications with reactive data binding and component composition.
<!-- Basic Vue Application -->
<div id="app">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
title: 'Learning Vue',
description: 'Vue makes web development fun!'
}
}
}).mount('#app')
</script>
Output:
Learning Vue
Vue makes web development fun!
Core Vue Concepts
Data
Store your application state
data() {
return {
message: 'Hello'
}
}Methods
Functions to handle user actions
methods: {
greet() {
alert('Hi!')
}
}Template
HTML with Vue syntax
<div>
{{ message }}
</div>Directives
Special attributes for functionality
<p v-if="show">
Visible
</p>🔹 Vue Application Structure
Every Vue application starts by creating an app instance and mounting it to a DOM element. The data function returns an object containing your reactive data properties.
<!DOCTYPE html>
<html>
<head>
<title>My Vue App</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<h1>{{ heading }}</h1>
<p>{{ content }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
heading: 'My First Vue App',
content: 'This is reactive data!'
}
}
}).mount('#app')
</script>
</body>
</html>Output:
My First Vue App
This is reactive data!
🔹 Interpolation (Mustache Syntax)
Vue uses double curly braces {{ }} to display data in your templates. This is called text interpolation and automatically updates when the data changes.
<div id="app">
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
<p>{{ name }} is {{ age }} years old</p>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
name: 'John',
age: 25
}
}
}).mount('#app')
</script>Output:
Name: John
Age: 25
John is 25 years old
🔹 Methods in Vue
Methods are functions defined in your Vue app that can be called from templates. They're perfect for handling user interactions like button clicks or form submissions.
<div id="app">
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
changeMessage() {
this.message = 'Message Changed!'
}
}
}).mount('#app')
</script>Output:
Hello Vue!
🔹 Reactive Data Example
Vue's reactivity system automatically tracks data changes and updates the DOM. When you modify data properties, the view updates instantly without manual DOM manipulation.
<div id="app">
<h3>Counter: {{ counter }}</h3>
<button @click="counter++">Increment</button>
<button @click="counter--">Decrement</button>
<button @click="counter = 0">Reset</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
counter: 0
}
}
}).mount('#app')
</script>