B. *_*Bri 1 html javascript vue.js
我尝试进入 vue.js 但陷入困境。
html页面：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="test.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="exampleFunction">General</button>
</div>
</body>
</html>
测试.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function () {
console.log('Vue instance was created');
},
methods: {
exampleFunction: function () {
console.log('This is an example function');
}
},
destroyed: function () {
console.log('Vue instance was destroyed');
}
})
app.exampleFunction();
控制台输出：
Vue instance was created
This is an example function
问题是该按钮不起作用，当我单击时它在控制台上什么也不写。
有什么建议吗？
它在一个片段中工作得很好。您可能希望将 Vue 调用包装在DOMContentLoaded中，以确保在 Vue 尝试附加到 DOM 之前 DOM 就在那里，就像我在下面所做的那样。
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function() {
console.log('Vue instance was created');
},
methods: {
exampleFunction: function() {
console.log('This is an example function');
}
},
destroyed: function() {
console.log('Vue instance was destroyed');
}
})
app.exampleFunction();
});<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<button v-on:click="exampleFunction">General</button>
</div>| 归档时间： |
|
| 查看次数： |
9660 次 |
| 最近记录： |