Petua untuk menggunakan CSS berskop untuk mencapai pengasingan gaya komponen dalam Vue

Petua untuk menggunakan CSS berskop untuk melaksanakan pengasingan gaya komponen dalam Vue

Vue ialah rangka kerja JavaScript yang popular dan struktur komponennya mempercepatkan kecekapan pembangunan bahagian hadapan. Pada masa yang sama, apabila saiz aplikasi meningkat, penyelenggaraan gaya menjadi lebih sukar. Dalam kes ini, Vue menyediakan teknologi ringkas tetapi berkuasa yang dipanggil CSS berskop yang boleh membantu kami mencapai pengasingan gaya komponen. Dalam artikel ini, kami akan meneroka cara menggunakan teknologi CSS berskop untuk mencapai pengasingan gaya komponen.

Pengenalan kepada CSS Scoped

Dalam Vue, kita boleh menggunakan Pemilih CSS Tahap 3 untuk membangunkan gaya bagi komponen. Seperti yang ditunjukkan di bawah:

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style>
.my-component p {
  color: red;
}
</style>

Kod ini mencipta komponen yang dipanggil my-component dan menggunakan Pemilih CSS Tahap 3 dalam komponen. Gaya hanya digunakan pada

elemen dalam elemen .my-component, teknik yang dipanggil skop gaya. Apabila bilangan komponen bertambah, ini boleh menyebabkan konflik gaya, di mana dua komponen mempunyai jenis CSS yang sama, yang membawa kepada isu paparan yang berpotensi. Untuk menyelesaikan masalah ini, Vue menyediakan kata kunci yang dipanggil scoped yang boleh mengehadkan gaya kepada skop komponen. Seperti yang ditunjukkan di bawah:

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style scoped>
p {
  color: red;
}
</style>

Dalam contoh ini, gaya hanya digunakan pada elemen

Nota

• skop CSS bukanlah teknologi baharu, tetapi aplikasi pada Vue.
• CSS berskop menggunakan tag pseudo, seperti scoped, yang hanya boleh digunakan pada tag gaya.
• CSS berskop dilaksanakan dengan menambahkan teg kelas pseudo pada setiap elemen yang digunakan Anda boleh mengehadkan skop gaya dengan menambahkan teg ini, tidak kira sama ada elemen yang sama digunakan dalam berbilang komponen.

Kod Contoh CSS Berskop

Untuk menunjukkan teknologi CSS berskop, kami akan mencipta sampel yang mengandungi dua komponen. Setiap komponen akan mengandungi gaya yang berbeza.

Pertama, kami akan mencipta komponen pertama kami yang akan menggayakan borang dengan butang. Dalam komponen ini, butang akan ditanda merah, dengan warna latar belakang hitam dan jidar tebal.

<template>
  <div>
    <h3>Component 1</h3>
    <form class="my-form">
      <button class="my-button">Submit</button>
    </form>
  </div>
</template>

<style scoped>
.my-form button {
  background-color: black;
}

.my-form .my-button {
  color: red;
  background-color: white;
  border: 2px solid black;
  font-weight: bold;
}
</style>

Seterusnya, kami mencipta komponen kedua, komponen ini akan mengandungi kotak input dan bar kemajuan dengan peluncur. Dalam komponen ini, bar kemajuan akan ditandakan hijau dan kotak input teks akan ditetapkan kepada kelabu.

<template>
  <div>
    <h3>Component 2</h3>
    <div class="progress">
      <input type="text" class="input-text">
      <div class="slider"></div>
    </div>
  </div>
</template>

<style scoped>
.input-text {
  color: gray;
}

.progress .slider {
  background-color: green;
  height: 10px;
  width: 50%;
}
</style>

Dalam kod sampel ini, kami menggunakan teknologi CSS berskop untuk memastikan gaya setiap komponen tidak menjejaskan komponen lain. Ini akan memastikan bahawa setiap komponen hanya mengandungi gaya yang berkaitan dan tidak terjejas oleh komponen lain.

Ringkasan

Dalam artikel ini, kami membincangkan teknologi CSS berskop dalam Vue. Ia membolehkan kami menskop gaya dalam komponen untuk mengelakkan konflik gaya antara komponen yang berbeza. Gunakan petua dalam artikel ini untuk melaksanakan pengasingan gaya komponen dalam projek Vue anda yang seterusnya. Ini akan menjadikan kod anda lebih modular dan boleh diselenggara.

Atas ialah kandungan terperinci Petua untuk menggunakan CSS berskop untuk mencapai pengasingan gaya komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!