Cara menggunakan v-cloak untuk menyelesaikan masalah kilat dalam Vue

Vue ialah rangka kerja progresif untuk membina antara muka pengguna Semakin ramai pembangun mula menggunakannya untuk membangunkan antara muka hadapan dalam projek. Dalam proses menggunakan Vue, kadangkala kita akan menghadapi beberapa masalah gaya flashing. Artikel ini akan memperkenalkan cara menggunakan v-cloak dalam Vue untuk menyelesaikan masalah ini.

Apakah masalah gaya berkelip?

Apabila Vue memaparkan komponen, apabila pengikatan data Vue digunakan dalam templat, data dihuraikan terlebih dahulu, dan kemudian perbezaan yang disebabkan oleh perubahan data dikemas kini kepada DOM. Proses ini mengambil masa tertentu, terutamanya jika data adalah kompleks atau terdapat banyak nod DOM, ia akan menyebabkan perubahan gaya ringkas apabila komponen dipaparkan apabila halaman dimuatkan Situasi ini dipanggil gaya.

Dua pelaksanaan berikut diperkenalkan masing-masing:

1 Gunakan atribut paparan CSS

Dalam komponen Vue, anda boleh menetapkan atribut paparan kepada tiada melalui gaya. atribut, dan kemudian Diubah suai untuk menyekat semasa kitaran hayat dipasang(). Selepas komponen Vue dipaparkan, semua CSS dimuatkan, yang akan menyebabkan DOM komponen disembunyikan sehingga ia mula-mula dimuatkan.

<template>
  <div class="container" v-cloak>隐藏结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

rrree

Kaedah ini agak mudah dan sesuai untuk halaman yang ringkas. Tetapi jika halaman itu rumit atau perlu memuatkan beberapa data tak segerak, kaedah ini mungkin tidak sesuai. Kemudian, anda boleh mempertimbangkan untuk menggunakan v-cloak untuk melaksanakannya.

2. Gunakan v-cloak

v-cloak ialah salah satu arahan yang disediakan oleh Vue, yang boleh digunakan untuk menyembunyikan sintaks Misai yang tidak disusun. Elemen v-jubah dan anak-anaknya akan kekal paparan:tiada sehingga sintaks Misai dihuraikan ke dalam nilai sebenar. Setelah pengkompil Vue sedia, elemen jubah v akan dialih keluar.

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

<template>
  <div class="container" v-cloak>显示结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

Gunakan arahan [v-cloak] pada komponen untuk mengawal penyembunyian, tetapkan gaya melalui c9ccee2e6ea535a969eb3f532ad9fe89 dan tetapkan elemen kepada keadaan tersembunyi. Dengan cara ini, sebelum tika Vue dimuatkan, walaupun komponen itu mengandungi banyak operasi yang memakan masa seperti permintaan tak segerak dan sifat yang dikira, kami boleh menyembunyikan komponen dan mengelakkan masalah gaya berkelip.

Kelebihan menggunakan v-cloak ialah ia akan memadamkan elemen v-cloak secara automatik selepas pengkompil Vue sedia, supaya anda tidak perlu menukar atribut paparan secara manual, memudahkan kod dan penyelenggaraan.

Penyelesaian lain

Selain daripada dua penyelesaian di atas, kami juga boleh menggunakan autoprefix pemalam postcss dalam vue-loader untuk prapemprosesan. Plugin ini secara automatik boleh menambah awalan gaya css untuk kami Walaupun ia tidak akan menyelesaikan semua masalah kelipan, ia adalah penyelesaian yang baik. Pelaksanaannya adalah seperti berikut:

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

Ringkasan

Terdapat banyak cara untuk menyelesaikan masalah gaya berkelip, dan dua kaedah di atas boleh mencapai hasil yang diharapkan. Menggunakan v-cloak ialah salah satu cara terbaik untuk membina rupa keseluruhan, tetapi sedar bahawa dalam kebanyakan kes JavaScript akan melumpuhkan animasi untuk paparan: tiada unsur. Oleh itu, apabila menggunakan v-cloak, berhati-hati dalam memilih elemen yang memerlukan kesan animasi.

Atas ialah kandungan terperinci Cara menggunakan v-cloak untuk menyelesaikan masalah kilat dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!