Ringkasan satu kalimat
HTML: elemen plus v-cloak
CSS: [v-cloak]{tampilan: tidak ada}proses
Sintaks jenggot akan ditampilkan saat halaman pertama kali dimuat.
v-cloak adalah metode sederhana dan penting untuk meningkatkan pengalaman pengguna dalam proyek VueJS kecil.
penggunaan
Dalam HTML, tambahkan v-cloak ke tag yang Anda perlukan untuk mengatur flashing
<div id="aplikasi">
<nav>blabla</nav>
<jubah v utama>{{teks}}</main>
</div>Atur gaya untuk v-cloak di CSS. Gaya ini hanya diterapkan [sebelum instance vue dikompilasi].
[v-jubah]{
tampilan: tidak ada;
}prinsip
Saya belum selesai membaca kode sumbernya, tetapi secara kasar saya memahami prinsip v-cloak :
Yang pertama adalah pemilih CSS. Menggunakan [target] memilih "semua elemen dengan atribut target.". Anda dapat meninjau penyeleksi di sini.
Kemudian [v-cloak] memilih semua elemen dengan atribut v-cloak .
Setelah inisialisasi instance selesai, VueJS akan menghapus atribut unik pada Vue. Sebelum inisialisasi instance selesai, kode HTML utama yang ditulis di atas sebenarnya terlihat seperti ini:
<main id="main" class="baris" v-cloak="">
Kemudian tambahkan CSS untuk display: block semua elemen dengan v-cloak.
Faktanya, ini bukan hanya v-cloak. Anda dapat mencobanya dengan v-if. Gunakan [v-if]{display:none} di CSS, dan efeknya akan terlihat sama. Seperti v-cloak , v-if juga dihapus setelah instance dikompilasi.
Kode sumber
Kemudian saya baca saja source codenya, mungkin paragraf ini yang berminat bisa mencari dan membaca untuk memahaminya.
jika (isRealElement) {
// dipasang ke elemen nyata
// periksa apakah ini adalah konten yang dirender oleh server dan apakah kami dapat melakukannya
// hidrasi berhasil.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
menghidrasi = benar;
}
}Demikianlah artikel tentang cara mencegah efek layar berkedip Vue di proyek kecil. Untuk konten terkait lainnya tentang layar berkedip Vue di proyek kecil, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait berikut dukung downcodes.com lebih banyak lagi di masa mendatang!