SFC Syntax Specification
Overview
একটি Vue সিঙ্গেল-ফাইল কম্পোনেন্ট (SFC), প্রচলিতভাবে *.vue
ফাইল এক্সটেনশন ব্যবহার করে, একটি কাস্টম ফাইল ফরম্যাট যা একটি Vue কম্পোনেন্ট বর্ণনা করার জন্য একটি HTML-এর মতো সিনট্যাক্স ব্যবহার করে। একটি Vue SFC এইচটিএমএল এর সাথে সিনট্যাক্টিভাবে সামঞ্জস্যপূর্ণ।
প্রতিটি *.vue
ফাইলে তিন ধরনের টপ-লেভেলের ভাষা ব্লক থাকে: <template>
, <script>
, এবং <style>
, এবং ঐচ্ছিকভাবে অতিরিক্ত কাস্টম ব্লক:
vue
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>
Language Blocks
<template>
প্রতিটি
*.vue
ফাইলে সর্বাধিক একটি টপ-লেভেলেরর<template>
ব্লক থাকতে পারে।কন্টেন্ট এক্সট্রাক্ট করা হবে এবং
@vue/compiler-dom
-এ পাস করা হবে, জাভাস্ক্রিপ্ট রেন্ডার ফাংশনে প্রি-কম্পাইলড করা হবে এবং এক্সপোর্টেড কম্পোনেন্টেরর সাথে এরrender
অপশন হিসেবে সংযুক্ত করা হবে।
<script>
প্রতিটি
*.vue
ফাইলে সর্বাধিক একটি<script>
ব্লক থাকতে পারে (<script setup>
ব্যতীত)।স্ক্রিপ্টটি একটি ES মডিউল হিসাবে এক্সিকিউট করা হয়।
ডিফল্ট এক্সপোর্ট একটি Vue কম্পোনেন্ট অপশন অবজেক্ট হওয়া উচিত, হয় একটি প্লেইন অবজেক্ট হিসাবে বা defineComponent এর রিটার্ন ভ্যালু হিসাবে।
<script setup>
প্রতিটি
*.vue
ফাইলে সর্বাধিক একটি<script setup>
ব্লক থাকতে পারে (সাধারণ<script>
ব্যতীত)।স্ক্রিপ্টটি প্রি-প্রসেস করা হয় এবং কম্পোনেন্টের
setup()
ফাংশন হিসেবে ব্যবহার করা হয়, যার মানে এটি ** কম্পোনেন্টের প্রতিটি ইনস্ট্যান্সের জন্য** কার্যকর করা হবে।<script setup>
-এ টপ-লেভেলের বাইন্ডিংগুলি স্বয়ংক্রিয়ভাবে টেমপ্লেটে এক্সপোজড হয়৷ আরও বিশদ বিবরণের জন্য,<script setup>
এ ডেডিকেটেড ডকুমেন্টেশন দেখুন।
<style>
একটি একক
*.vue
ফাইলে একাধিক<style>
ট্যাগ থাকতে পারে।একটি
<style>
ট্যাগেscoped
বাmodule
অ্যাট্রিবিউট থাকতে পারে (আরো বিশদ বিবরণের জন্য SFC স্টাইল ফিচারস দেখুন) কারন্ট কম্পোনেন্টে স্টাইলগুলিকে এনক্যাপসুলেট করতে হেল্প করে। বিভিন্ন এনক্যাপসুলেশন মোড সহ একাধিক<style>
ট্যাগ একই কম্পোনেন্টে মিশ্রিত করা যেতে পারে।
Custom Blocks
যেকোনো প্রজেক্ট-স্পেসিফিক প্রয়োজনের জন্য একটি *.vue
ফাইলে অতিরিক্ত কাস্টম ব্লক অন্তর্ভুক্ত করা যেতে পারে, যেমন একটি <docs>
ব্লক। কাস্টম ব্লকের কিছু রিয়েল-ওয়াল্ড উদাহরণ অন্তর্ভুক্ত:
কাস্টম ব্লকগুলি পরিচালনা করা টুলিংয়ের উপর নির্ভর করবে - আপনি যদি নিজের কাস্টম ব্লক ইন্টিগ্রেশন তৈরি করতে চান তবে আরও জানতে SFC কাস্টম ব্লক ইন্টিগ্রেশন টুলিং বিভাগ দেখুন বিস্তারিত
Automatic Name Inference
নিম্নলিখিত ক্ষেত্রে একটি SFC অটোমেটিকলি তার filename থেকে কম্পোনেন্টটির নাম অনুমান করে:
- ডেভ সতর্কতা ফরম্যাট
- DevTools পরিদর্শন
- রিকারসিভ স্ব-রেফারেন্স, যেমন
FooBar.vue
নামের একটি ফাইল তার টেমপ্লেটে নিজেকে<FooBar/>
হিসেবে উল্লেখ করতে পারে। এটি স্পষ্টভাবে রেজিস্ট্রাড/ইমপোর্টেড করা কম্পোনেন্টগুলির তুলনায় কম অগ্রাধিকার রয়েছে৷
Pre-Processors
ব্লকগুলি lang
অ্যাট্রিবিউট ব্যবহার করে প্রি-প্রসেসর ভাষা ঘোষণা করতে পারে। সবচেয়ে সাধারণ ক্ষেত্রে <script>
ব্লকের জন্য TypeScript ব্যবহার করা হচ্ছে:
template
<script lang="ts">
// use TypeScript
</script>
lang
যেকোনো ব্লকে প্রয়োগ করা যেতে পারে - উদাহরণস্বরূপ আমরা <style>
ব্যবহার করতে পারি Sass এর সাথে এবং <template>
Pug এর সাথে /pugjs.org/api/getting-started.html):
template
<template lang="pug">
p {{ msg }}
</template>
<style lang="scss">
$primary-color: #333;
body {
color: $primary-color;
}
</style>
নোট করুন যে বিভিন্ন প্রি-প্রসেসরের সাথে একীকরণ টুলচেইনের দ্বারা পৃথক হতে পারে। উদাহরণের জন্য সংশ্লিষ্ট ডকুমেন্টেশন দেখুন:
src
Imports
আপনি যদি আপনার *.vue
কম্পোনেন্টগুলিকে একাধিক ফাইলে বিভক্ত করতে পছন্দ করেন, আপনি একটি ল্যঙ্গুয়েজ ব্লকের জন্য একটি বহিরাগত ফাইল ইম্পোর্ট করতে src
বৈশিষ্ট্য ব্যবহার করতে পারেন:
vue
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
সতর্ক থাকুন যে src
ইম্পোর্টগুলি ওয়েবপ্যাক মডিউল রিকোয়েস্ট মতো একই পথ রেজোলিউশনের নিয়ম অনুসরণ করে, যার অর্থ:
- রিলিটিভ পাথগুলি
./
দিয়ে শুরু করতে হবে৷ - আপনি npm নির্ভরতা থেকে রিসোর্স ইম্পোর্ট করতে পারেন:
vue
<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css" />
src
ইম্পোর্ট কাস্টম ব্লকের সাথেও কাজ করে, যেমন:
vue
<unit-test src="./unit-test.js">
</unit-test>
Note
src
-এ উপনাম ব্যবহার করার সময়, ~
দিয়ে শুরু করবেন না, এটিকে মডিউল অনুরোধ হিসেবে ব্যাখ্যা করার পরে যেকোনো কিছু। এর মানে আপনি নোড মডিউলের ভিতরে সম্পদ উল্লেখ করতে পারেন:
vue
<img src="~some-npm-package/foo.png">
Comments
প্রতিটি ব্লকের ভিতরে আপনি যে ল্যাঙ্গুয়েজ ব্যবহার করা হচ্ছে তার কমেন্ট সিনট্যাক্স ব্যবহার করবেন (HTML, CSS, JavaScript, Pug, ইত্যাদি)। টপ-লেভেলের কমেন্টের জন্য, HTML কমেন্ট সিনট্যাক্স ব্যবহার করুন: <!-- কমেন্ট কন্টেন্টস এখানে -->