1

Estoy intentando seguir este tutorial de vue.js pero al probar el primer ejemplo directamente no me funciona. Como si no pillara la librería de vue.

Mi HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Demo</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>

</body>

</html>

Mi main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Al abrir la página unicamente me muestra

{{ message }} 

La consola del navegador muestra

[Vue warn]: Cannot find element: #app

¿Que es lo que estoy haciendo mal?

4
  • 1
    Intenta cambiar el orden de los scripts. Primero el de unpkg y posteriormente main.js Commented el 25 oct. 2019 a las 22:58
  • Si, eso ya lo probe antes pero daba lo mismo.
    – MrCode
    Commented el 25 oct. 2019 a las 22:59
  • 1
    Puedes incluir lo que imprime tu consola, porfavor Commented el 25 oct. 2019 a las 23:00
  • Me muestra [Vue warn]: Cannot find element: #app
    – MrCode
    Commented el 25 oct. 2019 a las 23:00

1 respuesta 1

7

Independiente si el js que generas tu lo tienes a nivel de tu mismo .html o lo tienes en un archivo con extensión js por separado; deberías tener un orden como el siguiente:

  • Idealmente invoca tus archivos .js justo antes de que acabe la etiqueta </body>
  • El punto anterior para que cuando tu código js de la instancia de vueJS busque un div con un determinado id este mismo nodo ya existe y lo pueda leer tu script
  • Considera que si vas a meter tu código js en un archivo por separado entonces primero invoca el archivo de vue y luego el tuyo pero justo antes de que cierre el </body>
  • No te muestra el valor dinámico de message y en cambio solo te muestra dicha string por que no existe vinculaciòn entre dicho elemento y el modelo de VueJS, por que este nodo existe justo después de que la instancia de Vue sea creada, por eso la recomendación del acomodo
  • El orden de tu código debería ser este:

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <title>Demo</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
      
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })  
    </script>
    </body>
    
    </html>

2
  • Funciona perfectamente. Era eso. Muchisimas gracias.
    – MrCode
    Commented el 25 oct. 2019 a las 23:03
  • 1
    Que buen punto, ayudó el asunto del orden de elementos.
    – dixoen
    Commented el 3 nov. 2020 a las 13:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.