Краткое изложение одним предложением
HTML: элемент плюс v-cloak
CSS: [v-cloak]{display: none}процесс
Синтаксис Beard будет отображаться при первой загрузке страницы.
v-cloak — это простой и важный метод улучшения пользовательского опыта в небольших проектах VueJS.
использование
В HTML добавьте v-cloak в теги, необходимые для организации перепрошивки
<div id="приложение">
<nav>блаба</nav>
<main v-cloak>{{text}}</main>
</div>Установите стиль для v-cloak в CSS. Этот стиль применяется только [до компиляции экземпляра vue].
[v-плащ]{
дисплей: нет;
}принцип
Исходники не дочитал, но принцип работы v-cloak примерно понимаю:
Первый — это селектор CSS. Использование [target] выбирает «все элементы с атрибутом target». Вы можете просмотреть селекторы здесь.
Затем [v-cloak] выбирает все элементы с атрибутом v-cloak .
После завершения инициализации экземпляра VueJS удалит уникальные для Vue атрибуты. До завершения инициализации экземпляра основной HTML-код, написанный выше, на самом деле выглядит так:
<main id="main" class="row" v-cloak="">
Затем добавьте CSS для display: block все элементы с помощью v-cloak.
На самом деле, это не просто v-cloak. Вы можете попробовать это с v-if. Используйте [v-if]{display:none} в CSS, и эффект будет тот же. Как и v-cloak , v-if также удаляется после компиляции экземпляра.
Исходный код
Потом я просто прочитал исходный код, в котором говорится об этом параграфе. Желающие могут поискать и прочитать, чтобы понять.
если (isRealElement) {
// монтируем к реальному элементу
// проверяем, является ли это контентом, отображаемым на сервере, и можем ли мы выполнить
// успешная гидратация.
if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
oldVnode.removeAttribute(SSR_ATTR);
увлажнение = правда;
}
}На этом завершается статья о том, как предотвратить эффект мигания экрана Vue в небольших проектах. Дополнительную информацию о мигающих экранах Vue в небольших проектах можно найти в предыдущих статьях на сайте downcodes.com или продолжить просмотр следующих статей по теме. Надеюсь, вы все. поддержите downcodes.com больше в будущем!