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>
自己动手试一试 »
