Vue 方法
Vue 方法是属于 'methods' 属性下的 Vue 实例的函数。
Vue 方法非常适合与事件处理 (v-on) 一起使用，以执行更复杂的操作。
Vue 方法也可以用于执行除事件处理之外的其他操作。
Vue 'methods' 属性
在本教程中，我们已经使用了一个 Vue 属性，即 'data' 属性，用于存储值。
还有一个名为 'methods' 的 Vue 属性，我们可以用来存储属于 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，以便在样式属性中更改背景颜色。
示例
这里与上面示例的区别在于，背景颜色通过 v-bind 绑定到 'xPos'，以便 hsl '色相' 值设置为等于 'xPos'。
<div
v-on:mousemove="mousePos"
v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}">
</div>
自己试试 »
在下面的示例中，事件对象从 <textarea> 标签中获取文本，使其看起来像我们在笔记本上书写。
示例
v-on 指令用于 <textarea> 标签上，用于监听 'input' 事件，该事件在 <textarea> 元素内的文本发生变化时发生。
当 'input' 事件发生时，会调用 'writeText' 方法，并且默认情况下会将事件对象与方法一起发送，以便我们可以从 <textarea> 标签中获取文本。'writeText' 方法更新 Vue 实例中的 'text' 属性。设置了一个 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>{{ "Moose count: " + 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: {{ tigers }} </li>
<li>Moose: {{ moose }} </li>
<li>Kangaroos: {{ 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>
自己试试 »
