Ana içeriğe geç

SFC Sözdizimi Özellikleri

SFC Sözdizimi Özellikleri​

Genel Bakış​

Bir Vue Tek Dosya Bileşeni (SFC), geleneksel olarak *.vue dosya uzantısı kullanarak, bir Vue bileşenini tanımlamak için HTML benzeri bir sözdizimi kullanan özel bir dosya formatıdır. Bir Vue SFC, sözdizimsel olarak HTML ile uyumludur.

Her *.vue dosyası, üç tür üst düzey dil bloğu içerir: , , ve ``, ayrıca isteğe bağlı olarak ek özel bloklar:

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

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

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

<custom1>
  Bu, örneğin bileşen için belgelendirme olabilir.
</custom1>

Dil Blokları​

``​

  • Her *.vue dosyası en fazla bir üst düzey `` bloğu içerebilir.

  • İçerikler @vue/compiler-dom'a çıkarılacak, JavaScript render fonksiyonlarına ön işlem yapılacak ve dışa aktarılan bileşene render seçeneği olarak eklenir.

``​

  • Her *.vue dosyası en fazla bir bloğu içerebilir ( hariç).

  • Script bir ES Modülü olarak çalıştırılır.

  • Varsayılan ihracat, bir Vue bileşeni seçenek nesnesi olmalıdır, ister sade bir nesne olarak, ister defineComponent dönüş değeri olarak.

``​

  • Her *.vue dosyası en fazla bir bloğu içerebilir (normal hariç).

  • Script ön işlenir ve bileşenin setup() fonksiyonu olarak kullanılır, bu da her bileşen örneği için çalıştırılacağı anlamına gelir. içindeki üst düzey bağlamalar otomatik olarak şablona açığa çıkar. Daha fazla bilgi için'a özel belgelere` bakın.

``​

  • Tek bir *.vue dosyası birden fazla `` etiketi içerebilir.

  • Bir etiketi `scoped` veya `module` nitelikleri alabilir (daha fazla bilgi için `SFC Stil Özellikleri` bölümüne bakın) ve stilleri mevcut bileşene kapsüllemeye yardımcı olur. Farklı kapsülleme modlarına sahip birden fazla etiketi aynı bileşende karıştırılabilir.

Özel Bloklar​

Herhangi bir proje özel ihtiyacı için *.vue dosyasında ek özel bloklar dahil edilebilir, örneğin bir `` bloğu. Özel blokların bazı gerçek dünya örnekleri şunlardır:

Özel Blokların işlenmesi araçlara bağlı olacaktır - kendi özel blok entegrasyonlarınızı oluşturmak istiyorsanız, daha fazla detay için SFC özel blok entegrasyonları araçları bölümüne bakın.

Otomatik İsim Çıkartma​

Bir SFC, bileşenin adını aşağıdaki durumlarda dosya adından otomatik çıkarır:

  • Geliştirici uyarı biçimlendirmesi
  • Geliştirici Araçları incelemesi
  • Kendine referans verme, örneğin FooBar.vue adlı bir dosya şablonunda kendisine `` olarak atıfta bulunabilir. Bu, açıkça kaydedilmiş/ithal edilmiş bileşenlerden daha düşük önceliğe sahiptir.

Ön İşlemciler​

Bloklar lang niteliğini kullanarak ön işlemci dillerini belirtebilir. En yaygın durum, `` bloğu için TypeScript kullanmaktır:

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

lang, herhangi bir bloğa uygulanabilir - örneğin için [Sass](https://sass-lang.com/) ve için Pug kullanabiliriz:

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

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

Çeşitli ön işleyicilerle entegrasyon, araç zincirine bağlı olarak farklılık gösterebilir. Örnekler için ilgili belgelere göz atın:

src İthalatları​

*.vue bileşenlerinizi birden fazla dosyaya ayırmayı tercih ediyorsanız, bir dil bloğu için dış bir dosyayı içe aktarmak amacıyla src niteliğini kullanabilirsiniz:

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

Dikkat edin ki src ithalatları webpack modül istekleri ile aynı yol çözümleme kurallarını izler, bu da demektir ki:

  • Göreli yollar ./ ile başlamalıdır
  • npm bağımlılıklarından kaynakları içe aktarabilirsiniz:
<!-- kurulmuş "todomvc-app-css" npm paketinden bir dosyayı içe aktar -->
<style src="todomvc-app-css/index.css"/>

src ithalatları ayrıca özel bloklarla da çalışır, örneğin:

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

src içerisinde takma adlar kullanırken, ~ ile başlamayın, çünkü onun sonrasındaki her şey bir modül isteği olarak yorumlanır. Bu, node modülleri içindeki varlıklara referans verebileceğiniz anlamına gelir:

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

Yorumlar​

Her blok içerisinde, kullanılan dilin yorum sözdizimini (HTML, CSS, JavaScript, Pug vb.) kullanmalısınız. Üst düzey yorumlar için HTML yorum sözdizimini kullanın: ``