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?
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.
$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.
Vuex is a state management pattern for vue. js. $t is the injected method from vue. js or Vue. i18n.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With