v-on：click不起作用（vue.js）

Question

我尝试进入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>

test.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

问题在于该按钮不起作用，单击时在控制台上什么也没写。

有什么建议吗？

Answer 1

在一段代码中效果很好。 您可能希望将Vue调用包装在DOMContentLoaded中，以确保DOM在Vue尝试附加到它之前就已经存在，如下所述。

 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>

Answer 2

问题是在页面上创建DOM元素之前，您正在加载test.js脚本。 换句话说，在创建任何内容之前，脚本正在页面上执行。

虽然DOMContentLoaded是解决问题的一种方法，但我建议将脚本标签移到body元素的底部。 请记住， <script>标记是渲染块，通常将其卸载到<body>元素的底部以提高性能。 这样，它还应该解决您的问题。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button v-on:click="exampleFunction">General</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="test.js"></script>
</body>
</html>

您可以在这里查看我的示例https://codepen.io/BenCodeZen/project/editor/XWMNNg

Answer 3

您的代码没有错。 该代码在我的浏览器中运行正常。

删除浏览器的缓存，然后重试

v-on：click不起作用（vue.js）

问题描述

3 个解决方案

解决方案1
1 已采纳 2018-02-16 12:54:23

解决方案2
1 2018-02-16 13:03:27

解决方案3
0 2018-02-16 13:01:45

v-on：click不起作用（vue.js）

问题描述

3 个解决方案

解决方案1 1 已采纳 2018-02-16 12:54:23

解决方案2 1 2018-02-16 13:03:27

解决方案3 0 2018-02-16 13:01:45

解决方案1
1 已采纳 2018-02-16 12:54:23

解决方案2
1 2018-02-16 13:03:27

解决方案3
0 2018-02-16 13:01:45