Single File Components का परिचय
एक single-file component एक component का template, script, और style एक .vue file में साथ रखता है।
In this page:
Syntax
<template>
<!-- markup -->
</template>
<script setup>
import { ref } from 'vue';
const name = ref(value);
</script>
<style scoped>
/* styles */
</style>Single File Components
एक .vue file में एक template block, एक script (अक्सर script setup), और एक optional scoped style है। Vite जैसे Build tools इन्हें compile करते हैं।
Scoped styles सिर्फ उस component पर apply होते हैं। नीचे runnable page वही component है बिना build step के लिखा हुआ, .vue version comment में दिखाया गया है।
Note:
script setup recommended, सबसे concise SFC syntax है।
उदाहरण: Single file components
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--
Counter.vue
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<template><button @click="count++">Clicked {{ count }}</button></template>
<style scoped>button { color: teal; }</style>
-->
<div id="app"><counter-button></counter-button></div>
<script>
const app = Vue.createApp({});
app.component("counter-button", {
setup() { const count = Vue.ref(0); return { count }; },
template: '<button @click="count++" style="color:teal">Clicked {{ count }}</button>',
});
app.mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: Clicked 0
-->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. #}
आम गलतियां
- .vue files सीधे browser में load करने की कोशिश करना
- styles पर scoped भूल जाना
- template में logic रखना
चैप्टर सारांश
- SFCs template, script, और style combine करते हैं
- Vite या webpack से compiled
- scoped styles limit करता है
- script setup concise है
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: