What is Vue.js
Vue.js is a JavaScript framework that keeps your page automatically in sync with your data.
In this page:
What is Vue.js
Vue is a progressive framework for building user interfaces. You describe how the page should look for some data, and Vue updates the DOM whenever that data changes.
It can be dropped into a single page with a script tag or scaled up to a full single-page application.
Note:
"Progressive" means you can adopt Vue one piece at a time.
Example: What is Vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>Vue says: {{ message }}</p>
</div>
<script>
Vue.createApp({
data() {
return { title: "What is Vue?", message: "Hello, reactive world!" };
},
}).mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: What is Vue?Vue says: Hello, reactive world!
-->Related Topics
Common Mistakes
- Manipulating the DOM by hand instead of changing data
- Thinking Vue needs a build step to start
- Confusing Vue 2 syntax with Vue 3
Chapter Summary
- Vue keeps the UI in sync with data
- It is progressive and incrementally adoptable
- Works from a CDN or a build setup
- Vue 3 is the current major version
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: