为什么此Vuejs“ Hello World”示例不会在我的计算机上呈现？
[英]Why Won't This Vuejs “Hello World” Example Render On My Computer?
问题描述
I'm trying to use Vue with a Phoenix/Elixir project. 
我正在尝试将Vue用于Phoenix / Elixir项目。 After a great deal of troubleshooting I still could not get Vuejs elements to render. 经过大量的故障排除后，我仍然无法获取Vuejs元素。 So I decided to test the simple "hello world" example in raw html/js. 因此，我决定在原始html / js中测试简单的“ hello world”示例。
It won't work either. 也不行。 What am I doing wrong? 我究竟做错了什么？
Here's the jsfiddle I'm trying to duplicate on my computer: https://jsfiddle.net/yyx990803/okv0rgrk/ 这是我要在计算机上复制的jsfiddle： https ://jsfiddle.net/yyx990803/okv0rgrk/
Here's the code: 这是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vue Test</title>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
2 个解决方案
解决方案1
5 已采纳 2016-01-13 19:49:46
Put your second script tag before </body> . 将您的第二个script标签放在</body>之前。 The reason your code isn't working is because you're trying to mount #app before it exists. 您的代码无法正常工作的原因是，您试图在#app挂载之前挂载它。 If you try to mount it after it's there it'll be fine. 如果您尝试在安装之后再安装它，那就没问题了。
解决方案2
2 2016-10-23 08:48:52
Here is a minimal example: 这是一个最小的示例：
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<!-- Must put the script below after the app div -->
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.