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 c9ccee2e6ea535a969eb3f532ad9fe89 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 38b537b6886351ac721d89624ba185ca 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 c9ccee2e6ea535a969eb3f532ad9fe89 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

a6167d77ee734aaef6dcd2aa69de7b33 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>

2 nama modul yang disuntik

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

7. Digunakan dengan persediaan Kelas

yang disuntik boleh digunakan dalam

dan setup() melalui useCssModule API: 5101c0cdbdc49998c642c71f6b6410a8rreee

8. CSS Dinamik

Teg

bagi komponen fail tunggal boleh mengaitkan nilai CSS kepada keadaan komponen dinamik melalui c9ccee2e6ea535a969eb3f532ad9fe89 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!