Search code examples
javascriptvue.jsvue-directives

Issue with Vue.js : Doesn't display data

I'm learning Vue.js framework and I'm making some tries in order to handle this JavaScript framework.

My example is very simple, but I don't overcome to display data {} according to .html and .js files.

This is my .html file :

<!DOCTYPE html>
<html>
<head>
    <title>Test de Vue.js</title>
    <script src="test.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>

    <div id='test'>
        <p>{{ texte }}</p>
    </div>

</body>
</html>

And my .js file located in the same directory :

var vm = new Vue ({
    el : '#test',
    data : {
        texte : 'Ceci est un premier test en Vue.js'
    }
});

But, I don't know why my browser displays this :

enter image description here

Thank you so much

Solution

  • Your scripts are in incorrect order. You have to include Vue.js first, then your script as second, because your script references Vue object, which is defined in vue.js.

    Also, while vue.js can be included in <head>, your Vue model definition should go into the <body> tag, after the target element, otherwise, it will not work.

    <head>
    ...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>
    <div id="test">...</div>
    <script src="test.js"></script>
</body>