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

它在一个片段中运行良好。您可能希望在DOMContentLoaded中包装您的Vue调用，以确保在Vue尝试附加到DOM之前存在DOM，如下所示。

＆＃13;

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();
});

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <button v-on:click="exampleFunction">General</button>
</div>

＆＃13;

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：点击不起作用（vue.js）

3 个答案: