web-dev-qa-db-fra.com

Vue n'est pas défini

J'essaie de créer une application de démonstration avec Vue.js. Ce que je reçois est une erreur étrange que Vue n'est pas défini.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue JS Intro</title>
</head>
<body>
    <div id="demo">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    <script type="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>
</html>

Qu'est-ce qui m'a manqué ici? Ce n'est pas un problème de CDN car j'ai également téléchargé la bibliothèque sur le site officiel, je l'ai utilisée et j'ai obtenu le même résultat.

index.html: 15 Uncaught ReferenceError: Vue n'est pas définie

javascripthtmlvue.js
5
Vladimir Hraban

jsBin demo

  1. Vous avez manqué la commande, va d'abord 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

et que 

<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>
  1. et type="JavaScript" devrait être type="text/javascript" (ou plutôt rien du tout)
15
Roko C. Buljan

essayez de corriger type="JavaScript" à type="text/javascript" dans votre balise de script vue.js ou supprimez-le simplement. Les navigateurs modernes prendront les balises de script en javascript par défaut.

3
Sparkmorry

J'ai eu cette erreur mais comme indéfini à cause de la façon dont j'ai inclus les fichiers js

Initailly j'avais 

<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>
<script src="~/lib/vue/vue_v2.5.16.js"></script>

à la fin de ma page .cshtml Erreur GOT Vue non définie mais plus tard, je l'ai changée en

<script src="~/lib/vue/vue_v2.5.16.js"></script> 
<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>

et comme par magie cela a fonctionné. Je suppose donc que la vue js doit être chargée au-dessus du .vue 

0
Adi_Pithwa

Parfois, le problème peut être si vous import cela ressemble à ceci:

const Vue = window.vue;

cela peut écraser la référence Vue originale.

0
T.Todua

J'avais besoin d'ajouter le script ci-dessous à index.html dans la balise HEAD. 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Mais dans votre cas, puisque vous n’avez pas index.html, ajoutez-le à votre balise HEAD à la place.

Donc c'est comme:

<!doctype html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
...
</body>
</html>
0
Vince Banzon

J'ai trouvé deux problèmes principaux avec cette mise en œuvre. Premièrement, lorsque vous importez le script vue.js, vous utilisez type="JavaScript" en tant que content-type, ce qui est faux. Vous devez supprimer ce paramètre type car, par défaut, les balises script ont text/javascript comme valeur par défaut content-type. Ou alors, remplacez simplement le paramètre type par le content-type correct, qui est type="text/javascript".

Le deuxième problème est que votre script est incorporé dans le même fichier HTML, ce qui signifie qu'il peut être déclenché en premier et que le fichier vue.js n'a probablement pas encore été chargé. Vous pouvez résoudre ce problème en utilisant un fragment jQuery$(function(){ /* ... */ }); ou en ajoutant une fonction javascript comme indiqué dans cet exemple: 

// Verifies if the document is ready
function ready(f) {
  /in/.test(document.readyState) ? setTimeout('ready(' + f + ')', 9) : f();
}

ready(function() {
  var demo = new Vue({
    el: '#demo',
    data: {
      message: 'Hello Vue.js!'
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
</div>

0
Teocci