Vuejs2 VueJS-计数器不工作'；当我点击按钮时，它不会增加

我和Maximilian Schwarzmüller在Udemy的VueJS课程中学习VueJS，每当我在本地机器上运行他的示例时，它不会增加我的计数器变量

<div id="app">
  <button :click="increase">Click me</button>
  <p>{{ counter }}</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increase() {
        return this.counter++
      }
    }
  })
</script>

点击我
{{counter}}

新Vue({
el:“#应用程序”，
数据：{
柜台:0
},
方法：{
增加{
退回这个柜台++
}
}
})

知道密码有什么问题吗

---

非常感谢。

数据需要是一个函数：

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        counter: 0
      }
    },
    ...
  })
</script>

新Vue({
el:“#应用程序”，
数据（）{
返回{
柜台:0
}
},
...
})

试试这个：

data: () => ({
   counter: 0,
})

---

脚本将在文档准备就绪之前执行，因此Vue将找不到要装载到的元素

另外，正如其他人已经提到的那样，

数据

属性应该是一个函数，使每个实例都具有唯一的数据对象

document.addEventListener('DOMContentLoaded', mountVue);

function mountVue() {
  new Vue({
    el: '#app',

    data() {
      return {
        counter: 0
      };
    },

    methods: {
      increase() {
        return this.counter++;
      }
    }
  });
}

---

问题其实是这样的：

<button :click="increase">Click me</button>

我在这里看这个例子，我注意到他们的

数据

对象不是函数。数据对象必须是函数吗？他们的好处是我不知道的吗

---

我现在是Vue的新手，我正在学习Max的Udemy课程。非常感谢。

您必须在活动中使用

@

符号，而不是用于绑定道具的

：

<button @click="increase">Click me</button>

点击我

数据（）：{

不是有效的语法。有一个不必要的冒号。您确实自己发现了主要问题。单个冒号

：

是

v-bind

的简写，而

@

符号是

v-on

的简写。当可能有多个i>时，使用一个函数为数据返回一个对象非常重要Vue组件的实例。如果允许您在此处使用常规对象，则此对象中的值将在所有实例中共享。例如：如果您有一个计数器的多个实例，使用相同的数据，则如果您增加其中一个实例，这些值都将增加。不久前我参加了相同的课程，您想知道的主题是什么第26课是关于vue指令速记的。目前，您不必担心对数据使用函数，因为本课程第7节将详细介绍使用函数的原因。

<button @click="increase">Click me</button>