[Vue] Solve the problem: Invalid interpolation syntax

question

The interpolation syntax does not take effect, as shown in the figure:

Insert image description here

Error 1

Import Vueand use Vueshould be placed within two tags

Error example

<script type="text/javascript" src="./vue.js">
    Vue.config.productionTip = true

    const x = new Vue({
    
    
        el: '#root',
        data: {
    
    
            name:"zjh"
        }
    })

</script>

Correct example

<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = true

    const x = new Vue({
    
    
        el: '#root',
        data: {
    
    
            name:"zjh"
        }
    })

</script>

Error 2

Code using should Vuebe placed at the end ofjavascriptbody

Error example

<html>
    <head>
    
        <script type="text/javascript" src="./vue.js"></script>
        
        <script type="text/javascript">
            Vue.config.productionTip = true
            const x = new Vue({
    
    
                el: '#root',
                data: {
    
    
                    name:"zjh"
                }
            })
        </script>
        
    </head>
    <body>
        <div id="root">
            Hello, {
    
    {
    
    name}}
        </div>
    </body>
</html>

Correct example

<html>
    <head>
        <script type="text/javascript" src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
            Hello, {
    
    {
    
    name}}
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = true

            const x = new Vue({
    
    
                el: '#root',
                data: {
    
    
                    name:"zjh"
                }
            })
        </script>
    </body>
</html>

Guess you like

Origin blog.csdn.net/m0_50939789/article/details/128459138