Mari bercakap tentang ciri baharu dalam gaya Vue3 (ringkasan)

Vue3 telah meningkatkan gaya Artikel ini akan meringkaskan dan berkongsi dengan anda ciri baharu gaya Vue3 Saya harap ia akan membantu semua orang.

Fungsi persediaan yang diperkenalkan selepas Vue3.0 membangunkan komponen Vue seperti menulis JS Selain itu, gaya juga menambah banyak ciri baharu, seperti pengenalan pembolehubah dan fungsi, membuat css Lebih boleh digunakan semula...

Ciri gaya baharu

Versi Vue3.2 menambah baik gaya komponen fail tunggal Banyak peningkatan telah dibuat, seperti gaya tempatan, pembolehubah css dan gaya yang terdedah kepada templat. (Belajar perkongsian video: tutorial video vue)

1 gaya separa

Bila Apabila teg <style> mempunyai atribut scoped, CSSnya hanya akan digunakan pada elemen komponen semasa:

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

2. Pemilih Kedalaman

Jika anda mahu pemilih dalam gaya scoped membuat pemilihan yang lebih "mendalam", iaitu, untuk 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 menggayakannya menggunakan pemilih kedalaman.

3 Pemilih Slot

Secara lalai, gaya skop tidak akan menjejaskan <slot/> Kandungan yang diberikan , kerana ia dianggap dipegang dan diluluskan 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 mahu salah satu peraturan gaya digunakan 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. Modul CSS Sokongan

tag akan dihimpunkan ke dalam <style module>Modul CSS Dan dedahkan menjana kunci kelas CSS kepada komponen:

1 Secara lalai, objek

terdedah kepada komponen $style

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

2 Anda boleh menyesuaikan 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 melalui

useCssModule<🎜. > API dalam Digunakan dalam

dan : setup()<script setup>

<script setup>
import { useCssModule } from &#39;vue&#39;
 
// 默认, 返回 <style module> 中的类
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的类
const classesStyle = useCssModule(&#39;classes&#39;)
</script>

8. CSS Dinamik Komponen fail tunggal Teg boleh mengaitkan nilai CSS ​​​​kepada keadaan komponen dinamik melalui

fungsi CSS:

<style>v-bind (Tamat)

(Belajar perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mari bercakap tentang ciri baharu dalam gaya Vue3 (ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!