Vue.js Overview
Vue.js is an approachable, performant and versatile framework for building web user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces of any complexity.
Key Features
- Reactive Data Binding: Automatically updates DOM when data changes.
- Components: Modular, reusable UI building blocks.
- Directives: Special attributes with v- prefix.
- Composition API: Better logic reuse and organization.
- Single File Components: HTML, JS, CSS in one .vue file.
- Vue CLI: Standard tooling for Vue development.
- Vuex: Centralized state management.
Common Use Cases
Interactive Web Interfaces
Building dynamic, reactive user interfaces.
Single Page Applications
With Vue Router for navigation.
Prototyping
Quickly build interactive prototypes.
Progressive Enhancement
Add interactivity to existing pages.
Example Code
// Vue 3 Composition API example
import { createApp, ref, computed } from 'vue';
const app = createApp({
setup() {
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() {
count.value++;
}
return {
count,
double,
increment
};
},
template: `
<button @click="increment">
Count is: {{ count }}, double is: {{ double }}
</button>
`
});
app.mount('#app');
// Single File Component example (in .vue file)
/*
<template>
<div class="greeter">
<input v-model="name" placeholder="Enter your name">
<p v-if="name">Hello, {{ name }}!</p>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
}
}
</script>
<style scoped>
.greeter {
color: #42b983;
}
</style>
*/