I have two files. One html file which defines a button and the implementation of button event in another javascript file using Vue.js framework. The idea of this example is when I press the button, the alert window should be shown.
index.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>
main.js
var app = new Vue({
el: '#app',
data: {
message_db: ''
},
methods:{
testDB: function(){
alert("Hello");
}
}
});
The browser console shows the following messages at loading the web page:
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
What is missing in this case?
I made the following corrections and it started to work:
index.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>
I updated script src tags. The order of script tags is important. Vue.min.js refers to v2.3.0. I think https://unpkg.com/vue returns the last vesion de vue.js About main.js file keeps the same content.