Bagaimana untuk menetapkan satu halaman dalam vue untuk tidak dipengaruhi oleh gaya keseluruhan

Apabila menggunakan rangka kerja Vue untuk pembangunan projek, kadangkala anda akan menghadapi masalah, iaitu halaman tertentu perlu bebas daripada keseluruhan halaman web dan tidak dipengaruhi oleh gaya keseluruhan. Artikel ini akan memperkenalkan cara untuk menetapkan satu halaman dalam Vue agar tidak dipengaruhi oleh gaya keseluruhan.

1. Isu dengan gaya global dalam Vue

Dalam kebanyakan kes, kami menggunakan rangka kerja Vue untuk membinanya mengikut gaya keseluruhan tapak web, yang bermaksud gaya CSS yang kami gunakan adalah Ia adalah gaya global. Gaya global ini mempengaruhi semua komponen dan halaman dalam aplikasi kami. Walau bagaimanapun, kadangkala kita perlu membuat halaman tidak terjejas oleh gaya ini Sebagai contoh, jika kita membuat halaman memuatkan, kami berharap halaman ini tidak akan diganggu oleh sebarang gaya dan hanya memaparkan animasi pemuatan.

2. Penyelesaian

Vue menyediakan penyelesaian yang baik, iaitu menggunakan atribut berskop. Atribut berskop ialah gula sintaksis dalam rangka kerja Vue, yang boleh mengehadkan gaya kepada skop komponen semasa. Ini adalah ciri yang sangat berguna kerana kami tidak perlu risau tentang gaya global yang mempengaruhi kandungan komponen ini.

Secara khusus, kami boleh menambah atribut berskop pada teg gaya dalam komponen. Contohnya:

<template>
  <div class="loading">
    <p>Loading...</p>
  </div>
</template>

<style scoped>
.loading {
  margin: 0 auto;
  text-align: center;
}
.loading p {
  font-size: 18px;
}
</style>

Dalam contoh di atas, kami menentukan komponen yang dipanggil memuatkan dan menambahkan atribut berskop pada teg gaya. Gaya yang ditakrifkan dengan cara ini hanya boleh berkuat kuasa dalam komponen pemuatan dan gaya komponen lain tidak akan terjejas.

Selain itu, jika kita ingin mengatasi gaya global, kita boleh menggunakan !penting untuk mengukuhkan keutamaan gaya semasa. Contohnya:

<template>
  <div class="loading">
    <p>Loading...</p>
  </div>
</template>

<style scoped>
.loading {
  margin: 0 auto!important;
  text-align: center!important;
}
.loading p {
  font-size: 18px!important;
}
</style>

Dalam contoh di atas, kami menggunakan !penting untuk memaksa gaya semasa mempunyai keutamaan yang lebih tinggi daripada gaya global, supaya gaya global boleh ditindih.

3. Ringkasan

Dalam rangka kerja Vue, menggunakan atribut berskop dengan mudah boleh menghalang gaya komponen kami daripada diganggu oleh gaya global, memastikan kebebasan komponen. Menggunakan !important membolehkan kami mengatasi gaya global dan mencapai beberapa kesan khas. Penggunaan kedua-dua kaedah ini membolehkan kami mengawal gaya laman web kami dengan lebih bebas, memberikan lebih banyak pilihan untuk pembangunan projek kami.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan satu halaman dalam vue untuk tidak dipengaruhi oleh gaya keseluruhan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!