What are the differences between vue interpolation expressions and v-text instructions

Editor to share with you what are the differences between vue interpolation expressions and v-text instructions, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

{{message}} syntax can only be used in tag content

{{}} this syntax is called an interpolation expression, and any legal js expression can be written in the interpolation expression

1. Use plug-in expressions

Using plug-in expressions, there is a content flicker problem, but v-text does not flicker

{{message}}

Let vm = new Vue ({el: "# app", data: {message: "hello vue"}})

In the above code, the results are consistent if the output is normal.

However, if the network speed is slow, the plug-in expression will be output on the page first.

{{message}}

The page is then rendered normally, which is not good enough for the user experience.

two。 Using v-cloak to solve flicker problems in plug-in expressions [v-cloak]: {display:none;} {{message}}

We can use the v-cloak property to hide it at run time, but because vue automatically deletes the v-cloak property at the end of the run

So this method can be used to solve the flicker problem.

3. Plug-in expression

Plug-in expressions will only insert content and will not overwrite the original content, while v-text will overwrite the original content

-{{message}}

/ /-hello vue---- 1234556

/ / hello vue let vm = new Vue ({el: "# app", data: {message: "hello vue"}) these are all the contents of the article "what's the difference between vue interpolation expressions and v-text instructions". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!