Why Won't This Vuejs “Hello World” Example Render On My Computer?
Question
I'm trying to use Vue with a Phoenix/Elixir project. After a great deal of troubleshooting I still could not get Vuejs elements to render. So I decided to test the simple "hello world" example in raw html/js.
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/
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 answers
solution1
5 ACCPTED 2016-01-13 19:49:46
Put your second script tag before </body> . The reason your code isn't working is because you're trying to mount #app before it exists. If you try to mount it after it's there it'll be fine.
solution2
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.