Vue.js hello world won't render
Question
I'm trying to create an Hello world app like in the get started documentation on the Vue.js site. Everything looks fine but the text isn't displayed on the page, just the html code.
Vue version : 1.0.26
Here's the html code :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue!</title> </head> <body> <div id="app"> {{message}} </div> <script src="vue.js"></script> <script src="app.js"></scrip> </body> </html>
And here's the app.js code :
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } });
Of course, vue.js is the vue.js source file and both js files are loaded.
No errors in the console
What am I doing wrong ?
2 answers
solution1
8 ACCPTED
<script src="app.js"></scrip>
You have a typo. The t is missing from your end tag. Consequently the app.js script will never load.
Methods that might have detected this:
- Look at the Developer Tools Network tab in your browser. You won't see the request for
app.js - Validate your HTML
solution2
0 2017-12-28 17:08:19
Just so you know - the data prop of a Vue component should be a function that returns an Object
data () { return { message: 'Hello vue....' } }
see: Vue JS Docs
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.