tengo dos archivos Un archivo html que define un botón y la implementación del evento del botón en otro archivo javascript usando el marco Vue.js. La idea de este ejemplo es que cuando presiono el botón, se debe mostrar la ventana de alerta.
índice.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <div id="app" class="container-fluid"> <div class="row"> <div class="col-10"> <p><input type="button" value="Test DB" v-on:click="testDB()"> <span v-html="message_db"></span></p> </div> </div> </div> <script src="https://unpkg.com/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> <script src="js/main.js"></script> </body> </html>principal.js
var app = new Vue({ el: '#app', data: { message_db: '' }, methods:{ testDB: function(){ alert("Hello"); } } });La consola del navegador muestra los siguientes mensajes al cargar la página web:
vue-resource@1.3.4:7 Uncaught TypeError: window.Vue.use is not a function at vue-resource@1.3.4:7:15152 at vue-resource@1.3.4:7:150 at vue-resource@1.3.4:7:154 (anonymous) @ vue-resource@1.3.4:7 (anonymous) @ vue-resource@1.3.4:7 (anonymous) @ vue-resource@1.3.4:7 main.js:1 Uncaught TypeError: Vue is not a constructor at main.js:1:12¿Qué falta en este caso?
Hice las siguientes correcciones y empezó a funcionar:
índice.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> </head> <body> <div id="app" class="container-fluid"> <div class="row"> <div class="col-10"> <p><input type="button" value="Test DB" v-on:click="testDB"> <span v-html="message_db"></span></p> </div> </div> </div> <script src="js/vue.min.js"></script> <script src="js/main.js"></script> </body> </html>Actualicé las etiquetas src del script. El orden de las etiquetas de script es importante. Vue.min.js se refiere a v2.3.0. Creo que https://unpkg.com/vue devuelve la última versión de vue.js Sobre el archivo main.js mantiene el mismo contenido.