<html>
<head><script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
</body>
</html>
这样写Hello World，可以吗？不可以！
为什么不可以？不可以的背后隐藏了什么秘密？说明了什么问题？
如果你一开始反应不过来，那只能说明一个问题：JavaScript基础有问题。
Js解析器从前往后解析代码，当它解析到以下代码的el: '#app'时，它就傻了。没有id为app的元素啊！
new Vue({
el: '#app',data: {
message: 'Hello World!'
}
});
知道了吧，调换顺序，就可以啦。
<html>
<head>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
</script>
</html>
还有一点需要注意：那就是<script type="text/javascript" src="js/vue.js"></script>中vue.js相对于当前页面(vue.html)的位置。
扫一扫
962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
