Introduction to VueJS
2 min read
Vue.js is a progressive JavaScript framework for building user interfaces. Unlike monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable — you can use it to sprinkle interactivity on a page, or power a full Single Page Application.
Key Features
- Declarative rendering — describe what the UI should look like and Vue keeps it in sync with the data
- Component-based — build encapsulated, reusable UI pieces
- Reactivity — the DOM updates automatically when your data changes
- Progressive — adopt as little or as much as you need
Vue 3 vs Vue 2
Vue 3 (released 2020) introduced the Composition API, improved TypeScript support, and the script setup syntax. All new projects should use Vue 3.
Your First Vue App (CDN)
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="count++">Clicked {{ count }} times</button>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const message = ref('Hello, Vue 3!');
const count = ref(0);
return { message, count };
}
}).mount('#app');
</script>
</body>
</html>
