VueJS点击事件失效问题排查：无报错却无法触发

首先看你贴的代码，逻辑上是没问题的，但可能有几个容易忽略的小细节导致事件没触发，我帮你梳理下：

• 检查HTML结构完整性：你只提供了<body>内的代码，要确保整个页面是完整的HTML结构（比如开头要有<html>、<head>标签）。不过你把Vue实例的初始化脚本放在body末尾的做法是正确的，这能保证DOM加载完成后再初始化Vue。

• 确认Vue CDN加载成功：有时候网络波动会导致CDN资源加载失败，你可以打开浏览器「开发者工具」→「网络」标签，刷新页面后查看vue.js的请求状态，确保它是200成功加载的。

• 排查拼写与语法错误：你的代码里有个注释写着// Element Properties，但下面对应的是methods选项——这个注释不影响运行，但如果是不小心把methods写成其他字段就会出问题，不过你这里的methods是正确的，这点可以排除。

另外，我把你的代码补全成完整的可运行HTML文件，你可以直接复制测试，应该能正常工作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Counter Demo</title>
</head>
<body>
    <div id="app">
        <!--Listening for a click event-->
        <button v-on:click="increase">Click Me To Increase Counter</button>
        <p>{{ counter }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                counter: 0
            },
            methods: {
                increase: function() {
                    this.counter++;
                }
            }
        });
    </script>
</body>
</html>

如果还是不行，你可以试试：

• 清空浏览器缓存后再刷新页面
• 换个现代浏览器测试（Vue 2对旧IE兼容性较差，尽量用Chrome、Firefox等）

内容的提问来源于stack exchange，提问作者Web Develop Wolf