Trouble activating Vue.Js

2

See below the structure of my small project;

<!DOCTYPEhtml><html><head><title>Mybooks</title><linkrel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.css">
</head>

<body>
<div class="container" id="hello">
    <div class="row">
        <h1>{ { msg } }</h1>
    </div>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="js/app.js"></script>
</body>
</html>

This is my js file with the name of app.js

var hello = new vue({
    el:'#hello',
    data:{
        msg: "Hello Vue"
    }
});

It was meant to look like this;

Butitlookslikethis;

Why is this happening?

    
asked by anonymous 19.09.2017 / 18:01

1 answer

2

The Vue template compiler uses the syntax Mustache and therefore requires that the {{ and }} braces are side by side, with no spaces. This is correct syntax.

Then change to:

<h1>{{ msg }}</h1>
    
19.09.2017 / 18:09