[RUBY] Erreur de référence non interceptée: l'histoire de Vue n'est pas définie

introduction

Il s'agit d'une erreur survenue lors de l'utilisation d'une simple mini application pour lire Vue.js dans un CDN. Je vais le garder sous forme de mémorandum. Puisqu'il s'agit d'un débutant, veuillez signaler toute erreur!

Uncaught ReferenceError: Vue is not defined Lorsque j'ai écrit le code suivant pour vérifier le fonctionnement de vue.js, vue.js n'était pas chargé.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="vue.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>Actuel{{ number }}Clics fois</p>
    <button>compter jusqu'à</button>
  </div>
  <script src="vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

//vue.js

new Vue({
  el: '#app',
  data: {
    number: 0
  }
})

<! - Solution-> La solution est simple. Écrivez simplement le CDN pour utiliser Vue sur la troisième ligne à partir du bas au-dessus du js est chargé. Mettez-le à l'intérieur de l'étiquette de tête ou écrivez-le en haut de l'étiquette de corps.

<!--modifié-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="vue.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>Actuel{{ number }}Clics fois</p>
    <button>compter jusqu'à</button>
  </div>
  <script src="vue.js"></script>
</body>
</html>

finalement

J'espère que cela aidera les super débutants de Vue.js.

Recommended Posts

Erreur de référence non interceptée: l'histoire de Vue n'est pas définie
[Rails 6] Introduction de jQuery ・ La solution de l'erreur de référence non interceptée $ n'est pas définie
Qu'est-ce que vue cli
DateFormat n'est pas thread-safe
[Rails] fields_for n'est pas affiché