Vue 方法
Vue 方法是 Vue 例項下“methods”屬性中的函式。
Vue 方法非常適合與事件處理 (v-on) 一起使用，以實現更復雜的功能。
Vue 方法也可以用於除事件處理之外的其他事情。
Vue 的“methods”屬性
我們已經在本教程中使用了 Vue 的一個屬性，即“data”屬性，我們可以在其中儲存值。
還有另一個 Vue 屬性叫做“methods”，我們可以在其中儲存屬於 Vue 例項的函式。方法可以像這樣儲存在 Vue 例項中：
const app = Vue.createApp({
data() {
return {
text: ''
}
},
methods {
writeText() {
this.text = 'Hello World!'
}
}
})
提示：我們需要新增字首 this. 以便從方法內部引用資料屬性。
要在單擊 <div> 元素時呼叫 'writeText' 方法，我們可以編寫以下程式碼：
<div v-on:click="writeText"></div>
該示例如下：
示例
v-on 指令用於 <div> 元素以監聽 'click' 事件。當 'click' 事件發生時，'writeText' 方法被呼叫，文字被改變。
<div id="app">
<p>點選下面的框：</p>
<div v-on:click="writeText">
{{ text }}
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: ''
}
},
methods: {
writeText() {
this.text = 'Hello World!'
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
使用事件物件呼叫方法
當事件發生從而呼叫方法時，**事件物件**會預設隨方法一起傳遞。這非常方便，因為事件物件包含許多有用的資料，例如目標物件、事件型別，或者在發生“click”或“mousemove”事件時的滑鼠位置。
示例
v-on 指令用於 <div> 元素以監聽 'mousemove' 事件。當 'mousemove' 事件發生時，'mousePos' 方法被呼叫，事件物件預設隨方法一起傳送，因此我們可以獲取滑鼠指標位置。
我們必須使用 this. 字首從方法內部引用 Vue 例項資料屬性中的“xPos”。
<div id="app">
<p>將滑鼠指標移到下面的框上：</p>
<div v-on:mousemove="mousePos"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
xPos: 0,
yPos: 0
}
},
methods: {
mousePos(event) {
this.xPos = event.offsetX
this.yPos = event.offsetY
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
如果我們將上面的例子擴充套件一行，我們還可以根據滑鼠指標在 x 方向上的位置來改變背景顏色。我們只需要新增 v-bind 來改變 style 屬性中的 background-color。
示例
這裡與上面示例的不同之處在於，背景顏色透過 v-bind 繫結到 'xPos'，因此 hsl 'hue' 值設定為等於 'xPos'。
<div
v-on:mousemove="mousePos"
v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}">
</div>
自己動手試一試 »
在下面的示例中，事件物件從 <textarea> 標籤中帶出一個文字，使其看起來像我們在筆記本中書寫。
示例
v-on 指令用於 <textarea> 標籤，以監聽 'input' 事件，該事件在文字區域元素中的文字發生更改時觸發。
當 'input' 事件發生時，'writeText' 方法被呼叫，事件物件預設隨方法一起傳送，因此我們可以從 <textarea> 標籤中獲取文字。Vue 例項中的 'text' 屬性由 'writeText' 方法更新。一個 span 元素被設定為以雙大括號語法顯示 'text' 值，並且此值由 Vue 自動更新。
<div id="app">
<textarea v-on:input="writeText" placeholder="開始書寫.."></textarea>
<span>{{ text }}</span>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: ''
}
},
methods: {
writeText(event) {
this.text = event.target.value
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
傳遞引數
有時我們希望在事件發生時向方法傳遞一個引數。
假設您是一名森林巡查員，並且您想記錄駝鹿目擊次數。有時會看到一兩隻駝鹿，有時一天會看到超過 10 只駝鹿。我們添加了“+1”和“+5”按鈕來計算目擊次數，以及一個“-1”按鈕，以防我們計數過多。
在這種情況下，我們可以為所有三個按鈕使用相同的方法，並且只需從不同的按鈕呼叫方法時傳遞不同的數字作為引數。這就是我們如何使用引數呼叫方法：
<button v-on:click="addMoose(5)">+5</button>
“addMoose”方法如下所示：
methods: {
addMoose(number) {
this.count = this.count + number
}
}
讓我們看一個完整的例子，瞭解如何透過方法傳遞引數。
示例
<div id="app">
<img src="img_moose.jpg">
<p>{{ "駝鹿數量: " + count }}</p>
<button v-on:click="addMoose(+1)">+1</button>
<button v-on:click="addMoose(+5)">+5</button>
<button v-on:click="addMoose(-1)">-1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
},
methods: {
addMoose(number) {
this.count+=number
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
同時傳遞引數和事件物件
如果我們想同時傳遞事件物件和另一個引數，可以在呼叫方法的地方使用保留名稱 '$event'，像這樣：
<button v-on:click="addAnimal($event, 5)">+5</button>
Vue 例項中的方法如下所示：
methods: {
addAnimal(e, number) {
if(e.target.parentElement.id==="tigers"){
this.tigers = this.tigers + number
}
}
}
現在讓我們看一個示例，瞭解如何透過方法同時傳遞事件物件和另一個引數。
示例
在此示例中，我們的方法同時接收事件物件和文字。
<div id="app">
<img
src="img_tiger.jpg"
id="tiger"
v-on:click="myMethod($event,'Hello')">
<p>"{{ msgAndId }}"</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
msgAndId: ''
}
},
methods: {
myMethod(e,msg) {
this.msgAndId = msg + ', '
this.msgAndId += e.target.id
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
更大的例子
在此示例中，我們看到可以使用一個方法計算三種不同動物的數量，每種動物的增量不同。我們透過傳遞事件物件和增量數字來實現這一點。
示例
當按鈕被點選時，增量大小和事件物件都作為引數與方法一起傳遞。保留字 '$event' 用於將事件物件與方法一起傳遞，以告知要計數哪種動物。
<div id="app">
<div id="tigers">
<img src="img_tiger.jpg">
<button v-on:click="addAnimal($event,1)">+1</button>
<button v-on:click="addAnimal($event,5)">+5</button>
<button v-on:click="addAnimal($event,-1)">-1</button>
</div>
<div id="moose">
<img src="img_moose.jpg">
<button v-on:click="addAnimal($event,1)">+1</button>
<button v-on:click="addAnimal($event,5)">+5</button>
<button v-on:click="addAnimal($event,-1)">-1</button>
</div>
<div id="kangaroos">
<img src="img_kangaroo.jpg">
<button v-on:click="addAnimal($event,1)">+1</button>
<button v-on:click="addAnimal($event,5)">+5</button>
<button v-on:click="addAnimal($event,-1)">-1</button>
</div>
<ul>
<li>老虎: {{ tigers }} </li>
<li>駝鹿: {{ moose }} </li>
<li>袋鼠: {{ kangaroos }} </li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
tigers: 0,
moose: 0,
kangaroos: 0
}
},
methods: {
addAnimal(e,number) {
if(e.target.parentElement.id==="tigers") {
this.tigers+=number
}
else if(e.target.parentElement.id==="moose") {
this.moose+=number
}
else {
this.kangaroos+=number
}
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
