Estoy dando mis primeros pasos en VueJS pero ya estoy atascado. Simplemente estoy tratando de mostrar una variable, pero incluso si la sintaxis me parece correcta, obtengo
{{product}}se muestra en lugar del nombre real del producto. Aquí está el HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue Mastery</title> <!-- Import Styles --> <link rel="stylesheet" href="./assets/styles.css" /> <!-- Import Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{product}}</h1> </div> <!-- Import App --> <script src="./main.js"></script> <!-- Mount App --> <script> const mountedApp = app.mount("#app"); </script> </body> </html>Y aquí está el JS:
const app = Vue.createApp({ data() { return { product: "socks", }; }, });¡Gracias!
Debe usar el CDN de la versión 3 ya que la sintaxis de Vue 3:
<script src="https://unpkg.com/vue@3"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue Mastery</title> <!-- Import Styles --> <link rel="stylesheet" href="./assets/styles.css" /> <!-- Import Vue.js --> <script src="https://unpkg.com/vue@3"></script> </head> <body> <div id="app"> <h1>{{product}}</h1> </div> <!-- Import App --> <script> const app = Vue.createApp({ data() { return { product: "socks", }; }, }); </script> <!-- Mount App --> <script> const mountedApp = app.mount("#app"); </script> </body> </html>