methods()是Vue.js中的一個(gè)非常重要的方法，它可以讓我們定義一些特定的函數(shù)，這些函數(shù)被綁定到Vue對(duì)象上，可以在模板中直接調(diào)用。
例子：方法調(diào)用
添加一個(gè)button并綁定click事件。
VUE:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
showMessage: function () {
alert(this.message)
}
}
})
HTML:從上面的例子中，我們可以看出，Vue中的方法就是在methods屬性中定義一個(gè)函數(shù)。這個(gè)函數(shù)可以與Vue實(shí)例中的數(shù)據(jù)進(jìn)行交互。在這個(gè)例子中，我們定義了一個(gè)名為showMessage的方法，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，就會(huì)調(diào)用這個(gè)方法。這個(gè)方法會(huì)彈出一個(gè)窗口，顯示我們定義的message。
更復(fù)雜的場(chǎng)景下，我們需要使用methods()來(lái)幫助我們完成更多的工作。例如，我們可能需要使用methods()來(lái)處理用戶(hù)輸入數(shù)據(jù)的驗(yàn)證:
例子：自定義方法進(jìn)行用戶(hù)輸入數(shù)據(jù)的驗(yàn)證
VUE:
new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
validate: function () {
if (this.username.length< 3) {
alert('用戶(hù)名長(zhǎng)度不能少于3位')
} else if (this.password.length< 6) {
alert('密碼長(zhǎng)度不能少于6位')
} else {
alert('恭喜您，輸入正確')
}
}
}
})
HTML:從上面的例子中，我們可以看出，我們定義了一個(gè)名為validate的方法，用于驗(yàn)證用戶(hù)輸入的數(shù)據(jù)。這個(gè)方法使用if語(yǔ)句來(lái)檢查輸入的數(shù)據(jù)是否正確。如果數(shù)據(jù)輸入不正確，就彈出一個(gè)窗口錯(cuò)誤提示。
但是，你需要注意，methods()并不是用來(lái)處理復(fù)雜邏輯的地方。如果你發(fā)現(xiàn)你的代碼越來(lái)越復(fù)雜，你需要開(kāi)始思考應(yīng)該將它們轉(zhuǎn)移至計(jì)算屬性、watcher或 computed watcher 中。
最后，你還需要提醒自己的是methods并不是用來(lái)調(diào)用異步操作的地方。如果你的methods()涉及到了網(wǎng)絡(luò)請(qǐng)求，你必須使用 Vue Resource 或者其他的插件來(lái)完成這個(gè)異步請(qǐng)求，而不是將它們內(nèi)嵌在methods()中。