SFC Sintaksis Spetsifikatsiyasi ​

Umumiy ma'lumot ​

Vue Single-File Component (SFC), odatda *.vue fayl kengaytmasidan foydalanadi, Vue komponentini tasvirlash uchun HTML-ga o'xshash sintaksisdan foydalanadigan maxsus fayl formatidir. Vue SFC sintaktik jihatdan HTML bilan mos keladi.

Har bir *.vue fayli uch turdagi yuqori darajadagi til bloklaridan iborat: <template>, <script> va <style>, va ixtiyoriy ravishda qo'shimcha maxsus bloklar:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  Bu, masalan, komponent uchun hujjat bo'lishi mumkin.
</custom1>

Til Bloklari ​

<template> ​

• Har bir *.vue fayli ko'pi bilan bitta yuqori darajadagi <template> blokini o'z ichiga olishi mumkin.

• Mazmun @vue/compiler-domga o'tkaziladi, JavaScript render funksiyalariga oldindan kompilyatsiya qilinadi va eksport qilingan komponentga uning render opsiyasi sifatida biriktiriladi.

<script> ​

• Har bir *.vue fayli ko'pi bilan bitta <script> blokini o'z ichiga olishi mumkin (<script setup>dan tashqari).

• Skript ES Module sifatida bajariladi.

• Default eksport Vue komponent opsiyalari ob'ekti bo'lishi kerak, oddiy ob'ekt yoki defineComponentning qaytarilgan qiymati sifatida.

<script setup> ​

• Har bir *.vue fayli ko'pi bilan bitta <script setup> blokini o'z ichiga olishi mumkin (oddiy <script>dan tashqari).

• Skript oldindan qayta ishlanadi va komponentning setup() funksiyasi sifatida ishlatiladi, ya'ni u komponentning har bir instansiyasi uchun bajariladi. <script setup>dagi yuqori darajadagi bog'lanishlar avtomatik ravishda shablonga ochiladi. Batafsil ma'lumot uchun <script setup> haqidagi maxsus hujjatga qarang.

<style> ​

• Bitta *.vue fayli bir nechta <style> teglarini o'z ichiga olishi mumkin.

• <style> tegi joriy komponentga stillarni kapsulalash uchun scoped yoki module atributlariga ega bo'lishi mumkin (batafsil ma'lumot uchun SFC Style Featuresga qarang). Turli kapsulalash rejimlariga ega bir nechta <style> teglari bir xil komponentda aralashishi mumkin.

Maxsus Bloklar ​

Qo'shimcha maxsus bloklar har qanday loyiha-spetsifik ehtiyojlar uchun *.vue faylida kiritilishi mumkin, masalan <docs> bloki. Maxsus bloklarning haqiqiy dunyo misollari:

• Gridsome: <page-query>
• vite-plugin-vue-gql: <gql>
• vue-i18n: <i18n>

Maxsus Bloklarni qayta ishlash vositalarga bog'liq bo'ladi - agar o'zingizning maxsus blok integratsiyalaringizni qurmoqchi bo'lsangiz, batafsil ma'lumot uchun SFC custom block integrations tooling sectionga qarang.

Avtomatik Nom Aniqlash ​

SFC quyidagi holatlarda komponentning nomini uning fayl nomidan avtomatik ravishda aniqlaydi:

• Dev ogohlantirish formatlash
• DevTools tekshirish
• Rekursiv o'z-o'ziga havola, masalan FooBar.vue nomli fayl o'z shablonida <FooBar/> sifatida o'ziga havola qilishi mumkin. Bu aniq ro'yxatdan o'tkazilgan/import qilingan komponentlardan pastroq ustuvorlikka ega.

Oldindan Protsessorlar ​

Bloklar lang atributidan foydalanib oldindan protsessor tillarini e'lon qilishi mumkin. Eng keng tarqalgan holat - <script> bloki uchun TypeScript ishlatish:

<script lang="ts">
  // TypeScript ishlatish
</script>

lang har qanday blokka qo'llanilishi mumkin - masalan biz <style> bilan Sass va <template> bilan Pug ishlatishimiz mumkin:

<template lang="pug">
p {{ msg }}
</template>

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>

Eslatma: turli oldindan protsessorlar bilan integratsiya vositalar zanjiriga qarab farq qilishi mumkin. Misollar uchun tegishli hujjatlarni tekshiring:

• Vite
• Vue CLI
• webpack + vue-loader

src Importlar ​

Agar *.vue komponentlaringizni bir nechta fayllarga bo'lishni afzal ko'rsangiz, til bloki uchun tashqi faylni import qilish uchun src atributidan foydalanishingiz mumkin:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Eslatma: src importlar webpack modul so'rovlari bilan bir xil yo'l hal qilish qoidalariga amal qiladi, ya'ni:

• Nisbiy yo'llar ./ bilan boshlanishi kerak
• npm bog'liqliklaridan resurslarni import qilishingiz mumkin:

<!-- o'rnatilgan "todomvc-app-css" npm paketidan faylni import qilish -->
<style src="todomvc-app-css/index.css" />

src importlar maxsus bloklar bilan ham ishlaydi, masalan:

<unit-test src="./unit-test.js">
</unit-test>

<img src="~some-npm-package/foo.png">

Izohlar ​

Har bir blok ichida siz ishlatilayotgan tilning izoh sintaksisidan foydalanishingiz kerak (HTML, CSS, JavaScript, Pug, va boshqalar). Yuqori darajadagi izohlar uchun HTML izoh sintaksisidan foydalaning: <!-- izoh mazmuni bu yerda -->