First Vue app
A Vue app is a tiny object describing your data and methods, mounted onto an element of the page.
In this page:
Syntax
<div id="app">{{ message }}</div>
<script>
Vue.createApp({
data() {
return { message: 'text' };
}
}).mount('#app');
</script>First Vue app
createApp receives an options object with data, methods and more, and mount attaches the app to a DOM element. Inside the element, mustache syntax and directives are processed by Vue.
Clicking the button below changes data and the text updates automatically.
Note:
Mount on a container element, not on the body itself.
Example: First Vue app
<!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">
<p>Count: {{ count }}</p>
<button @click="increment">Add one</button>
</div>
<script>
Vue.createApp({
data() {
return { count: 0 };
},
methods: {
increment() { this.count++; },
},
}).mount("#app");
document.querySelector("button").click();
document.querySelector("button").click();
Vue.nextTick(() => console.log("count text:", document.querySelector("p").textContent));
</script>
</body>
</html>
<!-- Output:
Rendered: Count: 2Add one
console: count text: Count: 2
-->Live Example
Related Topics
Common Mistakes
- Mounting on a missing selector
- Mutating the DOM directly
- Forgetting to return data from data()
Chapter Summary
- createApp(options).mount(selector)
- data returns reactive state
- methods change state
- The DOM updates automatically
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: