The difference between vue interpolation expression and v text instruction

Directory 1. Use plug-in expressions 2. Use v-cloak in plug-in expressions to solve flicker problems 3. Plug-in expressions

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

{{}} This syntax is called interpolation expression, in which any legal js expression can be written

1. Using plug-in expressions

With plug-in expressions, there is a content flicker problem, but v-text has no flicker problem

<div id="app">

    <p>

        {{message}}

    </p>
   <p v-text="message"></p>

</div>

<script src="./js/vue.js"></script>

<script>

    let vm = new Vue({

        el:"#app",  

        data:{ 

        message:"hello vue"

    }

    })

</script>

In the above code, if the output is normal, the result is 1.

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

{{message}}

Then the page will be rendered normally, which is not good enough for the user experience.

2. Use v-cloak in plug-in expressions to solve flicker problems

<style>

    [v-cloak]:{



    display:none;

}

</style>

<div id="app">

    <p v-cloak>

        {{message}}

    </p>

    <p v-text="message"></p>

</div>

<script src="./js/vue.js"></script>

We can use v-cloak Property is hidden at run time, but because at the end of run, vue Will be automatically deleted v-cloak Attribute

So the flicker problem can be solved in this way

3. Plug-in expressions

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

<div id="app">

    <p>

        ----{{message}}----

    </p>

    // ----hello vue----

    <p v-text="message">1234556</p>

    // hello vue

</div>

<script src="./js/vue.js"></script>
<script>

    let vm = new Vue({

        el:"#app",

         data:{
       message:"hello vue"
    }
    })

</script>