Estoy tratando de construir una aplicación demo con Vue.js. Lo que yo estoy haciendo es un extraño error que Vue no está definido.

<!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é echo de menos aquí? Esto no es un CDN problema como también he descargado la biblioteca desde el sitio web oficial, utilizado y obtenido el mismo resultado

índice.html:15 Uncaught ReferenceError: Vue no está definido

6 Comentarios

  1. 20

    jsBin demo

    1. Perdió el orden, la primera vez que va:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    y luego:

    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                message: 'Hello Vue.js!'
            }
        });
    </script>
    1. Y type="JavaScript" debe ser type="text/javascript" (o más bien nada)
    • Ese es un punto válido, cambié alrededor de ellos y se actualiza mi pregunta con el nuevo código. El problema es que todavía hay
    • quitar type="JavaScript"
    • Yo estaba usando cdn.jsdelivr.net/npm/vue de vuejs.org/v2/guide. El uso de la dirección url parecía a quitar mi error, pero el mensaje todavía no se reemplaza aquí 🙁
  2. 3

    intentar solucionar type="JavaScript" a type="text/javascript" en ti vue.js srcipt etiqueta, o simplemente eliminarlo.
    Los navegadores modernos tomar etiqueta de script como javascript como predeterminado.

  3. 0

    Tuve que agregar el script de abajo para index.html dentro de la etiqueta HEAD.

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

    Pero en tu caso, ya que usted no tiene index.html tienes que añadirlo a la CABEZA de la etiqueta en su lugar.

    Así es como:

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

    A veces el problema puede ser si usted import que como este:

    const Vue = window.vue;

    esto puede sobrescribir el original Vue de referencia.

  5. 0

    Tengo este error pero como indefinido debido a la forma en la que incluyó js archivos

    Initailly me había

    <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>

    al final de mi .cshtml página
    Ha obtenido un Error Vue no se Define
    pero después me cambiaron a

    <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>

    y por arte de magia funcionó. Así que supongo que vue js necesita ser cargado en la parte superior de la .vue

  6. 0

    Me encontré con dos de los principales problemas con que aplicación. En primer lugar, cuando la importación de los vue.js script que uso type="JavaScript" como content-type que está mal. Se debe eliminar este type parámetro porque por defecto script etiquetas text/javascript como predeterminado content-type. O, simplemente reemplace el type parámetro con la correcta content-type que es type="text/javascript".

    El segundo problema es que el guión está incrustado en el mismo archivo HTML significa que puede ser desencadenada primera y probablemente la vue.js archivo no se ha cargado todavía. Usted puede solucionar este problema mediante un jQuery fragmento de $(function(){ /* ... */}); o la adición de un javascript función, como se muestra en este ejemplo:

    JS:

    //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!'
        }
      })
    });

    HTML:

    <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>

Dejar respuesta

Please enter your comment!
Please enter your name here