methods是Vue實例裡會運用到的方法，在學習模板語法v-on時曾使用過應該不陌生，現在來回憶一下。

在這個範例裡有一個數字跟一個按鈕，我們希望每點擊一次按鈕，畫面上的數字就會+1遞增上去，所以data裡定先定義一份count的資料，初始值為0，另外在methods內定義add屬性且在裡面宣告一段函式，最後將方法綁定到button上：

<div id="app">
  <div>{{count}}</div>
  <button @click="add">+1</button>
</div>

<script>
const vm = new Vue({
  el:"#app",
  data:{
    count: 0
  },
  methods:{
    add(){
      this.count+=1;
    }
  }
});
</script>

來看看methods裡的add(){}其實是縮寫，在前幾篇學習ES6其中一篇有提到物件縮寫(在object裡宣告函式時可使用ES6簡寫)，也就等於：

add: function(){
  this.count +=1;
}

methods內的this是指向vue實例，這個範例我們需要取data內的資料來操作，恩....
那不是應該是this.$data.count嗎？
這個問題可以從官方文件得到答案：

實例創建之後，可以通過vm.$data訪問原始數據對象。Vue實例也代理了data對象上所有的屬性，因此訪問vm.a等價於訪問vm.$data.a。

因此這邊使用this.count是等於this.$data.count的；Vue實例代理了data屬性，也同時代理了methods的屬性，所以命名的時候切記不能撞名：

除了methods裡的add屬性之外，data裡也加一個add屬性

const vm = new Vue({
  el: "#app",
  data:{
    count:0,
    add:1
  },
  methods:{
    add(){
      this.count += this.add
    }
  }
})

Vue：這位客官阿....您的add到底是哪個add呢？是data的add還是methods的add？
然後就報錯惹...

另外要注意的是methods裡的函式不能宣告成箭頭函式，若是宣告成箭頭函式，this就不會預期指向Vue實例，而是當時宣告函數時那個作用域的this，而在目前範例若使用箭頭函式，this就會指向global(window)。

學習了Vue實例的methods，下一篇computed