Question

这是我的代码，我似乎完成了所有事情。可能是什么问题，因为输出只是{{message}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>

<script src="https://vuejs.org/js/vue.js"/>
<script>
    new Vue({
        el: '#app',
        data:{
            message: "Yow"
        },
        mounted: function () {
            console.log("Mounted")
        }
    });
</script>
</body>
</html>

它只输出{{message}}

Answer 1

嘿，你忘了在vue.js script / api

中关闭结尾脚本标签

您正在脚本标记中呈现整个html部分，就像您可以在下面的控制台中看到的那样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
</script>
<script>
    console.log('hi');
    var app = new Vue({
        el: '#app',
        data:{
            message: 'yow'
        },
        mounted: function () {
            console.log("Mounted")
        }
    });
</script>
</body>

并且总是在任何操作js文件之前包含api / main / cdn链接

Vue不是一个简单的例子

1 个答案: