在Vue中,methods是一個(gè)對象,用來存儲(chǔ)組件中可以調(diào)用的方法。這些方法可以被綁定到模板中的事件或者是計(jì)算屬性,讓組件能夠響應(yīng)用戶的操作或者是數(shù)據(jù)的變化。
下面是一個(gè)簡單的組件代碼,其中包含了一個(gè)methods對象:
Vue.component('counter', {
data: function () {
return {
count: 0
}
},
methods: {
increment: function () {
this.count++
},
decrement: function () {
this.count--
}
},
template: `{{ count }}`
})
在上面的代碼中,methods對象被定義了兩個(gè)方法,分別是increment和decrement。這兩個(gè)方法可以被綁定到模板中的button元素上,讓用戶能夠通過點(diǎn)擊按鈕來改變組件的狀態(tài)。
當(dāng)用戶點(diǎn)擊增加按鈕時(shí),increment方法會(huì)被調(diào)用,然后將組件中的count值加一。而當(dāng)用戶點(diǎn)擊減少按鈕時(shí),decrement方法會(huì)被調(diào)用,然后將組件中的count值減一。下面是綁定到模板中的button元素的代碼:
在這里,我們使用了Vue的指令來綁定事件。在指令前面加上“@”符號,表示該指令綁定的是一個(gè)事件。然后在指令的值中,傳入需要執(zhí)行的方法名,也就是我們在methods對象中定義的方法名稱。
需要注意的是,在Vue中,methods對象中定義的方法,都是在組件實(shí)例對象中執(zhí)行的。這意味著我們可以在methods中使用this關(guān)鍵字,來訪問組件的狀態(tài)。比如,在上面的例子中,我們可以使用this.count來獲取組件中的count值。