Active problems with Vue.Js

Asked

Viewed 27 times

2

See below the structure of my small project;

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html>
<head>
    <title>My books</title>
    <link rel="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 app.js

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

It was supposed to appear like this;

inserir a descrição da imagem aqui

But it appears so;

inserir a descrição da imagem aqui

I wonder why this is happening?

vue.js mustache.js
  • 1

    Forehead with the braces next to each other, no spaces: <h1>{{ msg }}</h1>

  • 1

    took, worked perfectly, thank you very much.

1 answer

3


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

Then change to:

<h1>{{ msg }}</h1>

Browser other questions tagged vue.js mustache.js

You are not signed in. Login or sign up in order to post.