Vue.js
Progressive JavaScript framework for building interactive user interfaces
Lessons
- What is Vue.js and Why Use It?
- Two-Way Binding with v-model
- Conditional Rendering with v-if and v-else
- Looping with v-for
- Handling Events with @click and methods
- Computed Properties (instead of Filters)
- Dynamic CSS Classes with v-bind:class
- Creating Components
- Passing Data to Components with props
- Handling Form Submission
What is Vue.js and Why Use It?
Vue.js is a JavaScript framework for building user interfaces. It's simple, fast, and easy to integrate.
Example:
<!-- HTML -->
<div id="app">
{{ message }}
</div>
<!-- Vue -->
<script>
const app = Vue.createApp({
data() {
return {
message: 'Welcome to Vue.js!'
};
}
});
app.mount('#app');
</script>
Example Description:
Two-Way Binding with v-model
v-model creates a two-way binding between form inputs and Vue data.
Example:
<div id="app">
<input v-model="name" />
<p>Hello, {{ name }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
name: ''
};
}
}).mount('#app');
</script>
Example Description:
Conditional Rendering with v-if and v-else
Use v-if and v-else to conditionally show elements.
Example:
<div id="app">
<button @click="loggedIn = !loggedIn">Toggle Login</button>
<p v-if="loggedIn">You are logged in</p>
<p v-else>Please log in</p>
</div>
<script>
Vue.createApp({
data() {
return {
loggedIn: false
};
}
}).mount('#app');
</script>
Example Description:
Looping with v-for
v-for is used to loop over arrays and render elements for each item.
Example:
<div id="app">
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
<script>
Vue.createApp({
data() {
return {
items: ['Apple', 'Banana', 'Orange']
};
}
}).mount('#app');
</script>
Example Description:
Handling Events with @click and methods
Vue allows you to bind events like clicks to methods using @click.
Example:
<div id="app">
<button @click="increase">Click Me</button>
<p>Clicks: {{ count }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
count: 0
};
},
methods: {
increase() {
this.count++;
}
}
}).mount('#app');
</script>
Example Description:
Computed Properties (instead of Filters)
Filters were removed in Vue 3. Use computed properties instead for derived values.
Example:
<div id="app">
<input v-model="message" />
<p>{{ reversedMessage }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
message: ''
};
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
}).mount('#app');
</script>
Example Description:
Dynamic CSS Classes with v-bind:class
You can bind class names dynamically based on conditions.
Example:
<div id="app">
<p :class="{ active: isActive }">Styled Text</p>
<button @click="isActive = !isActive">Toggle Class</button>
</div>
<style>
.active {
color: green;
font-weight: bold;
}
</style>
<script>
Vue.createApp({
data() {
return {
isActive: false
};
}
}).mount('#app');
</script>
Example Description:
Creating Components
Vue allows reusable UI blocks through components.
Example:
<div id="app">
<greeting></greeting>
</div>
<script>
const Greeting = {
template: '<h2>Hello from the component!</h2>'
};
const app = Vue.createApp({});
app.component('greeting', Greeting);
app.mount('#app');
</script>
Example Description:
Passing Data to Components with props
Props allow the parent component to send data to the child.
Example:
<div id="app">
<greeting name="John"></greeting>
</div>
<script>
const Greeting = {
props: ['name'],
template: '<p>Hello, {{ name }}!</p>'
};
const app = Vue.createApp({});
app.component('greeting', Greeting);
app.mount('#app');
</script>
Example Description:
Handling Form Submission
Vue can handle forms easily using v-model and @submit.prevent.
Example:
<div id="app">
<form @submit.prevent="handleSubmit">
<input v-model="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
<p>Your email: {{ email }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
email: ''
};
},
methods: {
handleSubmit() {
alert(`Submitted: ${this.email}`);
}
}
}).mount('#app');
</script>
Example Description: