在開發(fā)中,我們經(jīng)常需要用到函數(shù), 通過將一些需要復(fù)用的邏輯封裝在函數(shù)里,多次調(diào)用這個(gè)函數(shù)來達(dá)到邏輯代碼復(fù)用的目的.
在vue中,函數(shù)被定義成為方法來使用,這些方法定義在methods屬性中,然后就可以在vue 表達(dá)式中調(diào)用函數(shù)
1. 定義方法
vue 選項(xiàng)對(duì)象中有一個(gè)叫methods的屬性.這個(gè)屬性里面專門來存放一些函數(shù),用來給別人調(diào)用
const vm = new Vue({
el: "#app",
data: {
status: 2
},
methods: {
// 這里面是用來存放函數(shù),這里面的函數(shù)會(huì)自動(dòng)成為vue實(shí)例的方法
statusDoing(id){
var doing = ["睡覺","吃飯","學(xué)習(xí)Vue"];
return doing[id]
}
}
})
2. 方法的調(diào)用
之前有起到過Mastache語(yǔ)法中可以使用JavaScript表達(dá)式,所以我們可以在Mastache語(yǔ)法中調(diào)用函數(shù)
<div id="app">
{{ statusDoing(status) }}
</div>
方法除了可以在Mastache 表達(dá)式中使用外,還可以在任何可以使用Javascript表達(dá)式中都可以使用,我們慢慢了解
3. 方法中的this指向
在方法中,this指向該方法所屬的實(shí)例,可以使用this訪問data中的屬性或者其他方法
<div id="app">
{{ statusDoing() }}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
status: 2
},
methods: {
statusDoing(){
var doing = ["睡覺","吃飯","學(xué)習(xí)Vue"]
// 通過this 獲取到實(shí)例對(duì)象,來拿到data中的數(shù)據(jù)
return doing[this.status]
}
}
})
</script>
注意, 方法不能使用箭頭函數(shù),因?yàn)榧^函數(shù)的this不是Vue實(shí)例, 未來我們?cè)诜椒ㄖ锌赡軙?huì)大量使用到Vue實(shí)例對(duì)象中的屬性. 比如獲取數(shù)據(jù),或者調(diào)用其他方法, 如果我們使用了箭頭函數(shù)就會(huì)丟失this,只能通過Vue實(shí)例對(duì)象來獲取
詳細(xì)的部分我們會(huì)在事件中提及;
4. 關(guān)于方法響應(yīng)式
使用方法對(duì)數(shù)據(jù)進(jìn)行過濾
<div id="app">
<!-- 原數(shù)組 -->
<h2>原數(shù)組</h2>
{{numbers}}
<h2>使用方法過濾后的數(shù)組</h2>
{{ filterNum() }}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
numbers: [10,20,-12,15,-10,22]
},
methods: {
filterNum(){
// 過濾數(shù)組函數(shù)
return this.numbers.filter((number) => {
return number >= 15
})
}
}
})
</script>
這個(gè)時(shí)候改變numbers數(shù)據(jù),
vm.numbers = [22,11,13,19,18,10,17]
就會(huì)發(fā)現(xiàn), 方法過濾后的數(shù)據(jù)也發(fā)生了變化
所以我們前面講data屬性時(shí)提到的數(shù)據(jù)響應(yīng)式變化,在方法里同樣有效果, 數(shù)據(jù)變化觸發(fā)了Vue響應(yīng)系統(tǒng), 進(jìn)而觸發(fā)函數(shù)重新執(zhí)行.
