按钮单击事件使用Vue.js框架无法工作
按钮单击事件使用Vue.js框架无法工作
提问于 2022-03-09 20:01:46
我有两个文件。一个html文件定义了一个按钮，并使用Vue.js框架在另一个javascript文件中实现了按钮事件。这个例子的思想是，当我按下按钮时，应该显示警报窗口。
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");
}
}
});浏览器控制台在加载网页时显示下列消息：
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这个案子少了什么？
回答 1
Stack Overflow用户
发布于 2022-03-09 21:17:36
我做了以下修正，并开始运作：
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>我更新了脚本src标记。脚本标记的顺序很重要。Vue.min.js指的是2.3.0版本。我认为https://unpkg.com/vue返回了关于main.js文件的最后一个版本--保持相同的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71415350
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号