Vue not working in a simple example

Question

Here is my code and i seem to have done everything correctly. what might be the problem as the output is only {{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>

and it just outputs {{message}}

only you are running vue in development mode only – Makamu Evans Aug 30 '17 at 18:15 — Makamu Evans, Aug 30 '17 at 18:15

score 2 · Answer 1 · answered Aug 30 '17 at 18:25

Hey man you forgot to close ending script tag in vue.js script/api

You were rendering whole html part in script tag like you can see in console below :

<!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>

And always inlude api/main/cdn link ahead of any operational js file

Vue not working in a simple example

1 Answers1

Linked