Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to avoid {{expr}} flash to display on page before Vue.js take over?

Tags:

For example, I have somewhat large amount of spans (over 300+) in one page, each span has {{expr}} binding to display its content:

<span>{{expr}}</span>

Right after page loaded, the literal {{expr}} will flash to display on the page before VueJS takes over and display the real binding value. This looks bad to client, is there a way to avoid it?

like image 643
neolei Avatar asked Nov 15 '16 10:11

neolei


People also ask

What is mounted () in Vue?

The `mounted()` Hook in Vue The mounted() hook is the most commonly used lifecycle hook in Vue. Vue calls the mounted() hook when your component is added to the DOM. It is most often used to send an HTTP request to fetch data that the component will then render.

Why We Use $V in Vue JS?

$v is an object that calls vuelidate (at the time of writing the comment, supported in version Vue. js 2.0), which is intended to check every input, which is made in a non-html form.

What does $t mean in Vue?

Vuex is a state management pattern for vue. js. $t is the injected method from vue. js or Vue. i18n.

How do you hide an element in Vue?

Conclusion Vue gives you a bunch of good ways to hide the element on the screen. When using v-if="false" the element isn't rendered at all in the DOM. When using v-show="false" the element is rendered in the DOM, however, Vue applies the inline style display: none that hides the element completely.


1 Answers

v-cloak is the HTML attribute you are looking for.

This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

like image 92
jeerbl Avatar answered Sep 22 '22 03:09

jeerbl