Vue data中定义数据作用

Vue 在data中定义的数据，其在dom中访问可以只用数据名，但是在method中访问必须前面加this. 不然提示not defined

比如代码：

Vue.component('my-component',{
  // template:'<button @click="counter++">{{counter}}</button>',
  template:'<button @click="addcounter">{{counter}}</button>',
  data:function () {
    return {
      counter:0
    };
  },
  methods:{
    addcounter:function () {
      this.counter++;
    }
  }
});

如果使用被注释的代码：

template:'<button @click="counter++">{{counter}}</button>'

那么访问没问题。
若使用

template:'<button @click="addcounter">{{counter}}</button>',

则在method中访问变量counter则必须在前面加上this. 否则访问不到，提示counter未定义。