Apakah ciri baharu dalam gaya Vue3 dan cara menggunakannya

Ciri gaya baharu

Versi Vue3.2 telah membuat banyak peningkatan kepada gaya komponen fail tunggal, seperti gaya tempatan, pembolehubah css dan Gaya didedahkan untuk kegunaan templat, dsb. (Belajar perkongsian video: tutorial video vue)

1 Gaya separa

Apabila teg <style> mempunyai atribut scoped, CSSnya hanya akan Digunakan pada. unsur-unsur komponen semasa:

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

2. Pemilih kedalaman

Jika anda ingin menjadikan pemilih dalam gaya scoped Pilihan yang lebih "mendalam", itu ialah: mempengaruhi subkomponen, anda boleh menggunakan :deep() pseudo-class:

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

Kandungan DOM yang dibuat melalui v-html tidak akan dipengaruhi oleh gaya skop, tetapi anda masih boleh menggunakan Pemilih kedalaman untuk menggayakannya.

3 Pemilih Slot

Secara lalai, gaya skop tidak akan menjejaskan kandungan yang diberikan oleh <slot/> kerana ia dianggap Ia dipegang dan diluluskan dalam oleh komponen induk. Gunakan kelas pseudo :slotted untuk menyasarkan kandungan slot dengan tepat sebagai pemilih:

<style scoped>
:slotted(div) {
  color: red;
}
</style>

4. Pemilih Global

Jika anda ingin memiliki salah satu gaya peraturan Untuk menerapkannya secara global, bukannya mencipta <style> yang lain, anda boleh menggunakan kelas pseudo :global:

<style scoped>
:global(.red) {
  color: red;
}
</style>

5. Campurkan gaya tempatan dan global

Anda juga boleh memasukkan kedua-dua gaya berskop dan tidak berskop dalam komponen yang sama:

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

6. Sokongan Modul CSS

<style module> teg akan disusun. Modul CSS dan mendedahkan kunci kelas CSS yang dihasilkan kepada komponen:

1 Secara lalai, ia terdedah kepada komponen sebagai $style

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

<template>
  <p :class="classes.red">red</p>
</template>
 
<style module="classes">
.red {
  color: red;
}
</style>

7. Digunakan dengan persediaan Kelas

dan setup() melalui useCssModule API: <script setup>rreee

8. CSS Dinamik

bagi komponen fail tunggal boleh mengaitkan nilai CSS kepada keadaan komponen dinamik melalui <style> fungsi CSS: v-bindrreeee

Atas ialah kandungan terperinci Apakah ciri baharu dalam gaya Vue3 dan cara menggunakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!