पहला Vue App
एक Vue app आपके data और methods describe करने वाला एक छोटा object है, जो page के एक element पर mount होता है।
In this page:
Syntax
<div id="app">{{ message }}</div>
<script>
Vue.createApp({
data() {
return { message: 'text' };
}
}).mount('#app');
</script>पहला Vue App
createApp data, methods, और बाकी सब वाला एक options object receive करता है, और mount app को एक DOM element से attach करता है। Element के अंदर, mustache syntax और directives Vue से process होते हैं।
नीचे button click करना data बदलता है और text automatically update होता है।
Note:
body पर नहीं, बल्कि एक container element पर mount करें।
उदाहरण: 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/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- एक missing selector पर mount करना
- DOM को सीधे mutate करना
- data() से data return करना भूल जाना
चैप्टर सारांश
- createApp(options).mount(selector) से app शुरू होता है
- data reactive state return करता है
- methods state बदलते हैं
- DOM automatically update होता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: