【Vue】解决问题：插值语法无效

最新推荐文章于 2023-11-29 19:24:40 发布

a9c93f2300

最新推荐文章于 2023-11-29 19:24:40 发布

阅读量2.2k

点赞数 3

分类专栏：网络应用文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_50939789/article/details/128459138

版权

网络应用专栏收录该内容

18 篇文章 2 订阅

订阅专栏

问题

插值语法不生效，如图：

在这里插入图片描述

错误1

引入 Vue 和使用 Vue 应放在两个标签内

错误示例

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

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

</script>

正确示例

<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>

错误2

使用 Vue 的 javascript 代码应放在 body 的尾部

错误示例

<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>

正确示例

<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>